@charset "UTF-8";

/*** ここからトップの記述 ***/
#modelroom_point{ position: absolute; margin-top: -50px;}
#modelroom{ width: 100%;  height: calc(100vh - 24px); position: relative; min-height: 760px;}
.modelroom_left{ position: absolute; width: 460px;  height: calc(100vh - 24px); min-height: 760px;
  background-image: url("../img/index/gaiyou_bg.png"); background-size: cover; background-position: center center;}
.modelroom_left section{ position: absolute; width: 360px; padding: 50px; height: 160px; top: calc(50% - 105px); color: #FFF;}
.modelroom_left section h2{ position: relative; font-size: 32px; text-align: center; letter-spacing: 2.2px; font-weight: lighter;}
.modelroom_left section p{ position: relative; font-size:32px;
  margin-top: 20px; line-height: 36px; letter-spacing: 1px; padding: 10px 0;
 background-image: url("../img/modelroom/award.png"); background-size: contain; background-position: center center; background-repeat: no-repeat; text-align: center;}

.modelroom_right{ position: absolute; right: 0; width: calc(100% - 460px); height: calc(100vh - 24px); min-height: 760px;
  background-image: url("../img/modelroom/linen_bg.jpg"); background-size: cover; background-position: center left; background-attachment: fixed;}
.modelroom_right img{ display: block; position: absolute; width: 100%; max-width: 724px; padding: 0 12px; box-sizing: border-box; margin: auto; top: calc(50% - 310px); left: 0; right: 0;}
.modelroom_right h3{ position: absolute; display: block; left: 0px; top: calc(50% - 50px); bottom: 0; height: 120px; text-align: left; font-size: 16px; padding:10px 20px; line-height: 40px; color: #000; background-color: rgba(255,255,255,0.90); font-weight: lighter;}
.image{ position: absolute; display: block; right: 4px; bottom: 4px; text-align: left; font-size: 10px; color: #FFF;}



/*** ここからレスポンシブの記述 ***/

@media screen and (max-width: 800px) {
#modelroom{ min-height:100px;  height: auto;}
.modelroom_left{ position: relative; left: 0; width: 100%; height: calc(38vw + 105px); min-height: 100px; z-index: 50;}
.modelroom_left section{ position: absolute; width: 100%; padding: 0px; height: 280px; top: 0; color: #FFF;}
.modelroom_left section h2{ font-size: 8vw; text-align: center; padding-top: 70px; line-height: 16vw;}
.modelroom_left section p{ font-size: 6vw;line-height: 9vw; margin: 0 30px;}
  
.modelroom_right{ position: relative; left: 0px; top: 0px; width: 100%; height: auto; min-height: 100px; background-position: center center; padding: 2% 0;}

.modelroom_right img{ position: relative;}
  
footer{ padding: 8px 0;}
footer p:nth-child(2){ position: relative; width: 100%; text-align: center; bottom: 0; right: auto; left: auto; margin: auto;}


.image{ position: absolute; display: block; right: 4px; bottom: 4px; text-align: right; font-size: 10px; color: #FFF;}

#konyu_point{ position: absolute; margin-top: -50px;}


}