@charset "UTF-8";

.brd_t_b {
  border-bottom:1px solid #999;
  border-top:1px solid #999;
}

@media screen and (max-width: 560px) {
  .sp_w100per {
    width:70%;
    height:auto;
    margin:0 auto;
    display:block;
  }

  .brd_t_b {
    border:none;
  }
}

.gallery-wrap {
  padding: 60px;
  background-color: #fff;
  .gallery-inner {
    padding: 50px 40px;
    background-color: #ebe8e3;
  }
}

@media screen and (max-width: 767px) {
  .gallery-wrap {
    padding: 0;
    .gallery-inner {
      padding: 30px 0 50px;
    }
  }
}

.l-mv {
  padding: 90px 0 0;
  img {
    width: 100%;
    height: auto;
  }
  .mv-title {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .l-mv {
    padding: 60px 20px 0;
  }
}

.l-pankuzu {
  &>.inner {
    margin: 10px auto 50px;
    text-align: left;
    font-size: 9px;
    color: #666666;
    height: 9px;
    letter-spacing: 0.1em;
    text-decoration: none;

    a {
      text-decoration: none;
      color: #666;
    }
  }
}
@media screen and (max-width: 767px) {
  .l-pankuzu {
    padding: 0 20px;
  }
}

.l-list-header {
  &>.inner {
    .headline {
      margin: 0;
      font-size: 20px;
      line-height: 35px;
      font-weight: 500;
      text-align: center;
    }
    ul.category-switcher {
      margin: 0;
      margin-top: 64px;
      padding: 0;
      padding-bottom: 100px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 36px;
      list-style: none;
      width: 100%;
      &.small {
        padding-bottom: 56px;
        gap: 9px;
        li {
          a.button {
            width: auto;
            min-width: 125px;
            height: 30px;
            font-size: 14px;
            line-height: 28px;
            padding: 0 15px;
          }
        }
      }
      li {
        margin: 0;
        a.button {
          display: block;
          width: 213px;
          height: 50px;
          border-radius: 25px;
          border: 1px solid #666666;
          line-height: 48px;
          text-align: center;
          font-size: 15px;
          font-weight: 500;
          color: #000;
          transition: .3s;
          &:hover {
            background-color: #666666;
            color: #fff;
          }
          &.active {
            background-color: #666666;
            color: #fff;
          }
        }
      }
    }
    ul.tag-list {
      margin: 0;
      margin-bottom: 45px;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0 26px;
      font-size: 14px;
      line-height: 25px;
      li {
        margin: 0;
        a {
          color: #666666;
          transition: .3s;
          &:hover {
            opacity: .5;
          }
        }
      }
    }

  }
}

@media screen and (max-width: 767px) {
  .l-list-header {
    padding: 0 20px;
    &>.inner {
      .headline {
        font-size: 18px;
        line-height: 32px;
      }
      ul.category-switcher {
        margin-top: 30px;
        padding-bottom: 38px;
        gap: 15px;
        &.small {
          padding-bottom: 56px;
          gap: 9px 15px;
          li {
            width: auto;
            a.button {
              width: 125px;
              height: 30px;
              font-size: 14px;
              line-height: 28px;
            }
          }
        }
        li {
          width: 100%;
          a.button {
            width: 100%;
            height: 50px;
            border-radius: 25px;
            font-size: 15px;
          }
        }
      }
    }
  }
}

.l-list {
  &>.inner {

    .headline {
      margin: 0;
      margin-bottom: 35px;
      font-size: 20px;
      line-height: 35px;
      font-weight: 500;
      text-align: center;
    }

    ul.content-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 76px 40px;
      li.content-item {
        margin: 0;
        padding: 0 0 45px;
        border-bottom: 1px solid #000;
        width: 340px;
        position: relative;
        box-sizing: border-box;
        .image {
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          box-sizing: border-box;
          &:before {
            content: '';
            display: block;
            width: 100%;
            padding-top: calc(100% * 240 / 340);
          }
          a {
            &:hover img {
              transform: scale(1.2);
            }
            &.sold {
              pointer-events: none;
            }
          }
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: 0.5s;
          }
          .badge {
            position: absolute;
            top: 0;
            left: 0;
            width: 122px;
            height: 46px;
            font-size: 16px;
            line-height: 46px;
            text-align: center;
            color: #fff;
            &.sold {
              background-color: #bf579c;
            }
            &.under-negotiation {
              background-color: #0d6fb8;
            }
            &.open {
              display: none;
            }
          }
        }
        .date {
          margin: 0;
          margin-top: 15px;
          padding: 0 16px;
          font-size: 14px;
          line-height: 1;
          &+.title {
            margin-top: 5px;
          }
        }
        .title {
          margin: 0;
          margin-top: 15px;
          padding: 0 16px;
          font-size: 16px;
          line-height: 28px;
          font-weight: 500;
        }
        .detail {
          margin: 0;
          margin-top: 18px;
          padding: 0 16px;
          font-size: 13px;
          line-height: 23px;
          a {
            color: #666666;
            display: inline-block;
            margin-right: 10px;
            &:hover {
              text-decoration: underline;
            }
          }
          .sold {
            display: none;
          }
        }
        .category {
          margin: 0;
          margin-top: 25px;
          padding: 0 16px;
          display: flex;
          gap: 5px;
          span {
            display: block;
            height: 23px;
            padding: 0 11px;
            background-color: #666666;
            color: #fff;
            text-align: center;
            font-size: 11px;
            line-height: 23px;
          }

        }
        a.view-more {
          display: block;
          font-size: 12px;
          line-height: 28px;
          width: 100%;
          height: 28px;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 0 16px;
          color: #000;
          transition: .3s;
          box-sizing: border-box;
          &:hover {
            opacity: .5;
          }
          &:after {
            content: '→';
            display: block;
            position: absolute;
            top: 0;
            right: 16px;
          }
          &.sold {
            display: none;
          }
        }
      }
    }

  }
}

@media screen and (max-width: 767px) {
  .l-list {
    padding: 0 20px;
    &>.inner {

      .headline {
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 32px;
      }

      ul.content-list {
        gap: 58px 0;
        li.content-item {
          padding: 0 0 45px;
          width: 100%;
          .image {
            border-radius: 10px;
            &:before {
              padding-top: calc(100% * 240 / 340);
            }
            img {
            }
            .badge {
              width: 100px;
              height: 38px;
              font-size: 14px;
              line-height: 38px;
              &.sold {
              }
              &.under-negotiation {
              }
            }
          }
          .title {
            margin-top: 15px;
            padding: 0 16px;
            font-size: 16px;
            line-height: 28px;
          }
          .detail {
            margin-top: 18px;
            padding: 0 16px;
            font-size: 13px;
            line-height: 23px;
          }
          a.view-more {
            font-size: 12px;
            line-height: 28px;
            width: 100%;
            height: 28px;
            padding: 0 16px;
            &:after {
              right: 16px;
            }
          }
        }
      }

    }
  }
}

.l-list-pager {
  margin-top: 144px;
  padding-bottom: 220px;
  &>.inner {
    .pager {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px 20px;
      a, span {
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        color: #000;
        &:hover {
          text-decoration: underline;
        }
        &.current {
          background-color: #000;
          color: #fff;
        }
        &.prev {
          background-image: url(../img/icon_prev.svg);
          background-size: 10px 12px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        &.next {
          background-image: url(../img/icon_next.svg);
          background-size: 10px 12px;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .l-list-pager {
    margin-top: 100px;
    padding-bottom: 120px;
    &>.inner {
      .pager {
        gap: 10px 18px;
        a, span {
          display: block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 15px;
          &.page {
          }
          &.prev {
            background-size: 10px 12px;
          }
          &.next {
            background-size: 10px 12px;
          }
        }
      }
    }
  }
}

/* detail */
.l-detail-header {
  &>.inner {
    .headline {
      margin: 0;
      font-size: 20px;
      line-height: 35px;
      font-weight: 500;
    }

    .category {
      margin: 0;
      margin-top: 20px;
      display: flex;
      gap: 5px;
      span {
        display: block;
        height: 23px;
        padding: 0 11px;
        background-color: #666666;
        color: #fff;
        text-align: center;
        font-size: 11px;
        line-height: 23px;
      }
    }

    ul.tag-list {
      margin: 0;
      margin-top: 15px;
      margin-bottom: 40px;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0 26px;
      font-size: 14px;
      line-height: 25px;
      li {
        margin: 0;
        a {
          color: #666666;
          transition: .3s;
          &:hover {
            opacity: .5;
          }
        }
      }
    }

  }
}

@media screen and (max-width: 767px) {
  .l-detail-header {
    &>.inner {
      .headline {
        padding: 0 16px;
        font-size: 18px;
        line-height: 32px;
      }

      .category {
        margin: 0;
        margin-top: 20px;
        padding: 0 16px;
        display: flex;
        gap: 5px;
        span {
          display: block;
          height: 23px;
          padding: 0 11px;
          background-color: #666666;
          color: #fff;
          text-align: center;
          font-size: 11px;
          line-height: 23px;
        }
      }

      ul.tag-list {
        margin-top: 15px;
        margin-bottom: 40px;
        padding: 0 16px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0 18px;
        font-size: 12px;
        line-height: 21px;
        li {
          margin: 0;
          a {
            color: #666666;
            transition: .3s;
            &:hover {
              opacity: .5;
            }
          }
        }
      }
    }

  }
}


.l-detail {
  &>.inner {
    .detail-wrapper {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &.gallery {
        .image-block {
         width: 100%;
         margin-top: 20px;
          .pictures {
            .pictures-item {
              width: 1100px;
              height: 680px;
              overflow: hidden;
              position: relative;
              img {
                width: auto;
                max-width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
              }
            }
          }
          .thumbnails {
            margin-top: 28px;
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            .thumbnails-item {
              width: 165px;
              height: 100px;
              overflow: hidden;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
        }
        .text-block {
          margin-top: 20px;
          width: 100%;
          padding: 20px;
          background-color: #fff;
        }
      }
      .image-block {
        width: 530px;
        .pictures {
          .pictures-item {
            width: 530px;
            height: 380px;
            overflow: hidden;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          .pictures-caption {
            font-size: 11px;
            padding: 5px 15px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.7);
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
          }
        }
        .thumbnails {
          margin-top: 24px;
          display: flex;
          gap: 7.5px;
          .thumbnails-item {
            cursor: pointer;
            width: 100px;
            height: 65px;
            overflow: hidden;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }

      }
      .text-block {
        width: 520px;
        .badge {
          width: 122px;
          height: 46px;
          text-align: center;
          font-size: 16px;
          line-height: 28px;
          font-weight: 700;
          color: #fff;
          line-height: 46px;
          margin-bottom: 17px;
          &.sold {
            background-color: #bf579c;
          }
          &.under-negotiation {
            background-color: #0d6fb8;
          }
          &.open {
            display: none;
          }
        }
        .headline2 {
          margin: 0;
          font-size: 20px;
          line-height: 35px;
          font-weight: 500;

        }
        .text {
          margin: 0;
          margin-top: 10px;
          font-size: 16px;
          line-height: 28px;
        }
        .contact {
          margin-top: 30px;
          .subject {
            margin: 0;
            font-size: 16px;
            line-height: 28px;
          }
          .tel {
            margin: 0;
            font-size: 23px;
            line-height: 40px;
            padding-left: 60px;
            position: relative;
            &:before {
              content: '';
              display: block;
              position: absolute;
              width: 35px;
              height: 100%;
              top: 0;
              left: 5px;
              background-image: url(../img/icon_freedial.svg);
              background-size: 100% auto;
              background-position: center center;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .buttons {
        margin-top: 15px;
        display: flex;
        width: 100%;
        gap: 20px;
        &.gallery {
          margin-top: 40px;
        }
        a.button {
          display: block;
          transition: .3s;
          box-sizing: border-box;
          &:hover {
            opacity: .5;
          }
          &.line {
            width: 255px;
            height: 40px;
            background-color: #06c755;
            color: #fff;
            font-size: 14px;
            line-height: 40px;
            font-weight: 500;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            &:before {
              content: '';
              display: block;
              width: 27px;
              height: 26px;
              background-image: url(../img/icon_line.svg);
              background-size: contain;
              background-position: center center;
              background-repeat: no-repeat;
            }
          }
          &.mail {
            width: 250px;
            height: 40px;
            border: 1px solid #000;
            font-size: 14px;
            line-height: 38px;
            font-weight: 500;
            text-align: center;
            padding-right: 25px;
            color: #000;
            position: relative;
            &:before {
              content: '';
              display: block;
              width: 20px;
              height: 20px;
              background-color: #000;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              right: 5px;
              transform: translate(0, -50%);
            }
            &:after {
              content: '';
              display: block;
              width: 5px;
              height: 5px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              position: absolute;
              top: 50%;
              right: 15px;
              transform: rotate(45deg) translate(0, -50%);
            }
          }
        }
      }

    }
    .l-property {
      padding-top: 96px;
      .headline {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
      }
      dl {
        box-sizing: border-box;
        margin: 0;
        margin-top: 28px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        dt {
          box-sizing: border-box;
          margin: 0;
          width: 196px;
          border-bottom: 2px solid #000;
          padding: 13px 20px;
          font-size: 16px;
          line-height: 28px;
          font-weight: 500;
        }
        dd {
          box-sizing: border-box;
          margin: 0;
          width: calc(100% - 196px);
          border-bottom: 1px solid #000;
          padding: 13px 32px;
          font-size: 16px;
          line-height: 28px;
          .addres-map {
            margin-left: 20px;
            position: relative;
            &::before {
              content: '';
              width: 20px;
              aspect-ratio: 1;
              background: url(../img/icon-map.svg) no-repeat center / contain;
              display: inline-block;
              vertical-align: middle;
            }
            a {
              color: #3c434a;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
        .sold {
          display: none;
        }
      }
    }
    .l-point {
      padding-top: 96px;
      .headline {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
      }
      p {
        font-size: 16px;
        line-height: 28px;
      }
    }
    .reserve-button {
      margin-top: 40px;
      display: block;
      width: 255px;
      height: 40px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      line-height: 38px;
      border: 1px solid #000;
      color: #000;
      position: relative;
      transition: .3s;
      &:hover {
        opacity: .5;
      }
      &:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
      }
      &:after {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        position: absolute;
        top: 50%;
        right: 19px;
        transform: translate(0, -50%) rotate(45deg);
      }
      &.sold {
        display: none;
      }
    }
    .buttons {
      margin-top: 146px;
      width: 100%;
      a.back {
        margin: 0 auto;
        display: block;
        width: 300px;
        height: 60px;
        border-radius: 30px;
        border: 1px solid #000;
        color: #000;
        font-size: 16px;
        line-height: 58px;
        text-align: center;
        position: relative;
        transition: .3s;
        &:hover {
          opacity: .5;
        }
        &:before {
          content: '';
          display: block;
          width: 30px;
          height: 30px;
          background-color: #000;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translate(0, -50%);
        }
        &:after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
          position: absolute;
          top: 50%;
          right: 33px;
          transform: translate(0, -50%) rotate(45deg);
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .l-detail {
    padding: 0 20px;
    &>.inner {
      .detail-wrapper {
        flex-wrap: wrap;
        &.gallery {
          .image-block {
           width: 100%;
           margin-top: 20px;
            .pictures {
              .pictures-item {
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 10;
                overflow: hidden;
                position: relative;
                img {
                  width: auto;
                  max-width: 100%;
                  height: 100%;
                  object-fit: cover;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  margin: auto;
                }
              }
            }
            .thumbnails {
              margin-top: 10px;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 10px;
              flex-wrap: wrap;
              .thumbnails-item {
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 10;
                overflow: hidden;
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
              }
            }
          }
          .text-block {
            margin-top: 20px;
          }
        }
        .image-block {
          width: 100%;
          .pictures {
            .pictures-item {
              width: 100%;
              height: auto;
              aspect-ratio: 16 / 10;
              overflow: hidden;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            .pictures-caption {
              font-size: 10px;
              padding: 3px 15px;
            }
          }
          .thumbnails {
            margin-top: 11px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 5px;
            .thumbnails-item {
              cursor: pointer;
              width: 100%;
              height: auto;
              aspect-ratio: 16 / 10;
              overflow: hidden;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
        }
        .text-block {
          margin-top: 20px;
          width: 100%;
          .badge {
            width: 122px;
            height: 46px;
            text-align: center;
            font-size: 16px;
            line-height: 28px;
            font-weight: 700;
            color: #fff;
            line-height: 46px;
            margin-bottom: 15px;
            &.sold {
              background-color: #bf579c;
            }
            &.under-negotiation {
              background-color: #0d6fb8;
            }

          }
          .headline2 {
            margin: 0;
            font-size: 20px;
            line-height: 35px;
            font-weight: 500;

          }
          .text {
            margin: 0;
            margin-top: 10px;
            font-size: 16px;
            line-height: 28px;
          }
          .contact {
            margin-top: 30px;
            .subject {
              margin: 0;
              font-size: 16px;
              line-height: 28px;
            }
            .tel {
              margin: 0;
              font-size: 23px;
              line-height: 40px;
              padding-left: 60px;
              position: relative;
              &:before {
                content: '';
                display: block;
                position: absolute;
                width: 35px;
                height: 100%;
                top: 0;
                left: 5px;
                background-image: url(../img/icon_freedial.svg);
                background-size: 100% auto;
                background-position: center center;
                background-repeat: no-repeat;
              }
            }
          }
        }
        .buttons {
          margin-top: 15px;
          display: flex;
          width: 100%;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 18px;
          a.button {
            display: block;
            transition: .3s;
            box-sizing: border-box;
            &:hover {
              opacity: .5;
            }
            &.line {
              width: 100%;
              height: 40px;
              background-color: #06c755;
              color: #fff;
              font-size: 14px;
              line-height: 40px;
              font-weight: 500;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 5px;
              &:before {
                content: '';
                display: block;
                width: 27px;
                height: 26px;
                background-image: url(../img/icon_line.svg);
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
              }
            }
            &.mail {
              width: 100%;
              height: 40px;
              border: 1px solid #000;
              font-size: 14px;
              line-height: 38px;
              font-weight: 500;
              text-align: center;
              padding-right: 25px;
              color: #000;
              position: relative;
              &:before {
                content: '';
                display: block;
                width: 20px;
                height: 20px;
                background-color: #000;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                right: 5px;
                transform: translate(0, -50%);
              }
              &:after {
                content: '';
                display: block;
                width: 5px;
                height: 5px;
                border-top: 1px solid #fff;
                border-right: 1px solid #fff;
                position: absolute;
                top: 50%;
                right: 15px;
                transform: rotate(45deg) translate(0, -50%);
              }
            }
          }
        }

      }
      .l-property {
        padding-top: 96px;
        .headline {
          font-size: 20px;
          line-height: 1;
          font-weight: 700;
        }
        dl {
          margin-top: 28px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          border-top: 1px solid #000;
          border-left: 1px solid #000;
          dt {
            width: 100%;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            padding: 12px 15px;
            font-size: 16px;
            line-height: 28px;
            font-weight: 500;
            text-align: center;
            background-color: #d1cbbd;
          }
          dd {
            width: 100%;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            padding: 12px 15px;
            font-size: 16px;
            line-height: 28px;
            .addres-map {
              text-align: center;
              display: block;
              margin: 5px 0 0;
            }
          }
        }

      }
      .l-point {
        padding-top: 96px;
        .headline {
          font-size: 20px;
          line-height: 1;
          font-weight: 700;
        }
        p {
          font-size: 16px;
          line-height: 28px;
        }
      }
      .reserve-button {
        margin-top: 40px;
        width: 100%;
        height: 40px;
        font-size: 14px;
        line-height: 38px;
      }
      .buttons {
        margin-top: 120px;
        a.back {
          width: 100%;
        }
      }

    }
  }
}


.l-content-box {
  background-color: #fff;
  padding: 60px 0 90px;
  border-radius: 20px;

  &+.l-content-box {
    margin-top: 224px;
  }

  &>.inner {
    box-sizing: border-box;
    width: 950px;
    margin: 0 auto;

    .content-image {
      position: relative;
      img {
        width: 100%;
        height: auto;
      }

      .buttons1 {
        position: absolute;
        display: flex;
        width: 450px;
        height: auto;
        bottom: 0;
        right: 0;
        justify-content: space-between;
        a {
          transition: .3s;
          &:hover {
            opacity: .5;
          }
        }
        .link-line1 {
          width: 215px;
          img {
            width: 100%;
            height: auto;
          }
        }
        .link-mail {
          width: 215px;
          img {
            width: 100%;
            height: auto;
          }
        }
      }

      .buttons2 {
        margin-top: 32px;
        a.line {
          margin: 0 auto;
          width: 300px;
          height: 60px;
          line-height: 60px;
          border-radius: 40px;
          background-color: #06c755;
          display: block;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          padding: 0 0 0 54px;
          position: relative;
          box-sizing: border-box;
          transition: .3s;
          &:hover {
            opacity: .5;
          }
          &:before {
            content: '';
            display: block;
            width: 40px;
            height: 100%;
            background-image: url(../img/icon_line.svg);
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 13px;
          }
        }
      } 
    }
  }
}

@media screen and (max-width: 767px) {
  .l-content-box {
    padding: 40px 0 50px;

    &+.l-content-box {
      margin-top: 76px;
    }

    hr.redline {
      border-bottom: 3px solid #b96e70;
      margin: 0;
    }
    &>.inner {
      width: 100%;
      padding: 0 20px;

      .content-image {
        .buttons1 {
          margin-top: 40px;
          position: static;
          display: block;
          width: 100%;
          height: auto;
          a {
            display: block;
            transition: .3s;
            &:hover {
              opacity: .5;
            }
          }
          .link-line1 {
            width: 100%;
            img {
              width: 100%;
              height: auto;
            }
          }
          .link-mail {
            margin-top: 13px;
            width: 100%;
            img {
              width: 100%;
              height: auto;
            }
          }
        }

        .buttons2 {
          margin-top: 32px;
          a.line {
            display: block;
            transition: .3s;
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-radius: 40px;
            font-size: 15px;
            &:before {
              width: 40px;
              height: 100%;
              top: 0;
              left: 13px;
            }
          }
        }
      }
    }
  }
}