.indexNavi {
  display: none; }

.mobile {
  display: none; }

.container {
  background-color: #e5c0d4; }
  .container > .wrapper {
    position: relative;
    background-color: #e2ddf3; }
    .container > .wrapper > .line {
      width: 39px;
      position: absolute;
      top: 0;
      height: 100%;
      background: #fff;
      border-right: 2px solid #000;
      border-left: 2px solid #000;
      z-index: 1;
      background-size: auto 224.5px;
      background-position: center top;
      background-repeat: repeat-y; }
      .container > .wrapper > .line.line-left {
        right: 100%;
        -webkit-animation: marquee2 10s linear infinite;
        animation: marquee2 10s linear infinite;
        background-image: url(/img/703/line2.png); }
      .container > .wrapper > .line.line-right {
        left: 100%;
        animation: marquee2 10s linear reverse infinite;
        background-image: url(/img/703/line3.png); }
@-webkit-keyframes marquee2 {
  0% {
    background-position: center 0; }
  100% {
    background-position: center -224.5px; } }
@keyframes marquee2 {
  0% {
    background-position: center 0; }
  100% {
    background-position: center -224.5px; } }
.mainbox {
  float: left;
  width: 100%; }
  .mainbox > section {
    float: left;
    width: 100%; }
    .mainbox > section > h2 {
      float: left;
      width: 100%;
      text-align: center; }
      .mainbox > section > h2 > img {
        float: none;
        width: 500px; }
  .mainbox > .mainvisual {
    float: left;
    width: 100%;
    height: auto;
    background: none; }
    .mainbox > .mainvisual > h2 {
      float: left;
      width: 100%;
      text-align: center;
      padding: 72px 0 16px; }
      .mainbox > .mainvisual > h2 > img {
        float: none;
        height: 64px; }
    .mainbox > .mainvisual > .image {
      float: left;
      width: 100%;
      padding: 48px; }
      .mainbox > .mainvisual > .image > img {
        float: left;
        width: 100%;
        border: 2px solid #000;
        padding: 4px;
        background-color: #fff; }
  .mainbox > .about {
    float: left;
    width: 80%;
    margin: 24px 10% 0;
    padding: 48px 48px;
    background-color: #e5c0d4; }
    .mainbox > .about > p {
      float: left;
      width: 100%;
      margin-top: 48px;
      text-align: left;
      font-size: 16px;
      line-height: 24px;
      font-weight: bold; }
  .mainbox > .merit {
    float: left;
    width: 80%;
    margin: 0 10%;
    padding: 64px 48px 24px; }
    .mainbox > .merit > ul {
      float: left;
      width: 100%;
      margin-top: 48px; }
      .mainbox > .merit > ul > li {
        float: left;
        width: 300px;
        height: 300px;
        position: relative;
        margin-bottom: 48px;
        border-radius: 50%;
        background: #fff;
        padding: 4px;
        border: 2px solid #000;
        font-weight: bold; }
        .mainbox > .merit > ul > li:nth-of-type(2n) {
          margin-left: 72px; }
        .mainbox > .merit > ul > li > img {
          float: left;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%; }
        .mainbox > .merit > ul > li > .textbox {
          float: left;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 16px;
          background-color: #fff;
          border: 2px solid #000;
          padding: 12px 8px; }
          .mainbox > .merit > ul > li > .textbox > .title {
            float: left;
            width: 80%;
            margin: 0 10% 12px;
            font-size: 18px;
            color: #392b75; }
          .mainbox > .merit > ul > li > .textbox > p {
            float: left;
            width: 100%;
            font-size: 14px;
            line-height: 16px; }
  .mainbox > .contactBox {
    float: left;
    width: 100%;
    text-align: center;
    background: url(/img/703/contact_back.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 32px 0 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    position: relative; }
    .mainbox > .contactBox > img {
      float: none;
      width: 460px; }
    .mainbox > .contactBox > .link {
      float: left;
      width: 300px;
      position: absolute;
      left: calc(50% - 150px);
      bottom: 116px;
      color: #fff;
      border: 6px double #fff;
      padding: 22px 40px;
      font-size: 22px;
      font-weight: bold;
      background-color: #000;
      letter-spacing: 2px; }
      .mainbox > .contactBox > .link:hover {
        background-color: #86064d; }
  .mainbox > .flow {
    float: left;
    width: 80%;
    margin: 0 10%;
    padding: 64px 0 0; }
    .mainbox > .flow > ul {
      float: left;
      width: 100%;
      margin: 72px 0 48px; }
      .mainbox > .flow > ul > li {
        float: left;
        width: 100%;
        background-color: #fff;
        border: 2px solid #000;
        position: relative;
        margin-bottom: 48px;
        font-weight: bold;
        padding: 24px 0; }
        .mainbox > .flow > ul > li:last-of-type {
          margin-bottom: 0; }
        .mainbox > .flow > ul > li > .num {
          width: 200px;
          background-color: #fff;
          border: 2px solid #000;
          position: absolute;
          top: -38px;
          left: -2px;
          color: #392b75;
          font-size: 18px;
          padding: 8px 0; }
        .mainbox > .flow > ul > li > .title {
          float: left;
          width: 100%;
          position: relative;
          font-size: 20px;
          line-height: 20px;
          z-index: 0;
          color: #392b75; }
          .mainbox > .flow > ul > li > .title::before {
            content: "";
            width: 300px;
            height: 1px;
            background-color: #392b75;
            position: absolute;
            top: 10px;
            left: calc(50% - 150px);
            z-index: -1; }
          .mainbox > .flow > ul > li > .title > span {
            background-color: #fff;
            padding: 0 4px; }
        .mainbox > .flow > ul > li > .text {
          float: left;
          width: 100%;
          font-size: 14px;
          line-height: 16px;
          padding: 12px 16px 0;
          text-align: left; }
  .mainbox > .point {
    float: left;
    width: 80%;
    margin: 0 10%;
    padding: 64px 48px 24px; }
    .mainbox > .point > ul.circle {
      float: left;
      width: 100%;
      margin-top: 48px; }
      .mainbox > .point > ul.circle > li {
        float: left;
        width: 300px;
        height: 300px;
        position: relative;
        margin-bottom: 48px;
        border-radius: 50%;
        background: #fff;
        padding: 4px;
        border: 2px solid #000;
        font-weight: bold; }
        .mainbox > .point > ul.circle > li:nth-of-type(2n) {
          margin-left: 72px; }
        .mainbox > .point > ul.circle > li:last-of-type {
          margin-left: calc(372px / 2); }
        .mainbox > .point > ul.circle > li > img {
          float: left;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%; }
        .mainbox > .point > ul.circle > li > .textbox {
          float: left;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 16px;
          background-color: #fff;
          border: 2px solid #000;
          padding: 12px 8px;
          font-size: 18px;
          color: #392b75; }
    .mainbox > .point > ul.list {
      float: left;
      width: 100%;
      margin: 32px 0 48px; }
      .mainbox > .point > ul.list > li {
        float: left;
        width: 100%;
        background-color: #fff;
        border: 2px solid #000;
        position: relative;
        margin-bottom: 48px;
        font-weight: bold;
        padding: 24px 0; }
        .mainbox > .point > ul.list > li:last-of-type {
          margin-bottom: 0; }
        .mainbox > .point > ul.list > li > .num {
          width: 200px;
          background-color: #fff;
          border: 2px solid #000;
          position: absolute;
          top: -38px;
          left: -2px;
          color: #392b75;
          font-size: 18px;
          padding: 8px 0; }
        .mainbox > .point > ul.list > li > .title {
          float: left;
          width: 100%;
          position: relative;
          font-size: 20px;
          line-height: 20px;
          z-index: 0;
          color: #392b75; }
          .mainbox > .point > ul.list > li > .title::before {
            content: "";
            width: 300px;
            height: 1px;
            background-color: #392b75;
            position: absolute;
            top: 10px;
            left: calc(50% - 150px);
            z-index: -1; }
          .mainbox > .point > ul.list > li > .title > span {
            background-color: #fff;
            padding: 0 4px; }
        .mainbox > .point > ul.list > li > .text {
          float: left;
          width: 100%;
          font-size: 14px;
          line-height: 16px;
          padding: 12px 16px 0;
          text-align: left; }
  .mainbox > .recommend {
    float: left;
    width: 80%;
    margin: 0 10%;
    background-color: #fff;
    border: 2px solid #000;
    margin-bottom: 48px; }
    .mainbox > .recommend > h2 {
      border-bottom: 2px solid #000;
      padding: 32px 0; }
    .mainbox > .recommend > ul {
      float: left;
      width: 100%;
      padding: 24px; }
      .mainbox > .recommend > ul > li {
        float: left;
        width: 342px;
        padding-top: 40px;
        margin-bottom: 16px; }
        .mainbox > .recommend > ul > li:nth-of-type(2n) {
          margin-left: 24px; }
        .mainbox > .recommend > ul > li > .link {
          float: left;
          width: 100%;
          border: 2px solid #000;
          position: relative; }
          .mainbox > .recommend > ul > li > .link:hover {
            border: 2px solid #86064d;
            background-color: #e5c0d4; }
            .mainbox > .recommend > ul > li > .link:hover > .vacancy, .mainbox > .recommend > ul > li > .link:hover > .update {
              background-color: #392b75;
              color: #fff; }
              .mainbox > .recommend > ul > li > .link:hover > .vacancy > span, .mainbox > .recommend > ul > li > .link:hover > .update > span {
                color: #e2ddf3; }
          .mainbox > .recommend > ul > li > .link > .vacancy, .mainbox > .recommend > ul > li > .link > .update {
            width: 100px;
            font-weight: bold;
            font-size: 14px;
            position: absolute;
            top: -30px;
            left: -2px;
            border: 2px solid #000;
            padding: 4px 0; }
            .mainbox > .recommend > ul > li > .link > .vacancy > span, .mainbox > .recommend > ul > li > .link > .update > span {
              font-size: 18px;
              padding: 0 2px;
              color: #86064d; }
          .mainbox > .recommend > ul > li > .link > .update {
            left: 110px; }
          .mainbox > .recommend > ul > li > .link > .content {
            float: left;
            width: 100%;
            padding: 8px 8px;
            text-align: left;
            position: relative; }
            .mainbox > .recommend > ul > li > .link > .content > img {
              float: left;
              width: 322px;
              height: 240px;
              object-fit: cover; }
            .mainbox > .recommend > ul > li > .link > .content > .title {
              float: left;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-weight: bold;
              font-size: 16px;
              padding: 16px 0 12px; }
            .mainbox > .recommend > ul > li > .link > .content > .rent {
              float: left;
              font-weight: bold;
              color: #86064d;
              font-size: 18px;
              padding-bottom: 12px; }
            .mainbox > .recommend > ul > li > .link > .content > .layout {
              border: 1px solid #000;
              font-weight: bold;
              background-color: #fff;
              padding: 4px 8px;
              position: absolute;
              top: 218px;
              right: 14px; }
            .mainbox > .recommend > ul > li > .link > .content > .address, .mainbox > .recommend > ul > li > .link > .content > .station {
              float: left;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              padding-bottom: 4px; }
              .mainbox > .recommend > ul > li > .link > .content > .address > span, .mainbox > .recommend > ul > li > .link > .content > .station > span {
                color: #86064d;
                font-weight: bold; }

/*# sourceMappingURL=d--homes--index.css.map */