@charset "UTF-8";

.txt_shadow {
text-shadow: 1px 1px 5px #000 ,
-1px 1px 5px #000 ,
1px -1px 10px #222 ,
-1px -1px 10px #222;
}


@media screen and (max-width: 767px) {
.concept_room1_bg {
background: url("/content/dam/31sumai/mfr/X1817/asset/images/conceptroom/bg.png");
background-position: top center;
background-repeat: repeat;
padding: 50px 0;
}
.name_tag1,.name_tag2 {
width: 100px;
height: 100px;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 10;
}
.name_tag1 {
background-color: #8e7e76;
top: -50px;
right: 20px;
}
.name_tag2 {
background-color: #dbd9cc;
top: -50px;
left: 20px;
}
.name_tag1 div,.name_tag2 div {
font-size: 17px;
text-align: center;
font-family: "Montserrat", system-ui;
font-weight: 200;
}
.name_tag1 div {
color: #fff;
}
.name_tag2 div {
color: #000;
}
.room_box {
position: relative;
}

ul.room1,ul.room2 {
margin-top: 100px;
position: relative;
}
ul.room2 {
padding-bottom: 50px;
}
ul.room1 li,ul.room2 li {
position: relative;
transition: all 1s ease-out;
z-index: 3;
}
ul.room1 li:nth-child(1) {
  width: 92vw;
  margin: 0 auto 7vw 0;
}
ul.room1 li:nth-child(2) {
 width: 60vw;
  height: 25vw;
  position: absolute;
  margin: 0;
  top: 42vw;
  left: 10px;
  z-index: 2;
}
ul.room1 li:nth-child(3) {
  width: 92vw;
  margin: 0 0 7vw auto;
}
ul.room1 li:nth-child(4) {
  width: 92vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(1) {
  width: 90vw;
  margin: 0 0 7vw auto;
}
ul.room2 li:nth-child(2) {
  width: 90vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(3) {
  width: 90vw;
  height: 15vw;
  position: absolute;
  margin: 0;
  top: 90vw;
  left: 0;
  z-index: 2;
}
ul.room2 li:nth-child(4) {
  width: 90vw;
  margin: 0 0 7vw auto;
}
ul.room2 li:nth-child(5) {
  width: 80vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(6) {
 width: 50vw;
  height: 150vw;
  position: absolute;
  margin: 0;
  top: 160vw;
  left: 0;
  z-index: 2;
}
ul.room2 li:nth-child(7) {
  width: 80vw;
  margin: 0 0 7vw auto;
}


}


@media screen and (min-width: 768px) {


.concept_room1_bg {
background: url("/content/dam/31sumai/mfr/X1817/asset/images/conceptroom/bg.png");
background-position: top center;
background-repeat: repeat;
padding: 50px 0;
margin-bottom: 100px;
}
.name_tag1,.name_tag2 {
width: 180px;
height: 180px;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 10;
}
.name_tag1 {
background-color: #8e7e76;
top: -100px;
right: 50px;
}
.name_tag2 {
background-color: #dbd9cc;
top: -100px;
left: 150px;
}
.name_tag1 div,.name_tag2 div {
font-size: 24px;
text-align: center;
font-family: "Montserrat", system-ui;
font-weight: 200;
}
.name_tag1 div {
color: #fff;
}
.name_tag2 div {
color: #000;
}
.room_box {
position: relative;
}

ul.room1,ul.room2 {
margin-top: 200px;
position: relative;
}
ul.room2 {
padding-bottom: 200px;
}
ul.room1 li,ul.room2 li {
position: relative;
transition: all 1s ease-out;
z-index: 3;
}
ul.room1 li:nth-child(1) {
  width: 90vw;
  margin: 0 auto 7vw 0;
}
ul.room1 li:nth-child(2) {
 width: 60vw;
  height: 25vw;
  position: absolute;
  margin: 0;
  top: 42vw;
  left: 0;
  z-index: 2;
}
ul.room1 li:nth-child(3) {
  width: 85vw;
  margin: 0 0 7vw auto;
}
ul.room1 li:nth-child(4) {
  width: 85vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(1) {
  width: 83vw;
  margin: 0 0 7vw auto;
}
ul.room2 li:nth-child(2) {
  width: 66vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(3) {
 width: 80vw;
  height: 15vw;
  position: absolute;
  margin: 0;
  top: 90vw;
  left: 0;
  z-index: 2;
}
ul.room2 li:nth-child(4) {
  width: 66vw;
  margin: 0 0 7vw auto;
}
ul.room2 li:nth-child(5) {
  width: 46vw;
  margin: 0 auto 7vw 0;
}
ul.room2 li:nth-child(6) {
 width: 80vw;
  height: 25vw;
  position: absolute;
  margin: 0;
  top: 160vw;
  left: 0;
  z-index: 2;
}
ul.room2 li:nth-child(7) {
  width: 46vw;
  margin: 0 0 7vw auto;
  position: absolute;
  top: 165vw;
  right: 0;
  z-index: 4;
}




}

/*--共通--*/
ul.room1 li div.bgblu {
  width: 100%;
  height: 100%;
  background: rgb(203,214,216);
}
ul.room2 li div.bgbeg {
  width: 100%;
  height: 100%;
  background: rgb(219,217,204);
}

.room1,.room2 {
overflow: hidden;
}

.room1 .add_pos.slide_l,.room2 .add_pos.slide_l{
	transform: translateX(-50px);
	}
.room1	.pos_on.slide_l,.room2	.pos_on.slide_l{
	transform: translateX(0px);
	}
.room1 .add_pos.slide_r,.room2 .add_pos.slide_r{
	transform: translateX(50px);
	}
.room1	.pos_on.slide_r,.room2	.pos_on.slide_r{
	transform: translateX(0px);
	}