@charset "utf-8";
#bleuroom{
  box-sizing: border-box;
  width: 100%;
  font-family: "A-OTF UD Shin Maru Go Pro", sans-serif, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 10px;
  color: #84878a;
  overflow: hidden;
}
#bleuroom img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#bleuroom p, h3{
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}
#bleuroom span {
  line-height: 1.5;
}
#bleuroom i{
  font-style: inherit;;
}
#bleuroom small, sub, sup{
  font-size: .8em;
}
#bleuroom a{
  text-decoration: none;
  transition: .6s;
}
#bleuroom .flex_rvs{
  flex-direction: row-reverse;
}
#bleuroom .forpc{
  display: none;
}
#bleuroom .forsp{
  display: block;
}
/* contents */
#bleuroom .container {
  background: url("/img/interior/bleuroom/bg.jpg") repeat-y 50%/100%;
  background-position-y: -21%;
  font-family: "A-OTF Ryumin Pro", serif;
  color: #84878a;
  line-height: 1.7;
}
#bleuroom .txt_main {
  font-size: 3.8vw;
}
#bleuroom .kanban {
  position: relative;
}
#bleuroom .kanban_txt {
   background: url("/img/interior/bleuroom/kanban_bg.png") no-repeat 50% 50%/100%;
}
#bleuroom .kanban_txt p {
  position: relative;
  margin: 6% auto 13%;
  padding: 6%;
  text-align: center;
  font-size: 3.5vw;
  color: #838b93;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,

    -3px -3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff, 3px 3px 2px #fff,
    -3px 0 2px #fff, 3px 0 2px #fff, 0 -3px 2px #fff, 0 3px 2px #fff,

    -4px -4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff, 4px 4px 4px #fff,
    -4px 0 4px #fff, 4px 0 4px #fff, 0 -4px 4px #fff, 0 4px 4px #fff;
  line-height: 2.0;
}
#bleuroom .kanban_txt p span {
  margin-bottom: 6%;
  display: block;
  color: #5894d5;
  font-weight: 500;
}
#bleuroom .kanban_txt p::before,
#bleuroom .kanban_txt p::after {
  content: "";
  position: absolute;
  background: url("/img/interior/bleuroom/kanban_frame.png") no-repeat;
  aspect-ratio: 698/104;
  background-size: contain;
  width: 88%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#bleuroom .kanban_txt p::after {
  top: unset;
  bottom: 0;
  transform: translateX(-50%) scale(-1);
}

/* chest */
#bleuroom h2 {
  width: 97%;
  margin: 0 auto 4%;
  text-align: center;
}
#bleuroom .txt {
  font-size: 4vw;
  line-height: 2.0;
}
#bleuroom .pd_intro {
  display: grid;
  padding: 7% 0;
  gap: 3%;
  margin-bottom: 5%;
}
#bleuroom #chest .pd_intro {
  padding-top: 20%;
}
#bleuroom .pd_intro li {
  position: relative;
  width: 94%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#bleuroom #chest .pd_intro .video:before,
#bleuroom #chest .pd_intro .video+li:before,
#bleuroom #chest .pd_intro .video+li::after,
#bleuroom #curtain .pd_intro .video+li:before,
#bleuroom #curtain .pd_intro .video+li::after,
#bleuroom #curtain .pd_intro .video:before,
#bleuroom #curtain2 .pd_intro li:first-child:before,
#bleuroom #curtain2 .pd_intro .video:before,
#bleuroom #curtain2 .pd_intro .video::after,
#bleuroom #curtain2 .pd_introBed li:first-child::before,
#bleuroom #curtain2 .pd_introBed .flex_rvs::before,
#bleuroom #curtain2 .pd_introBed .flex_rvs::after
 {
  content: "";
  position: absolute;
}
#bleuroom #chest .pd_intro .video:before {
  background: url("/img/interior/bleuroom/shoes.png") no-repeat;
  aspect-ratio: 355/264;
  width: 47%;
  top: -15%;
  right: 0;
  background-size: contain;
}
#bleuroom #chest .pd_intro .video+li:before {
  background: url("/img/interior/bleuroom/rose.png") no-repeat;
  aspect-ratio: 202/129;
  width: 27%;
  top: -10%;
  left: 2%;
  background-size: contain;
}
#bleuroom #chest .pd_intro .video+li::after {
  background: url("/img/interior/bleuroom/kira.png") no-repeat;
  aspect-ratio: 108/128;
  width: 20%;
  bottom: -13%;
  left: 17%;
  background-size: contain;
}
#bleuroom #curtain .pd_intro .video:before {
  background: url("/img/interior/bleuroom/kira.png") no-repeat;
  aspect-ratio: 108/128;
  width: 18%;
  top: -6%;
  left: 48%;
  transform: scaleY(-1);
  background-size: contain;
}
#bleuroom #curtain .pd_intro .video+li:before {
  background: url("/img/interior/bleuroom/kira.png") no-repeat;
  aspect-ratio: 108/128;
  width: 20%;
  top: -5%;
  left: 52%;
  transform: scaleY(-1);
  background-size: contain;
}
#bleuroom #curtain .pd_intro .video+li::before {
  background: url("/img/interior/bleuroom/kira.png") no-repeat;
  aspect-ratio: 108/128;
  width: 14%;
  top: -27%;
  left: 2%;
  transform: scaleX(-1);
  background-size: contain;
}
#bleuroom #curtain .pd_intro .video+li::after {
  background: url("/img/interior/bleuroom/rose02.png") no-repeat;
  aspect-ratio: 192/128;
  width: 26%;
  top: -32%;
  right: 8%;
  background-size: contain;
}
#bleuroom #curtain2 .pd_intro li:first-child:before {
  background: url(/img/interior/bleuroom/kira.png) no-repeat;
  aspect-ratio: 108 / 128;
  width: 14%;
  bottom: -21%;
  right: 0;
  transform: scaleX(-1);
  background-size: contain;
}
#bleuroom #curtain2 .pd_intro .video:before {
  background: url(/img/interior/bleuroom/kira.png) no-repeat;
  aspect-ratio: 108 / 128;
  width: 15%;
  top: -4%;
  left: 1%;
  transform: scaleY(-1);
  background-size: contain;
}
#bleuroom #curtain2 .pd_intro .video::after {
  background: url(/img/interior/bleuroom/shoes02.png) no-repeat;
  aspect-ratio: 266 / 279;
  width: 35%;
  bottom: -14%;
  left: 4%;
  background-size: contain;
}
#bleuroom #curtain2 .pd_introBed li:first-child::before{
  background: url(/img/interior/bleuroom/chouchou2.png) no-repeat;
  aspect-ratio: 371 / 300;
  width: 50%;
  height: fit-content;
  top: -22%;
  right: 6%;
  z-index: -1;
  transform: unset;
  background-size: contain;
}
#bleuroom #curtain2 .pd_introBed .flex_rvs::before{
  background: url(/img/interior/bleuroom/kira.png) no-repeat;
  aspect-ratio: 108 / 128;
  width: 17%;
  top: -7%;
  left: 32%;
  background-size: contain;
}
#bleuroom #curtain2 .pd_introBed .flex_rvs::after{
  background: url(/img/interior/bleuroom/rose03.png) no-repeat;
  aspect-ratio: 208 / 159;
  width: 28%;
  bottom: -14%;
  left: 8%;
  background-size: contain;
}
#bleuroom .pd_introBed + .imgbox02 {
  position: relative;
}
#bleuroom .pd_introBed + .imgbox02::before {
  content: "";
  position: absolute;
  background: url(/img/interior/bleuroom/kira.png) no-repeat;
  aspect-ratio: 108 / 128;
  width: 17%;
  top: -11%;
  right: 9%;
  background-size: contain;
}
#bleuroom .bc-other {
  position: relative;
}
#bleuroom .bc-other::before,
#bleuroom .bc-other::after {
  content: "";
  position: absolute;
}
#bleuroom .bc-other::before {
  background: url(/img/interior/bleuroom/chouchou4.png) no-repeat;
  aspect-ratio: 360 / 311;
  width: 48%;
  top: -6%;
  left: -5%;
  background-size: contain;
}
#bleuroom .bc-other::after {
  background: url(/img/interior/bleuroom/chouchou.png) no-repeat;
  aspect-ratio: 39 / 38;
  width: 7%;
  top: -4%;
  right: 9%;
  background-size: contain;
}
#bleuroom .pd_intro li figure {
  width: 62%;
  margin: 0;
}
#bleuroom .pd_intro li .pdIntro {
  width: 40%;
  margin: 0;
  font-size: 3.4vw;
  line-height: 1.7;
}
#bleuroom .pdIntro p {
  text-align: left;
}
#bleuroom .pd_intro .video .pdIntro p{
  text-align: center;
}
#bleuroom .pd_intro .video .videoframe {
  width: 68%;
  margin: 10% auto 12%;
  position: relative;
}
#bleuroom .videoframe:before {
  content: "";
  position: absolute;
  top: -17%;
  left: 0;
  background: url("/img/interior/bleuroom/frame_video.png") no-repeat 50% 50% / 100%;
  aspect-ratio: 447 / 630;
  width: 100%;
  z-index: 2;
}
#bleuroom #curtain .videoframe:before,
#bleuroom #curtain2 .videoframe:before {
  top: -5%;
}
#bleuroom .hacobune-univideo {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 330 / 448;
  width: 80%;
  margin: 0 auto;
  margin-top: 3%;
}
#bleuroom .hacobune-unit-video[data-v-0100fce1] {
  margin: 0;
}
#bleuroom .pd_list {
  display: flex;
  justify-content: space-evenly;
}
#bleuroom .pd_list li {
  width: 31%;
  display: block;
  text-align: center;
}
#bleuroom .pd_list li figure {
  width: 100%;
  margin: 0;
}
#bleuroom .btn{
  cursor: pointer;
  position: relative;
  width: 40%;
  margin: 5% auto;
  padding: 5% 0;
  text-align: center;
  background: url("/img/interior/bleuroom/nArr.png") 90% 50% / 4% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
}
#bleuroom .btn_s {
  cursor: pointer;
  width: 90%;
  position: relative;
  margin: 15% auto;
  padding: 12% 0;
  text-align: center;
  background: url("/img/interior/bleuroom/nArr.png") 90% 50% / 4% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
}
#bleuroom .btn a,#bleuroom .btn_s a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  z-index: 1;
}
#bleuroom .btn span,
#bleuroom .btn_s span {
  color: #5894d5;
  font-size: 3.7vw;
}
#bleuroom .btn::before,
#bleuroom .btn::after,
#bleuroom .btn_s::before,
#bleuroom .btn_s::after {
  content: "";
  position: absolute;
  left: 0;
  background: url("/img/interior/bleuroom/btn_frame.png") no-repeat 50% 50%/100%;
  aspect-ratio: 329/42;
  width: 100%;
  top: -30%;
}
#bleuroom .btn::after,
#bleuroom .btn_s::after {
  transform: scaleY(-1);
  top: unset;
  bottom: -36%;
}
#bleuroom #chest {
  margin-bottom: 12%;
}
#bleuroom #curtain .pdIntro_btn,
#bleuroom #curtain2 .pdIntro_btn {
  width: 40%;
}
#bleuroom #curtain .pd_intro,
#bleuroom #curtain2 .pd_intro {
  padding: 0;
}
#bleuroom #curtain2 .pd_intro {
  margin-bottom: 12%;
}
#bleuroom #curtain .pd_intro {
  margin: 10% auto 15%;
}
#bleuroom #curtain .pd_intro .video {
  margin-bottom: 9%;
  aspect-ratio: 750/693;
}
#bleuroom #curtain2 .pd_intro .video {
  margin-top: 3%;
  aspect-ratio: 750/693;
}
#bleuroom #curtain .pd_intro .video .videoframe,
#bleuroom #curtain2 .pd_intro .video .videoframe {
  width: 58%;
  aspect-ratio: 393 / 620;
}
#bleuroom #curtain .videoframe:before,
#bleuroom #curtain2 .videoframe:before {
  background: url("/img/interior/bleuroom/frame_video3.png") no-repeat 50% 50% / 100%;
  aspect-ratio: 393 / 693;
}
#bleuroom #curtain .hacobune-univideo,
#bleuroom #curtain2 .hacobune-univideo {
 width: 100%;
  border-radius: 0;
  position: relative;
  overflow: visible;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 116%;
  margin-top: 1%;
  margin-left: -8%;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  object-fit: cover;
  transform: scale(1);
}
/* #bleuroom #curtain .hacobune-univideo {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 335 624' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='white' d='M167.500,623.776 C135.725,623.776 107.296,602.925 98.364,573.070 L96.860,568.204 L91.726,568.178 L67.036,568.178 L65.846,564.967 C55.249,536.390 32.442,514.046 3.272,503.664 L-0.005,502.497 L-0.005,121.307 L3.272,120.141 C32.442,109.759 55.249,87.414 65.846,58.836 L67.038,55.622 L96.910,55.599 L98.364,50.738 C107.297,20.881 135.727,0.028 167.500,0.028 C199.272,0.028 227.702,20.881 236.637,50.738 L238.093,55.602 L243.274,55.625 L267.964,55.625 L269.154,58.836 C279.751,87.414 302.558,109.759 331.727,120.141 L335.004,121.307 L335.004,502.497 L331.728,503.664 C302.559,514.045 279.751,536.390 269.154,564.967 L267.962,568.182 L238.091,568.205 L236.637,573.066 C227.704,602.923 199.274,623.776 167.500,623.776 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 115%;
  margin-top: -14%;
  margin-left: -7%;
} */
#bleuroom .hacobune-app-container[data-v-0f4823bf] {
  padding: 0;
}
#bleuroom #curtain .pd_intro li figure,
#bleuroom #curtain2 .pd_intro li figure {
  width: 59%;
}
#bleuroom #curtain .pd_intro li .pdIntro,
#bleuroom #curtain2 .pd_intro .video .pdIntro {
  width: 45%;
  line-height: 2.0;
}
#bleuroom #curtain .pd_intro .video + li .pdIntro,
#bleuroom #curtain2 .pd_intro li .pdIntro {
  width: 39%;
}
#bleuroom #curtain .btn_s,
#bleuroom #curtain2 .btn_s {
  width: 90%;
}
#bleuroom .pd_introBed li .pdIntro p {
  text-align: center;
}
#bleuroom .imgbox02 {
  width: 97%;
  margin: 0 auto;
  text-align: center;
}


/* otherItems */
#bleuroom .bc-other {
  padding: 10% 0 !important;
}
#bleuroom .bc-other h2 {
  width: 68%;
  position: relative;
  margin: 0 auto;
}
#bleuroom .itmbox .othrlst {
  width: 96%;
  margin: 0 auto;
  justify-content: space-between;
}
#bleuroom .itmbox .othrlst li {
  width: 31.5%;
  padding: 0;
  margin: 4% 0 0;
}
#bleuroom .itmbox .othrlst li p {
  color: #5894d5;
  letter-spacing: -2px;
}
#bleuroom .itmbox .othrlst li .itmimg {
  position: relative;
  padding: 10%;
}
#bleuroom .itmbox .othrlst li .itmimg::before {
  content: "";
  position: absolute;
  background: url("/img/interior/bleuroom/other_frame.png") 50% 50%/100%;
  width: 100%;
  aspect-ratio: 231/230;
  top: 0;
  left: 0;
}
#bleuroom .itmbox .othrlst li small {
  letter-spacing: 0;
}
#bleuroom .bc-other .btn_ot {
  font-size: 3.5vw;
}
#bleuroom .last_btn {
  width: 70%;
  margin: 0 auto;
  padding: 5% 0;
  text-align: center;
}
#bleuroom .last_btn a {
  width: 100%;
}
#bleuroom .last_btn a img {
  width: 53%;
}
/* contents */
@media screen and (min-width: 768px){
  #bleuroom{
    font-size: 10px;
  }
  #bleuroom .forsp {
    display: none;
  }
  #bleuroom .forpc {
    display: block;
  }
  #bleuroom .kanban{
    width: 95%;
    margin: 0 auto;
  }
  #bleuroom .kanban::after {
    width: 26%;
  }
  #bleuroom .kanban_txt {
    font-size: min(1.8vw,22px);
    background: url(/img/interior/bleuroom/kanban_bg_pc.png) no-repeat 50% 50% / 70%;
    padding: 5% 0;
  }
  #bleuroom .kanban_txt::before, #bleuroom .kanban_txt::after {
    background-size: cover;
    width: 65%;
  }
  #bleuroom .kanban_txt p {
    margin: 0 auto 4%;
    padding: 3%;
    font-size: min(1.3vw,16px);
  }
  #bleuroom .kanban_txt p span {
    margin-bottom: 2%;
    font-size: 115%;
  }
  #bleuroom .kanban_txt p::before, #bleuroom .kanban_txt p::after {
    width: 64%;
  }
  #bleuroom h2 {
    width: 60%;
  }
  #bleuroom figure {
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  #bleuroom .txt{
    font-size: min(1.7vw,20px);
  }
  #bleuroom #chest .pd_intro {
    padding-top: 10%;
    width: 75%;
    margin: 0 auto;
  }
  #bleuroom .pd_intro li .pdIntro {
    font-size: min(1.5vw,18px);
  }
  #bleuroom #chest .pd_intro .video:before {
    width: 40%;
    top: -9%;
  }
  #bleuroom #chest .pd_intro .video+li:before {
    width: 22%;
  }
  #bleuroom .pd_list img {
    width: 90%;
  }
  #bleuroom .pd_intro .pdIntro p {
    line-height: 1.75;
  }
  #bleuroom .btn_s span,#bleuroom .btn span {
    line-height: 2.5;
    font-size: min(1.7vw,20px);
  }
  #bleuroom .btn_s {
    width: 80%;
    padding: 10% 0;
    background: url(/img/interior/bleuroom/nArr.png) 85% 50% / 3% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
    transition: 0.3s ease-in-out;
  }
  #bleuroom #curtain .btn_s, #bleuroom #curtain2 .btn_s {
    width: 80%;
  }
  #bleuroom .btn {
    width: 30%;
    padding: 3.5% 0;
    background: url(/img/interior/bleuroom/nArr.png) 85% 50% / 3% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
    transition: 0.3s ease-in-out;
  }
  #bleuroom .btn_s:hover {
    background: url(/img/interior/bleuroom/nArr.png) 90% 50% / 3% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
  }
  #bleuroom .btn:hover {
    background: url(/img/interior/bleuroom/nArr.png) 90% 50%  / 3% no-repeat, linear-gradient(to right, transparent 0%, #f2f7fe 10%, #f2f7fe 90%, transparent 100%);
  }
  #bleuroom #chest{
    margin-bottom: 10%;
  }
  #bleuroom .pd_list {
    width: 90%;
    margin: 7% auto 0;
  }
  #bleuroom .pd_intro {
    width: 75%;
    padding: 0;
    margin: 0 auto;
  }
  #bleuroom #curtain .pd_intro .video:before {
    width: 13%;
    top: 5%;
    left: 52%;
  }
  #bleuroom #curtain .pd_intro .video+li::after {
    width: 21%;
    top: -34%;
    right: 12%;
  }
  #bleuroom #curtain .pd_intro .video+li::before {
    width: 11%;
    top: -10%;
    left: -1%;
  }
  #bleuroom #curtain .pd_intro li figure, #bleuroom #curtain2 .pd_intro li figure {
    width: 56%;
  }
  #bleuroom #curtain {
    margin-bottom: 10%;
  }
  #bleuroom #curtain2 .pd_intro li:first-child:before {
    width: 14%;
    bottom: -14%;
    right: 2%;
  }
  #bleuroom #curtain .pd_intro .video .videoframe {
    aspect-ratio: unset;
  }
  #bleuroom #curtain .hacobune-univideo {
    margin-top: 0;
  }
  #bleuroom #curtain2 .pd_intro .video:before {
    width: 12%;
    top: 10%;
    left: 1%;
  }
  #bleuroom #curtain2 .pd_intro .video::after {
    width: 28%;
    bottom: -12%;
    left: 4%;
  }
  #bleuroom .btn {
    background: url(/img/interior/bleuroom/nArr.png) 85% 50% / 3% no-repeat, linear-gradient(to right, transparent 0%, rgb(255, 255, 255) 10%, rgb(242, 247, 254) 90%, transparent 100%);
  }
  #bleuroom #curtain .pd_intro,
  #bleuroom #curtain2 .pd_intro {
    margin: 6% auto 8%;
  }
  #bleuroom #curtain .pd_intro .video{
    margin-bottom: 2%;
  }
  #bleuroom #curtain2 .pd_intro .video{
    margin-top: 5%;
  }
  #bleuroom .bc-other::before {
    width: 29%;
    top: -7%;
    left: 3%;
  }
  #bleuroom .bc-other::after {
    width: 4%;
    top: -5%;
    right: 16%;
  }
  #bleuroom .bc-other {
    margin-top: 10%;
  }
  #bleuroom .bc-other {
    padding: 0 !important;
  }
  #bleuroom .itmbox .othrlst {
    width: 80%;
    justify-content: space-between;
  }
  #bleuroom .itmbox .othrlst li p {
    font-size: min(1.5vw,18px);
    letter-spacing: normal;
  }
  #bleuroom .itmbox .othrlst li .itmimg::before {
    top: -3%;
    z-index: 1;
  }
   #bleuroom .itmbox .othrlst li a img {
    transition: transform 0.3s ease-in-out;
  }
  #bleuroom .itmbox .othrlst li a:hover img {
    transform: scale(1.1);
    z-index: -1;
    position: relative;
  }
  #bleuroom .last_btn {
    padding: 2% 0 5%;
    transition: 0.3s ease-in-out;
  }
  #bleuroom .last_btn a img {
    transition: transform 0.3s ease-in-out;
    width: 30%;
  }
  #bleuroom .last_btn:hover img {
    transform: scale(1.1);
  }
}
/*///// animation /////*/
.anmt, .at-anmt1, .at-anmt2{
  position: relative;
  height: 100%;
}
.anmt, .anmt > div, .at-anmt1, .at-anmt2{
  opacity: 0;
}
.at-anmt1.animated{
  animation: mainshow1 .8s ease-in-out 0s forwards;
}
.rotate-right {
  animation: rotateOnce1 1.5s ease-in-out forwards;
}
.rotate-left {
  animation: rotateOnce2 .8s ease-in-out 0s forwards;
}
@keyframes rotateOnce1 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
      transform: rotate(0deg); /* Xoay trái 15 độ */
  }
}
@keyframes rotateOnce2 {
  0% {
      transform: rotate(10deg);
  }
  100% {
      transform: rotate(0deg); /* Xoay trái 15 độ */
  }
}
@keyframes mainshow1{
  10%{
    opacity: 0;
    transform: translateY(100px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
.at-anmt2.animated{
  animation: mainshow2 .8s ease-in-out .5s forwards;
}
@keyframes mainshow2{
  40%{
    opacity: 0;
    transform: translateY(100px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
.anmt.animated, .anmt.animated > div{
  animation: boxshow .5s ease-in-out 0s forwards;
}
@keyframes boxshow{
  0%{
    opacity: 0;
    transform: translateY(70px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}