/* all style
---------------------------------------------------------- */
.vrmodelroom img {
  width: 100%;
  height: auto;
}

.vrmodelroom iframe {
  width: 100%;
  height: auto;
}

/* mainVisual
---------------------------------------------------------- */
.vrmodelroom .main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  padding-top: 46.67%;
}

.iphone .vrmodelroom .main-visual {
  background: url(/mecsumai/img/sumai/vr/main_sp.jpg) no-repeat 50% 50%;
  background-size: 100% auto;
}

.iphone .vrmodelroom .main-visual iframe {
  position: relative;
  z-index: -1;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .vrmodelroom .main-visual {
    width: 100%;
    max-width: 1200px;
    padding-top: 46.67%;
  }
}

@media screen and (min-width: 1201px) {
  .vrmodelroom .main-visual {
    padding-top: 560px;
  }
}

.vrmodelroom #video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding-top: 100%;
}

.vrmodelroom #video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  text-align: center;
}

.vr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 51.33%;
  margin-top: 2%;
}

@media screen and (min-width: 768px) {
  .vr-logo {
    width: 39.67%;
    max-width: 476px;
  }
}

/* navi
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .vr-navi {
    position: relative;
    z-index: 5;
    background-color: #fff;
  }
  .vr-navi ul {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .vr-navi ul > li {
    width: 50%;
    list-style: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
  }
  .vr-navi ul > li span {
    display: none;
  }
  .vr-navi ul li:nth-child(2) {
    border-left: 1px solid #ccc;
  }
  .vr-navi ul li:nth-child(3) {
    width: 100%;
  }
  .vr-navi li a {
    display: block;
    font-family: 'Ryumin Regular KL',serif;
    font-size: 3.2vw;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    padding: .3em 2em;
    box-sizing: border-box;
    width: 100%;
    position: relative;
  }
  .vr-navi li a em {
    position: relative;
    padding-right: 1.3em;
  }
  .vr-navi li a em:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    border-top: .8em solid #333;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
    margin-top: -.4em;
  }
}

@media screen and (min-width: 768px) {
  .vr-navi {
    position: relative;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.57);
    margin-top: -3.8em;
  }
  .vr-navi ul {
    width: 100%;
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    overflow: hidden;
  }
  .vr-navi li a {
    display: block;
    font-family: 'Ryumin Regular KL',serif;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding: .8em 2em;
    box-sizing: border-box;
  }
  .vr-navi li a:hover {
    color: #03b260;
  }
}

@media screen and (min-width: 768px) and (max-width: 920px) {
  .vr-navi {
    margin-top: -3.4em;
  }
  .vr-navi li a {
    font-size: 1.7vw;
  }
}

/* font size */
.main-visual li a {
  font-size: 1.1667vw;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .main-visual li a {
    font-size: 1.1667vw;
  }
}

@media screen and (min-width: 1201px) {
  .main-visual li a {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .main-visual li a:hover {
    color: #03b260;
  }
}

/* all style
---------------------------------------------------------- */
.vr-wrap {
  width: 93.07%;
  margin: 9.87% auto;
}

@media screen and (max-width: 767px) {
  .vr-wrap {
    max-width: 698px;
  }
  .vr-use .vr-wrap {
    margin: 9.87% auto 0;
  }
  .vr-voice .vr-wrap {
    margin: 8% auto 0;
  }
  .property-list .vr-wrap {
    margin: 7.87% auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .vr-wrap {
    width: 95.17%;
    max-width: 1142px;
    margin: 3.33% auto;
  }
}

@media screen and (min-width: 1201px) {
  .vr-wrap {
    width: 1142px;
    margin: 40px auto;
  }
}

/* title
---------------------------------------------------------- */
.vr-title {
  font-size: 5vw;
  margin: 0 auto 2.01%;
  font-family: 'Ryumin Regular KL',serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .vr-title {
    border-bottom: 2px solid #00713c;
    line-height: 1.2;
    padding-bottom: .2em;
  }
  .property-list .vr-title {
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .vr-title br {
    display: none;
  }
  .vr-title span {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .vr-title {
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
  }
}

/* notes
---------------------------------------------------------- */
.vr-notes {
  text-align: center;
  padding: 2% 0 2% 0;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  .vr-notes {
    padding: 2% 0 2% 0;
    font-size: 11px;
  }
}

/* read text
---------------------------------------------------------- */
.vr-read {
  font-size: 3.4vw;
  line-height: 1.6;
  font-family: 'Ryumin Regular KL',serif;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .vr-read {
    font-size: 18px;
    text-align: center;
  }
  .vr-read span {
    display: inline-block;
  }
}

/* コンテンツ要素
---------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .vr-body {
    position: relative;
    margin: 2.98% auto;
    padding-top: 7.53%;
  }
  .vr-body:before {
    content: "";
    width: 230px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -115px;
    border-top: 3px solid #00713c;
  }
}

@media screen and (min-width: 1201px) {
  .vr-body {
    margin: 34px auto 55px;
    padding-top: 86px;
  }
  .vr-body:before {
    width: 230px;
    margin-left: -115px;
  }
}

/* information
---------------------------------------------------------- */
.vr-information {
  width: 93.07%;
  max-width: 698px;
  margin: 7.73% auto 11.73%;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .vr-information {
    width: 74.17%;
    max-width: 890px;
    margin: 3.08% auto;
  }
}

@media screen and (min-width: 1201px) {
  .vr-information {
    width: 890px;
    margin: 37px auto;
  }
}

/* info 見出し */
.vr-information h3 {
  width: 32.73%;
  max-width: 223px;
}

@media screen and (min-width: 768px) {
  .vr-information h3 {
    width: 151px;
  }
}

/*　info body */
.vr-information dl,
.vr-information dt,
.vr-information dd {
  box-sizing: border-box;
}

.vr-information ul {
  margin: 6% auto 0;
  line-height: 1.4;
  font-size: 3.3333vw;
  font-family: 'Ryumin Regular KL',serif;
  font-weight: bold;
  color: #666;
}

@media screen and (max-width: 767px) {
  .vr-information li + li {
    margin-top: 6.67%;
  }
  .vr-information a dd {
    text-decoration: underline;
  }
}

@media screen and (min-width: 768px) {
  .vr-information ul {
    margin: 2.81% auto;
    font-size: 15px;
  }
  .vr-information dt {
    width: 7em;
    float: left;
  }
  .vr-information dd {
    margin-left: 7em;
    margin-bottom: 1.2em;
  }
  .vr-information dd:after {
    content: '';
    display: block;
    clear: both;
  }
  .vr-information a:hover {
    text-decoration: underline;
  }
}

.vr-information a {
  text-decoration: none;
  display: block;
  color: #00713c;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .vr-information ul {
    margin: 2.81% auto;
  }
}

@media screen and (min-width: 1201px) {
  .vr-information ul {
    margin: 25px auto;
  }
}

/* 活用方法
---------------------------------------------------------- */
.vr-use {
  background-color: #f6f5ed;
  overflow: hidden;
  font-family: 'Ryumin Regular KL',serif;
  font-weight: bold;
}

.vr-use .vr-body {
  padding-left: 0;
}

.vr-use .vr-body li {
  position: relative;
}

@media screen and (max-width: 767px) {
  .vr-use .vr-body {
    margin: 10% auto 0;
  }
  .vr-use .vr-body li {
    padding-top: 48%;
    padding-bottom: 11%;
  }
  .vr-use .vr-body li p:last-child {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) {
  .vr-use .vr-body li {
    padding-left: 38.97%;
    /*445px*/
    min-height: 185px;
  }
  .vr-use .vr-body li + li {
    margin-top: 4.55%;
    /* 52px */
  }
  .vr-use .vr-body li p:last-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
  }
}

.vr-use .vr-body li:before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 25.79%;
  height: 0;
  padding-top: 12.03%;
  margin: -6.31% 0 0 70.77%;
}

@media screen and (min-width: 768px) {
  .vr-use .vr-body li:before {
    top: 0;
    left: 0;
    width: 10.42%;
    /*119px*/
    height: 0;
    padding-top: 4.99%;
    /*57px*/
    margin: -1.92% 0 0 27.06%;
    /*22px 0 0 309px*/
  }
}

.vr-use .vr-body li:nth-child(1):before {
  background: url(/mecsumai/img/sumai/vr/step01.png) no-repeat left top;
  background-size: 100% auto;
}

.vr-use .vr-body li:nth-child(2):before {
  background: url(/mecsumai/img/sumai/vr/step02.png) no-repeat left top;
  background-size: 100% auto;
}

.vr-use .vr-body li:nth-child(3):before {
  background: url(/mecsumai/img/sumai/vr/step03.png) no-repeat left top;
  background-size: 100% auto;
}

.vr-use h4 {
  font-size: 4.2vw;
  margin-bottom: .2em;
  font-weight: bold;
}

.vr-use h4 + p {
  font-size: 3.5vw;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .vr-use h4 {
    font-size: 22px;
    margin-bottom: .8em;
    line-height: 1;
  }
  .vr-use h4 + p {
    font-size: 15px;
  }
}

/* お客様の声
---------------------------------------------------------- */
.vr-voice ul {
  width: 92.93%;
  margin: 10% auto;
}

@media screen and (max-width: 767px) {
  .vr-voice ul {
    max-width: 697px;
  }
}

.vr-voice ul dl {
  display: flex;
  align-items: flex-end;
}

.vr-voice ul dt {
  width: 31%;
  max-width: 236px;
  margin-right: 5%;
  text-align: center;
  font-size: 3.4667vw;
  font-weight: bold;
  position: relative;
}

.vr-voice ul dt:before {
  content: "";
  width: 100%;
  height: 0;
  padding-top: 100%;
  background: url(/mecsumai/img/sumai/vr/person30f.png) no-repeat center bottom;
  background-size: contain;
  position: absolute;
  bottom: 1.5em;
  left: 0;
}

.vr-voice ul li:nth-child(1) dt:before {
  background: url(/mecsumai/img/sumai/vr/person30f_sp.png) no-repeat center bottom;
  background-size: contain;
}

.vr-voice ul li:nth-child(2) dt:before {
  background: url(/mecsumai/img/sumai/vr/person30m_sp.png) no-repeat center bottom;
  background-size: contain;
}

.vr-voice ul li:nth-child(3) dt:before {
  background: url(/mecsumai/img/sumai/vr/person40m_sp.png) no-repeat center bottom;
  background-size: contain;
}

.vr-voice ul li:nth-child(4) dt:before {
  background: url(/mecsumai/img/sumai/vr/person40f_sp.png) no-repeat center bottom;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .vr-voice ul li + li {
    margin-top: 6em;
  }
}

.vr-voice ul dd {
  position: relative;
  display: inline-block;
  width: 61.81%;
  max-width: 396px;
  font-size: 2.8vw;
  font-weight: bold;
  font-family: 'Ryumin Regular KL',serif;
  border: 1px solid #333;
  padding: .7em 1em;
  min-height: 12em;
  box-sizing: border-box;
  margin-left: -3%;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  .vr-voice ul dd:before {
    content: "";
    position: absolute;
    top: 32%;
    left: -1.9em;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em 2em .6em 0;
    border-color: transparent #fff transparent transparent;
    z-index: 2;
  }
  .vr-voice ul dd:after {
    content: "";
    position: absolute;
    top: 32%;
    left: -2em;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em 2em .6em 0;
    border-color: transparent #333 transparent transparent;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  .vr-voice ul {
    position: relative;
    margin: 33px auto 60px;
    padding-top: 62px;
    letter-spacing: -.5em;
    width: 90%;
  }
  .vr-voice ul:before {
    content: "";
    width: 230px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -115px;
    border-top: 3px solid #00713c;
  }
  .vr-voice ul li {
    letter-spacing: normal;
  }
  .vr-voice ul dt {
    font-size: 16px;
  }
  .vr-voice ul dd {
    font-size: 14px;
    min-height: 14em;
    padding: 1em 1.4em;
  }
  .vr-voice ul dd:before {
    content: "";
    position: absolute;
    bottom: 40%;
    left: -1.9em;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em 2em .6em 0;
    border-color: transparent #fff transparent transparent;
    z-index: 2;
  }
  .vr-voice ul dd:after {
    content: "";
    position: absolute;
    bottom: 40%;
    left: -2em;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em 2em .6em 0;
    border-color: transparent #333 transparent transparent;
    z-index: 1;
  }
  .vr-voice ul dt:before {
    bottom: 2em;
  }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
  .vr-voice ul li + li {
    margin-top: 50px;
  }
  .vr-voice ul dt:before {
    content: "";
    width: 60%;
    height: 0;
    padding-top: 100%;
    position: absolute;
    bottom: 1.5em;
    left: 50%;
    margin-left: -32%;
  }
  .vr-voice ul dd {
    min-height: 10em;
  }
}

@media screen and (min-width: 901px) {
  .vr-voice ul {
    width: 884px;
  }
  .vr-voice ul li {
    letter-spacing: normal;
    display: inline-block;
    width: 45%;
    vertical-align: top;
  }
  .vr-voice ul li:nth-child(2),
  .vr-voice ul li:nth-child(4) {
    margin-left: 3.5%;
  }
  .vr-voice ul li:nth-child(1),
  .vr-voice ul li:nth-child(2) {
    margin-bottom: 10%;
  }
}

/* ものづくりの工夫
---------------------------------------------------------- */
.vr-invention {
  background-color: #ececec;
  overflow: hidden;
}

.vr-body .vr-note {
  width: 100%;
  max-width: 698px;
  margin: 10% auto 0;
  font-size: 2.3vw;
}

.vr-invention-block {
  width: 100%;
  max-width: 698px;
  margin: 5% auto 17%;
  background: url(/mecsumai/img/sumai/vr/invention_img_sp.jpg) no-repeat 50% 50%;
  background-size: cover;
  text-align: center;
  box-sizing: border-box;
  padding: 20% 0 6%;
  box-shadow: -1px -1px 1em #999, 2px 2px 1em #999;
  position: relative;
}

@media screen and (min-width: 768px) {
  .vr-body .vr-note {
    width: 87.57%;
    max-width: 1000px;
    margin: 0 auto 1em;
    font-size: 14px;
  }
  .vr-invention-block {
    width: 87.57%;
    max-width: 1000px;
    margin: 0 auto 1%;
    /*	max-height: 480px;*/
    background: url(/mecsumai/img/sumai/vr/invention_img.jpg) no-repeat 50% 50%;
    background-size: cover;
    padding: 14% 0 7.8%;
  }
}

.vr-invention-block h4 {
  font-size: 5vw;
  color: #fff;
  text-shadow: 0 0 .4em #000, 0 0 .8em #000,0 0 .2em #000;
}

.vr-invention-block h4 + p {
  font-size: 2.2vw;
  color: #fff;
  text-shadow: -2px -2px .1em #000, 2px -2px .1em #000, 2px 2px .1em #000, -2px 2px .1em #000;
  margin-bottom: 10.2%;
}

@media screen and (min-width: 768px) {
  .vr-invention-block h4 {
    font-size: 34px;
  }
  .vr-invention-block h4 + p {
    font-size: 15px;
  }
}

.vr-invention-block p:last-child {
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
}

.vr-invention-block p:last-child a {
  display: block;
  color: #fff;
  padding: .5em 3em .5em 1em;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Ryumin Regular KL',serif;
}

.vr-invention-block p:last-child a:before {
  content: '';
  width: .8em;
  height: .8em;
  display: block;
  border-bottom: solid 2px;
  border-right: solid 2px;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -.4em;
}

@media screen and (max-width: 767px) {
  .vr-invention-block p:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 3.5vw;
    margin-bottom: -4em;
  }
}

@media screen and (min-width: 768px) {
  .vr-invention-block p:last-child a {
    font-size: 12px;
  }
  .vr-invention-block p:last-child a:hover {
    opacity: .6;
  }
}

/* how to use  */
.howtouse {
  width: 100%;
  max-width: 698px;
  margin: 5% auto 25%;
  background: url(/mecsumai/img/sumai/vr/icon_howtouse.png) left center no-repeat;
  background-size: 5%;
  font-size: 2.8vw;
  margin: 0 auto 2%;
  padding: 2% 0 2% 7%;
}

@media screen and (min-width: 768px) {
  .howtouse {
    width: 87.57%;
    max-width: 1000px;
    margin: 0 auto 2%;
    background: url(/mecsumai/img/sumai/vr/icon_howtouse.png) left center no-repeat;
    background-size: 3%;
    font-size: 14px;
    padding: 2% 0 2% 3.5%;
  }
}

/* eyes plus */
.eyes-plus {
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 57% 7.74% 7.74% 7.74%;
  position: relative;
}

.eyes-plus h5 {
  font-size: 2.6667vw;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1.2em;
}

.eyes-plus h5 span {
  display: inline-block;
}

.eyes-plus b {
  font-size: 5vw;
}

.eyes-plus h5 + p {
  font-size: 3.2vw;
  line-height: 1.47;
}

@media screen and (min-width: 768px) {
  .eyes-plus {
    width: 87.57%;
    max-width: 1000px;
    padding: 2.7% 2% 2.7% 2.9%;
    /* 27px 29px */
    display: flex;
    flex-direction: row-reverse;
  }
  .eyes-plus h5 {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 2.5em;
  }
  .eyes-plus b {
    font-size: 20px;
  }
  .eyes-plus h5 + p {
    font-size: 14px;
    line-height: 2;
  }
}

.vr-btn {
  width: 60%;
  text-align: center;
  margin: 6.88% auto 0;
}

@media screen and (max-width: 767px) {
  .vr-btn {
    max-width: 350px;
  }
}

.vr-btn a {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  color: #fff;
  background: linear-gradient(to right, #58a581, #73b281);
  position: relative;
  padding: .4em 1.5em .4em .5em;
  text-decoration: none;
  font-size: 2.6667vw;
  font-weight: bold;
  font-family: 'Ryumin Regular KL',serif;
}

.vr-btn a:before {
  content: '';
  width: .6em;
  height: .6em;
  display: block;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -.3em;
}

@media screen and (min-width: 768px) {
  .vr-btn {
    width: 100%;
    text-align: right;
  }
  .vr-btn a {
    font-size: 14px;
    width: 15em;
    display: inline-block;
    text-align: center;
    margin: 0 2% 0 0;
  }
  .vr-btn a:hover {
    opacity: .6;
  }
  .eyes-plus-wrap {
    margin-left: 2%;
    width: 53%;
  }
}

@media screen and (max-width: 767px) {
  .vr-mov {
    position: absolute;
    top: 0;
    left: 0;
    width: 85.39%;
    max-width: 596px;
    margin: 7.16% 0 0 7.45%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  .vr-mov {
    width: 45%;
    max-width: 428px;
  }
}

.vr-mov a {
  width: 100%;
  padding-top: 56%;
  display: block;
  position: relative;
  z-index: 5;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(/mecsumai/img/sumai/vr/gallery_sp.jpg) no-repeat center top;
  background-size: 100% auto;
}

@media screen and (min-width: 768px) {
  .vr-mov a {
    background: url(/mecsumai/img/sumai/vr/gallery.jpg) no-repeat center top;
    background-size: 100% auto;
  }
}

/* モデルルーム物件一覧
---------------------------------------------------------- */
.region {
  width: 100%;
  margin: 7.43% auto 8%;
  font-family: 'Ryumin Regular KL',serif;
  font-size: 3.2vw;
  font-weight: bold;
  letter-spacing: -.5em;
  padding: 0;
}

.region li {
  letter-spacing: normal;
}

@media screen and (max-width: 767px) {
  .property-list {
    margin-bottom: 15%;
  }
  .region > li {
    letter-spacing: normal;
    display: inline-block;
    width: 23.14%;
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
    margin-left: 2.43%;
  }
  .region > li:nth-child(1) {
    margin-left: 0;
    margin-bottom: 2.43%;
  }
  .region > li:nth-child(2),
  .region > li:nth-child(3),
  .region > li:nth-child(4) {
    margin-bottom: 2.43%;
  }
  .region > li:nth-child(5) {
    margin-left: 0;
  }
}

.region li a {
  display: block;
  border: 1px solid #ccc;
  color: #666;
  padding: .1em;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .region li a:hover {
    border: 1px solid #4c9b76;
    color: #fff;
    background-color: #4c9b76;
  }
}

.region-wrap h4 {
  font-family: 'Ryumin Regular KL',serif;
  font-size: 2.9333vw;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: .5em;
  line-height: 1;
  margin-bottom: 2.98%;
}

.region-wrap ul {
  width: 100%;
  margin: 7.14% auto;
}

@media screen and (min-width: 768px) {
  .region-wrap ul {
    margin: 40px auto;
  }
}

.region-wrap ul li {
  padding-left: 39%;
  position: relative;
}

@media screen and (max-width: 767px) {
  .region-wrap ul li {
    margin-bottom: 10%;
  }
}

.region-wrap ul li:before {
  content: "";
  width: 36.6%;
  height: 0;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 首都圏 */
.region-wrap ul.capital-area li:nth-child(1):before {
  background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img87_sp.jpg) no-repeat left top;
  background-size: contain;
}

.region-wrap ul.capital-area li:nth-child(2):before {
  background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img82_sp.jpg) no-repeat left top;
  background-size: contain;
}

.region-wrap ul.capital-area li:nth-child(3):before {
  background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img84_sp.jpg) no-repeat left top;
  background-size: contain;
}

.region-wrap ul.capital-area li:nth-child(4):before {
  background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img79_sp.jpg) no-repeat left top;
  background-size: contain;
}

.region-wrap ul.capital-area li:nth-child(5):before {
  background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img74_sp.jpg) no-repeat left top;
  background-size: contain;
}

/* 札幌 */
/* 仙台 */
/* 東海 */
/* 関西 */
/* 広島 */
.region-wrap ul.hiroshima li:nth-child(1):before {
  background: url(/mecsumai/img/sumai/vr/property/hiroshima/property_list_img56_sp.jpg) no-repeat left top;
  background-size: contain;
}

/* 九州（福岡） */
.region-wrap ul.fukuoka li:nth-child(1):before {
  background: url(/mecsumai/img/sumai/vr/property/fukuoka/property_list_img85_sp.jpg) no-repeat left top;
  background-size: contain;
}

.region-wrap ul.fukuoka li:nth-child(2):before {
  background: url(/mecsumai/img/sumai/vr/property/fukuoka/property_list_img86_sp.jpg) no-repeat left top;
  background-size: contain;
}

@media screen and (min-width: 768px) {
  .region-wrap ul li:before {
    width: 45.6%;
    padding-top: 100%;
  }
  /* 首都圏 */
  .region-wrap ul.capital-area li:nth-child(1):before {
    background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img87.jpg) no-repeat left top;
    background-size: contain;
  }
  .region-wrap ul.capital-area li:nth-child(2):before {
    background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img82.jpg) no-repeat left top;
    background-size: contain;
  }
  .region-wrap ul.capital-area li:nth-child(3):before {
    background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img84.jpg) no-repeat left top;
    background-size: contain;
  }
  .region-wrap ul.capital-area li:nth-child(4):before {
    background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img79.jpg) no-repeat left top;
    background-size: contain;
  }
  .region-wrap ul.capital-area li:nth-child(5):before {
    background: url(/mecsumai/img/sumai/vr/property/capital-area/property_list_img74.jpg) no-repeat left top;
    background-size: contain;
  }
  /* 東海 */
  /* 札幌 */
  /* 仙台 */
  /* 関西 */
  /* 広島 */
  .region-wrap ul.hiroshima li:nth-child(1):before {
    background: url(/mecsumai/img/sumai/vr/property/hiroshima/property_list_img56.jpg) no-repeat left top;
    background-size: contain;
  }
  /* 九州（福岡） */
  .region-wrap ul.fukuoka li:nth-child(1):before {
    background: url(/mecsumai/img/sumai/vr/property/fukuoka/property_list_img85.jpg) no-repeat left top;
    background-size: contain;
  }
  .region-wrap ul.fukuoka li:nth-child(2):before {
    background: url(/mecsumai/img/sumai/vr/property/fukuoka/property_list_img86.jpg) no-repeat left top;
    background-size: contain;
  }
}

.region-wrap h5 {
  font-size: 2.9333vw;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1.5em;
}

.region-wrap h5 + p {
  font-size: 2.9333vw;
  font-family: 'Ryumin Regular KL',serif;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .region-wrap h5 {
    font-size: 16px;
    margin-bottom: 30px;
  }
  .region-wrap h5 + p {
    font-size: 14px;
  }
}

.vr-model {
  display: block;
  width: 100%;
  color: #fff;
  background: linear-gradient(to right, #58a581, #73b281);
  position: relative;
  padding: .4em 1.5em .4em .5em;
  text-decoration: none;
  font-size: 2.9333vw;
  margin: 5% auto;
  text-align: center;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .vr-model {
    font-size: 20px;
    margin: 21px auto 12px;
    padding: 10px;
  }
}

.vr-model + ul {
  border: 1px solid #ccc;
  width: 100%;
  margin: 0 auto;
  font-size: 2.9333vw;
  letter-spacing: -.5em;
  padding: .2em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .vr-model + ul {
    font-size: 14px;
  }
}

.vr-model + ul > li {
  letter-spacing: normal;
  display: inline-block;
  width: 33%;
  list-style: none;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  line-height: 1;
  padding-left: 0;
  margin-bottom: 0;
}

.vr-model + ul > li:before {
  background: none;
  padding-top: 0;
}

.vr-model + ul > li + li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  margin-top: -.5em;
  border-left: 2px solid #666;
}

.vr-model + ul > li a {
  display: block;
  text-decoration: none;
  color: #666;
}

.vr-model a {
  color: #fff;
  text-decoration: none;
}

.vr-model a:hover {
  opacity: .6;
}

@media screen and (min-width: 768px) {
  .region {
    width: 40%;
    /* max-width: 500px; */
    /* max-width: 600px; */
    max-width: 890px;
    margin: 0 auto 54px;
    display: flex;
    justify-content: space-between;
    font-family: 'Ryumin Regular KL',serif;
    font-size: 16px;
    font-weight: bold;
  }
  .region li {
    width: 6em;
    text-align: center;
  }
  .region li li {
    margin-left: 1em;
  }
  .region-wrap h4 {
    font-family: 'Ryumin Regular KL',serif;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: .7em;
    line-height: 1;
    margin-bottom: 34px;
  }
  .region-wrap ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  /*no_data画像設定*/
  .region-wrap ul.capital-area,
  .region-wrap ul.sapporo,
  .region-wrap ul.sendai,
  .region-wrap ul.tokai,
  .region-wrap ul.kansai,
  .region-wrap ul.hiroshima {
    background: url(/mecsumai/img/sumai/vr/no_data.png) no-repeat 88% bottom;
    background-size: 26% auto;
  }
  .region-wrap ul > li {
    width: 47.5%;
    list-style: none;
    box-sizing: border-box;
    padding-left: 20%;
  }
  .region-wrap ul > li {
    margin-bottom: 5%;
  }
  .region-wrap ul > li:last-child {
    margin-bottom: 0;
  }
  .region-wrap ul > li li {
    margin-bottom: 0;
  }
  .region-wrap ul > li:nth-child(even) {
    margin-left: 5%;
  }
  .region-wrap ul ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
  }
  .region-wrap ul ul a:hover {
    color: #00713c;
  }
}

@media screen and (min-width: 768px) {
  .region-wrap ul ul {
    padding: 12px 0;
  }
  .region-wrap ul > li {
    width: 47.5%;
    padding-left: 23.5%;
  }
}

.region-wrap ul ul > li {
  width: 33.33%;
  list-style: none;
  box-sizing: border-box;
  padding-left: 0;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .region-wrap ul ul > li {
    margin-bottom: 0;
  }
}

.region-wrap ul ul > li:nth-child(even) {
  margin-left: 0;
}

.region-wrap h5 {
  font-size: 15px;
}

@media screen and (min-width: 860px) {
  .region {
    width: 320px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .region-wrap ul ul {
    display: block;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    padding: 0;
  }
  .region-wrap ul ul > li {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .region-wrap ul ul > li + li {
    border-top: 1px solid #ccc;
  }
  .region-wrap ul ul li a {
    display: block;
    padding: 1em;
  }
  .vr-model + ul > li + li:before {
    content: "";
    display: none;
  }
}