/* コンセプト */
.plan-box{}
.plan-box h2{font-size: 18px;color:#187fc4;font-weight: normal;text-align: left; letter-spacing: 0.1em;
writing-mode: vertical-rl;
  text-orientation: upright;

}
.plan-box ul,
.plan-box li{margin: 0;padding: 0;list-style: none}
.plan-box .note-box{text-align: left;width: 100%;margin: 30px 0 0 0;font-size: 13px}
.plan-box img{width: 100%;height: auto;}
.pc{display: block}
.sp{display: none}
@media screen and (max-width: 668px) {/*スマホ設定*/
.plan-box{padding-top: 20px}
.plan-box h2{text-align: center;font-size: 15px;padding: 0px 0;text-align: center;
writing-mode: horizontal-tb;
  text-orientation: upright;
  text-combine-upright: all;
}
.sp{display: block}
.pc{display: none}
}

.p-roomplan__indexTab {
  margin: 50px 0 30px;
}
.p-roomplan__indexTab ul {
  border-bottom: 5px solid #187fc4;
  display: flex;
  flex-wrap: wrap;
}
.p-roomplan__indexTab ul li {
  width: 50%!important;
  display: flex;
  align-items: flex-end;
}
.p-roomplan__indexTab ul li a {
  display: flex;
  width: 100%;
  padding: 10px 0;
  background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 10%,#cccccc 10%,#cccccc 100%);
  color: #333;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 100%;
}
.p-roomplan__indexTab ul li a:hover {
  text-decoration: none;
}
.p-roomplan__indexTab ul li.active a {
  background: #187fc4;
  color: #fff;
}


@media (min-width: 809px) {

  .p-roomplan__indexTab ul li a {
    font-size: 170%;
  }
}
@media screen and (max-width: 668px) {/*スマホ設定*/
.p-roomplan__indexTab {
  margin: 20px 0 16px;
}
}

.p-roomplan__indexNav {
  margin-bottom: clamp( 40px, 12.6941747573px + 7.2815533981vw,100px);
}
.p-roomplan__indexNav2 {
  margin-top: clamp( 40px, 12.6941747573px + 7.2815533981vw,100px);
  
}

.p-roomplan__indexNav ul,
.p-roomplan__indexNav2 ul {
  gap: clamp( 15px, 10.9041262136px + 1.0922330097vw,24px);
  display: flex;
  flex-wrap: wrap;
}
.p-roomplan__indexNav ul li,
.p-roomplan__indexNav2 ul li{
  width: calc((100% - clamp( 15px, 10.9041262136px + 1.0922330097vw,24px)) / 2);
}
.p-roomplan__indexNav ul li.model,
.p-roomplan__indexNav2 ul li.model{
  padding-top: 0px
}
.p-roomplan__indexNav ul li p,
.p-roomplan__indexNav2 ul li p{background: #187fc4;color: #fff;height: 30px;line-height: 30px;}

.p-roomplan__indexNav ul li.close a{pointer-events: none;opacity: 0.6}

@media (min-width: 809px) {
  .p-roomplan__indexNav ul li,
    .p-roomplan__indexNav2 ul li{
    width: calc((100% - clamp( 15px, 10.9041262136px + 1.0922330097vw,24px) * 2) / 3);
  }
}
@media (min-width: 999px) {
  .p-roomplan__indexNav ul li,
  .p-roomplan__indexNav2 ul li{
    width: calc((100% - clamp( 15px, 10.9041262136px + 1.0922330097vw,24px) * 3) / 4);
  }
}
.p-roomplan__indexNav ul li a,
p-roomplan__indexNav2 ul li a{
  transition: opacity 0.2s;
  position: relative;
  display: block;
}

.p-roomplan__indexNav .txt,
.p-roomplan__indexNav2 .txt{margin-bottom: 20px;font-size: 20px;letter-spacing: 0.1em;}

.p-roomplan__indexNav ul li a.u-noLink,
.p-roomplan__indexNav2 ul li a.u-noLink{
 opacity: 0.5;pointer-events: none;
}
.p-roomplan__indexNav ul li a.u-noLink.u-gray,
.p-roomplan__indexNav2 ul li a.u-noLink.u-gray{
  pointer-events: none;opacity: 0.5
}

@media (hover: hover) {
  .p-roomplan__indexNav ul li a:hover,
  .p-roomplan__indexNav2 ul li a:hover{
    opacity: 0.6;
  }
}

.p-roomplan__indexNav figure {
  margin-bottom: clamp( 40px, 33.1735436893px + 1.8203883495vw,55px);
}
.p-roomplan__indexNav figure figcaption {
  font-size: 130%;
  margin-bottom: 1em;
}
@media (min-width: 809px) {
  .p-roomplan__indexNav figure figcaption {
    font-size: 180%;
  }
}
@media (min-width: 999px) {
  .p-roomplan__indexNav figure figcaption {
    font-size: 1.125rem;
    margin-bottom: 1.5em;
  }
}
.roomplan_detail{margin-bottom:40px}
.roomplan__name{width: 36%}
.roomplan__plan{width: 50%}
.roomplan__plan .zu{width: 90%}
.roomplan__plan h2{width: 10%;}
.floor{width: 85%;margin: 40px auto 0}
.roomplan__mark{width: 50%;margin-top: 30px;margin-left: auto}
@media screen and (max-width: 668px) {/*スマホ設定*/
.roomplan_detail{width: 90%;margin: 0 auto 0px; }
.roomplan__name{width: 100%}
.roomplan__plan{margin-top: 20px; width: 100%}

.roomplan__plan .zu{width: 100%;-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
.roomplan__plan h2{padding: 12px 0 20px; width: 100%;-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}

}

.p-roomplan__dl {
  margin-top: clamp( 30px, 25.4490291262px + 1.213592233vw,40px);
  max-width: 380px;
  width: 100%;
  margin-inline: auto;
  display: none;
  margin-bottom: 30px
}
@media screen and (max-width: 668px) {/*スマホ設定*/
.p-roomplan__dl {
  margin-bottom: 0px
}
}

@media (min-width: 999px) {
  .p-roomplan__dl {
    display: block;
  }
}
.p-roomplan__dl.-sp {
  display: block;
}
@media (min-width: 999px) {
  .p-roomplan__dl.-sp {
    display: none;
  }
}
.p-roomplan__dl a {
  color: #fff;
  background-color: #5b5b5b;
  position: relative;
  padding: 20px 30px;
  display: block;
  font-size: clamp( 1.0625rem, 0.9771692961rem + 0.3640776699vw,1.25rem);
  transition: 0.5s opacity;
  border-radius: 6px
}
@media (any-hover: hover) {
  .p-roomplan__dl a:hover {
    text-decoration: none;
    opacity: 0.6;
  }
}
.p-roomplan__dl a span:last-child {
  width: 37px;
  text-align: center;
  position: absolute;
  right: clamp( 20px, 15.4490291262px + 1.213592233vw,30px);
  top: 50%;
  translate: 0 -50%;
}
.p-roomplan__dl a span:last-child img{width: 100%}

.p-roomplan__sim{
  max-width: 380px;
  width: 100%;
  margin: 0 auto 30px;
}
.p-roomplan__sim a:hover img{opacity: 0.7}
@media screen and (max-width: 668px) {/*スマホ設定*/
.p-roomplan__sim{
  max-width: 86%;
  width: 86%;
  margin: 30px auto;
}
}

.original-box{margin-bottom: 40px}
.original-box p{width: 48%;}
@media screen and (max-width: 668px) {/*スマホ設定*/
.original-box p{width: 100%;margin-top: 20px}
}

.mg-box{margin-top: 120px;position: relative;background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 95px,#ebf1f4 95px,#ebf1f4 99%);
padding: 0px 60px 60px;}
.mg-box h3{width: 585px;position: relative;margin-left: -70px;}
.mg-box .illa{width: 504px;position: absolute;right: 20px;top: -45px;z-index: 1;}
.mg-box .com{position: relative;}
.mg-box h4{margin: 40px 0; font-weight: bold;text-align: center;font-size: 1.5rem;line-height: 1.9;letter-spacing: 0.1em}
.mg-box .info-in{text-align: center}
.mg-box .info-btn1{width:400px;margin: auto }
@media screen and (max-width: 767px) {/*スマホ設定*/
.mg-box{margin-top: 80px;background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50px,#ebf1f4 50px,#ebf1f4 99%);
padding: 0px 20px 20px;}
.mg-box h3{width: 100%;margin: 0px;margin-left: -25px}
.mg-box img{width: 100%; height: auto}
.mg-box .illa{width: 80%;margin: auto;position: static}
.mg-box h4{font-size: 0.8rem;}
.mg-box .info-btn1{width:80%;margin: auto }
}

.p-roomplan__indexNav ul li,
.p-roomplan__indexNav2 li{position: relative}
.p-roomplan__indexNav ul li .ato,
.p-roomplan__indexNav2 li .ato{
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  max-width: 79px;
}
.roomplan_detail p.ato{width: 78%;margin: auto;text-align: right}
.roomplan_detail p.ato img{width: 25%;max-width: 79px;}

picture{display: block;position: relative}
picture figcaption{position: absolute;right: 10px;bottom: 10px;text-align: right;color: #fff;font-size: 10px;}
picture figcaption.black{color: #000}
@media screen and (max-width:767px){/*スマホ設定*/
picture figcaption{right: 5px;bottom: 5px;}
}