@charset "UTF-8";
/*
* Last Update 2021-06-06
*
* modelroomROOM page
*
*/

/*
* Media query Setting
*SMP > below 559px
*TB > below 560px - 959px
*PC > over 960px;
*/

#titleWrap {
background: url(../../img/modelroom/kv.jpg) no-repeat 0 50%;
background-size: cover;
}
#titleWrap::after {content:'MASTER BEDROOM';}

#modelroomWrap {
margin: 0 auto;
max-width: 1200px;
width: 94%;
}
#modelroomWrap h2 {
color:#e9377a;
font-family: 'Cormorant Garamond', serif;
font-size: 3.6rem;
text-align: center;
}
#modelroomWrap h3 {
font-size:1.95rem;
margin:0 0 2em;
text-align: center;
}

.sliderWrap {
max-width: 900px;
width: 100%;
margin: 0 auto 90px;
}

.sliderWrap .slideCap01,
.sliderWrap .slideCap02 {
position: absolute;
bottom: 0;
right: 0;
/* font-family: 'Cormorant Garamond', serif; */
font-size: 1.8rem;
line-height: 1.2;
text-align: right;
padding: .3em .5em;
}

.sliderWrap .slideCap01 span,
.sliderWrap .slideCap02 span{
  font-size: 1.8rem;
}

.sliderWrap .slideCap01 {
color: #fff;
text-shadow: 1px 1px 1px #000;
}

.sliderWrap .slideCap02 {
color: #000;
}


/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
#modelroomWrap h2 {font-size: 4.8rem;}
#modelroomWrap h3 {font-size:2.6rem;}
}

/*===== for   OVER - 800px =====*/
@media screen and (min-width:800px){
#modelroomWrap h2 {font-size: 5.6rem;}
#modelroomWrap h3 {font-size:3.2rem;}
.sliderWrap .slideCap01, .sliderWrap .slideCap02 {font-size:2.4rem;}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){

}

/*===== for   BELOW - 1130px =====*/
@media screen and (max-width:1130px){

}

/* 220801 */
.tabPanel{

}
.tabGroup{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabGroup .tab{
  width: 25%;
  padding: 0.4em 3em;
  text-align: center;
  font-size: 20px;
  border-width: 1px;
  border-style: solid;
  transition: all 0.2s ease-out;
  cursor: pointer;
}
.tabGroup .tab + .tab{
  margin-left: 50px;
}
.tabGroup .tab.is-active {
  background: #000;
  color: #FFF;
  pointer-events: none;
}
.tabGroup .tab:hover{
  background: rgb(126, 126, 126);
  color: #fff;
  border-color: rgb(126, 126, 126);
}
.panelGroup{
  margin-top: 50px;
}
.panelGroup .panel{
  display: none;
}
.panelGroup .panel.is-show {
  display: block;
}
.panelGroup .tabA .flex-control-thumbs li{
  width: calc((100% - 49px) / 9);
}
.panelGroup .tabB .flex-control-thumbs li{
  width: calc((100% - 37px) / 7);
}
@media screen and (max-width: 860px){
  .tabGroup{
    flex-direction: column;
  }
  .tabGroup .tab{
    width: 80%;
    font-size: 16px;
  }
  .tabGroup .tab + .tab{
    margin-top: 1em;
    margin-left: 0;
  }
  .panelGroup .tabA .flex-control-thumbs li,
  .panelGroup .tabB .flex-control-thumbs li{
    width: calc((100% - 24px) / 5);
    margin-bottom: 6px;
  }
  .panelGroup .tabA .flex-control-thumbs li:nth-child(4),
  .panelGroup .tabB .flex-control-thumbs li:nth-child(4){
    margin: 0 3px 6px;
  }
  .panelGroup .tabA .flex-control-thumbs li:nth-child(5),
  .panelGroup .tabB .flex-control-thumbs li:nth-child(5){
    margin: 0 0 6px 3px;
  }
  .panelGroup .tabA .flex-control-thumbs li:nth-child(6),
  .panelGroup .tabB .flex-control-thumbs li:nth-child(6){
    margin: 0 3px 6px 0;
  }
}