@charset "utf-8";
@font-face {
  font-family: "LogoTypeGothicCondense";
  src: url("ロゴたいぷゴシックCondense.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
#paroom{
  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;
  overflow: hidden;
}
#paroom img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#paroom p, h3{
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}
#paroom span {
  line-height: 1.5;
}
#paroom i{
  font-style: inherit;;
}
#paroom small, sub, sup{
  font-size: .8em;
}
#paroom a{
  text-decoration: none;
  transition: .6s;
}
#paroom .flex_rvs{
  flex-direction: row-reverse;
}
#paroom .pc{
  display: none;
}
#paroom .sp{
  display: block;
}
/* contents */



/* 動画 */
#paroom .container { 
  background: url("/img/interior/paris/bg.jpg") 0/ 100% repeat;
  font-family: 'Hannari', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}
#paroom .kanbanImg { 
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#paroom .mainImg { 
  position: relative;
  width: 97%; 
  margin: 0 auto; 
  padding: 5% 0;
  overflow: visible;
  z-index: 2;
}
#paroom .flower-deco {
  position: absolute;
  width: 80px;
  height: auto;
  opacity: 0;
  z-index: -1;
}
#paroom .flower-top {
  width: 18%;
  top: 4%;
  right: 1%;
  transform-origin: bottom center;
  animation: slideOutTop 0.5s ease-out 0.5s forwards;
}
#paroom .flower-left {
  width: 18%;
  top: 54%;
  left: 0;
  transform-origin: top center;
  animation: slideOutLeft 0.5s ease-out 0.7s forwards;
}
#paroom .flower-right {
  width: 17%;
  bottom: 15%;
  right: 0;
  animation: slideOutRight 0.5s ease-out 0.9s forwards;
}
@keyframes slideOutTop {
  0% {
    opacity: 0;
    transform: translateY(50px) translateX(-30px) rotate(-25deg);
    z-index: -1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg);
    z-index: 1;
  }
}
@keyframes slideOutLeft {
  0% {
    opacity: 0;
    transform: translateY(50px) translateX(30px) rotate(-50deg);
    z-index: -1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg);
    z-index: 1;
  }
}
@keyframes slideOutRight {
  0% {
    opacity: 0;
    transform: translateX(-50px);
    z-index: -1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    z-index: 1;
  }
}
#paroom h2 {
  width: 93%;
  margin: 0 auto;
}
#paroom .kanbanTxt {
  position: relative;
  margin: 0 4.5%;
  padding: 6%;
  color: #7e7e7e;
  background-color: #ffffff;
  border: solid #bebebe 1px;
}
#paroom .kanbanTxt p {
  position: relative;
  padding: 11% 0;
  font-size: 3.2vw;
  line-height: 2.24;
}
#paroom .kanbanTxt p::before,
#paroom .kanbanTxt p::after {
  position: absolute;
  content: "";
  width: 52%;
  left: 50%;
  aspect-ratio: 710 / 56;
  transform: translateX(-50%);
  background: url("/img/interior/paris/kanbantxt_line.png") 50%/ contain no-repeat;
}
#paroom .kanbanTxt p::before {
  top: 0;
}
#paroom .kanbanTxt p::after {
  bottom: 0;
  transform: scale(-1) translateX(50%);
}
#paroom .corner {
  position: absolute;
  width: 8%;
  aspect-ratio: 108/108;
  background: url("/img/interior/paris/kanbantxt_corner.png") 50%/ contain no-repeat;
}
#paroom .corner-tl {
  top: 1.5%;
  left: 1.5%;
}
#paroom .corner-tr {
  top: 1.5%;
  right: 1.5%;
  transform: scaleX(-1);
}
#paroom .corner-bl {
  bottom: 1.5%;
  left: 1.5%;
  transform: scaleY(-1);
}
#paroom .corner-br {
  bottom: 1.5%;
  right: 1.5%;
  transform: scale(-1);
}
#paroom .guide {
  margin: 3% 0;
  padding: 1% 0;
  aspect-ratio: 750/650;
  background: url("/img/interior/paris/icon_eiffel.png") 9% 5% / 9% no-repeat, url("/img/interior/paris/bg_shape1.png") 20% 0 / 61% no-repeat, url("/img/interior/paris/bg_shapelace.png") 98% 88% / 51% no-repeat;
}
#paroom .guideBg {
  width: 72%;
  margin: 11% auto 0 25%;
  position: relative;
  aspect-ratio: 538 / 454;
  background: url("/img/interior/paris/bg_plate.png") 50% / 100% no-repeat;
}
#paroom .guideBg::before {
  position: absolute;
  content: "";
  width: 57%;
  aspect-ratio: 614/206;
  top: -8%;
  left: 10%;
  background: url("/img/interior/paris/ribon.png") 50% / 100% no-repeat;
}
#paroom .guideIntro {
  padding: 11% 0;
  font-size: 3.3vw;
}
#paroom .guide span {
  width: 72%;
  margin: 0 auto;
  display: block;
  font-size: 120%;
  color: #88694a;
  text-align: center;
  font-weight: bold;
  font-family: "Yu Mincho", "YuMincho", "游明朝", "ヒラギノ明朝 ProN", serif;
}
#paroom .guide ul{
  width: 72%;
  margin: 0 auto;
  margin-left: 18%;
  color: #8b7864;
}
#paroom .guide ul li {
  position: relative;
  padding-left: 8%;
}
#paroom .guide ul li:not(:last-child) {
  margin-bottom: 2%;
}
#paroom .guide ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 48/70;
  width: 5%;
  background: url("/img/interior/paris/one.png") 50% / 100% no-repeat;
}
#paroom .guide ul li:nth-child(2)::before {
  background: url("/img/interior/paris/two.png") 50% / 100% no-repeat;
}
#paroom .guide ul li:last-child::before {
  background: url("/img/interior/paris/three.png") 50% / 100% no-repeat;
}
#paroom .contents {
  padding-bottom: 5%;
  background: url("/img/interior/paris/bg_shape3.png") 50% 3.7%/66% no-repeat, url("/img/interior/paris/bg_shapelace.png") 109% 7.8%/54% no-repeat, url("/img/interior/paris/bg_shapelace02.png") -8% 11.4%/50% no-repeat, url("/img/interior/paris/bg_shape2.png") 32% 10%/71% no-repeat, url("/img/interior/paris/bg_shapelace.png") 78% 14%/52% no-repeat,  url("/img/interior/paris/bg_shape4.png") 7% 17.1%/64% no-repeat, url("/img/interior/paris/bg_shapelace.png") 109% 19.6%/54% no-repeat, url("/img/interior/paris/bg_shape5.png") 51% 22%/58% no-repeat, url("/img/interior/paris/bg_shapelace.png") -2% 23.8%/57% no-repeat, url("/img/interior/paris/bg_shape6.png") 89% 25.5%/58% no-repeat, url("/img/interior/paris/bg_shapelace02.png") 88% 31.8%/50% no-repeat, url("/img/interior/paris/bg_shape2.png") 34% 32.1%/70% no-repeat, url("/img/interior/paris/bg_shapelace.png") 34% 40.3%/55% no-repeat, url("/img/interior/paris/bg_shape7.png") 34% 38.3%/75% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 68% 44.3%/57% no-repeat, url("/img/interior/paris/bg_shape4.png") 6% 46.1%/66% no-repeat, url("/img/interior/paris/bg_shapelace02.png") 48% 49.4%/50% no-repeat, url("/img/interior/paris/bg_shape5.png") 48% 55.3%/58% no-repeat, url("/img/interior/paris/bg_shapelace.png") 91% 57.8%/61% no-repeat, url("/img/interior/paris/bg_shape8.png") 84% 60.2%/47% no-repeat, url("/img/interior/paris/bg_shapelace04.png") -12% 63.4%/63% no-repeat, url("/img/interior/paris/bg_shape9.png") 40% 64.9%/56% no-repeat, url("/img/interior/paris/bg_shapelace.png") 94% 67.5%/57% no-repeat, url("/img/interior/paris/bg_shape9.png") 77% 69.4%/55% no-repeat, url("/img/interior/paris/bg_shape2.png") 58% 73.2%/71% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 80% 75.7%/55% no-repeat, url("/img/interior/paris/bg_shapelace04.png") 26% 81.5%/39% no-repeat, url("/img/interior/paris/bg_shape7.png") 69% 80.3%/72% no-repeat, url("/img/interior/paris/bg_shape10.png") 69% 84%/74% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 140% 85.6%/54% no-repeat, url("/img/interior/paris/bg_shape7.png") 85% 91.6%/75% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 115% 95.4%/54% no-repeat, url("/img/interior/paris/bg_shape11.png") 70% 98.4%/69% no-repeat, url("/img/interior/paris/bg_shapelace3.png") -35% 101%/54% no-repeat;
}

/* Bed Room */
#bedRoom { 
  margin: -25% auto 5%;
}
#paroom .pdIntro {
  width: 95%;
  margin: 5% auto;
}
#paroom .pdIntro li {
  display: flex;
  align-items: center;
  font-size: 3.8vw;
  color: #7e7e7e;
  column-gap: 3.5vw;
}
#paroom .pdIntro .pdVideo {
  position: relative;
}
#bedRoom .pdIntro .pdVideo::before {
  background: url("/img/interior/paris/icon_flower01.png") 50% / 100% no-repeat;
  aspect-ratio: 291 / 261;
  width: 19%;
  top: -5%;
  right: 2%;
}
#bedRoom .pdIntro .pdVideo::after {
  background: url("/img/interior/paris/icon_dress.png") 50% / 100% no-repeat;
  aspect-ratio: 205/429;
  width: 14%;
  top: 105%;
  left: 2%;
}
#paroom .pdIntro li:not(:last-child) {
  margin-bottom: 5%;
}
#paroom .pdIntro li .Ttl {
  display: block;
  margin-bottom: 5%;
  font-size: 128%;
  font-weight: bold;
  line-height: 1.25;
  font-family: "游明朝", "ヒラギノ明朝 ProN", serif;
}
#paroom .pdIntro li span {
  display: block;
}
#paroom .pdIntro .pdImg {
  position: relative;
  width: 54%;
}
#paroom .pdIntro .pdLink {
  width: 46%;
}
#paroom .specsImgFrame,
#paroom .frameimage {
  position: relative;
  z-index: 1;
}
#paroom .videoframe {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  aspect-ratio: 740/1290;
  top: 0;
  left: 0;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 740 1290' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M740.001,534.382 L740.001,485.629 L740.001,239.996 C740.001,228.603 731.240,219.371 720.433,219.371 L684.858,219.371 L684.858,170.618 C684.858,159.226 676.097,149.992 665.290,149.992 L613.659,149.992 C573.127,61.783 479.306,-0.013 370.005,-0.013 C260.705,-0.013 166.885,61.783 126.353,149.992 L74.722,149.992 C63.915,149.992 55.154,159.226 55.154,170.618 L55.154,219.371 L19.578,219.371 C8.772,219.371 0.011,228.603 0.011,239.996 L0.011,485.629 L0.011,534.382 L0.011,1260.692 C0.011,1276.877 12.457,1289.998 27.812,1289.998 L712.200,1289.998 C727.554,1289.998 740.001,1276.877 740.001,1260.692 L740.001,534.382 Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 740 1290' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M740.001,534.382 L740.001,485.629 L740.001,239.996 C740.001,228.603 731.240,219.371 720.433,219.371 L684.858,219.371 L684.858,170.618 C684.858,159.226 676.097,149.992 665.290,149.992 L613.659,149.992 C573.127,61.783 479.306,-0.013 370.005,-0.013 C260.705,-0.013 166.885,61.783 126.353,149.992 L74.722,149.992 C63.915,149.992 55.154,159.226 55.154,170.618 L55.154,219.371 L19.578,219.371 C8.772,219.371 0.011,228.603 0.011,239.996 L0.011,485.629 L0.011,534.382 L0.011,1260.692 C0.011,1276.877 12.457,1289.998 27.812,1289.998 L712.200,1289.998 C727.554,1289.998 740.001,1276.877 740.001,1260.692 L740.001,534.382 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  object-fit: cover;
}
#paroom .pdImg .slider {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#paroom .pdImg .slider.slick-initialized {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#paroom .btn a {
  position: relative;
  display: flex;
  margin-top: 5%;
  aspect-ratio: 280 / 80;
  background: #7383b4;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  line-height: 1.0;
}
#paroom .btn a::before,
#paroom .btn a::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#paroom .btn a::before {
  border: 1px solid #ffffff;
  width: 20%;
  right: 0;
}
#paroom .btn a::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  right: 20%;
  pointer-events: none;
}
#paroom .btn a img {
  width: 34%;
}
#paroom .onlyImg-01 {
  margin-top: 15%;
  justify-content: end;
}
#paroom .onlyImg-01 .pdImg {
  width: 68%;
  position: relative;
}
#bedRoom .onlyImg-01 .pdImg::before {
  background: url("/img/interior/paris/img0101_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 566/236;
  width: 106%;
  top: -14%;
  left: -7%;
}
#paroom .plusOne-01 {
  position: relative;
}
#paroom .sideChest { 
  position: relative;
  margin-top: 12%;
}
#paroom .sideChest::before {
  background: url("/img/interior/paris/icon_shoes.png") 50% / 100% no-repeat;
  aspect-ratio: 233/261;
  width: 16%;
  top: -23%;
  right: 3%;
}
#paroom .sideChest::after {
  background: url("/img/interior/paris/icon_eiffel.png") 50% / 100% no-repeat;
  aspect-ratio: 136/277;
  width: 10%;
  top: 100%;
  left: 41%;
  transform: rotate(20deg);
}
#paroom .sideChest .pdImg .slider {
  width: 100%;
}
#paroom .sideChest .pdImg{
  position: relative;
  width: 56%;
}
#paroom .sideChest .pdLink {
  width: 44%;
}
#paroom .onlyImg-02 {
  position: relative;
}
#paroom .onlyImg-02::before {
  background: url("/img/interior/paris/icon_flower02.png") 50% / 100% no-repeat;
  aspect-ratio: 200/267;
  width: 13%;
  top: -12%;
  right: 1%;
}
#bedRoom .pdIntro .pdVideo::before,
#bedRoom .pdIntro .pdVideo::after,
#bedRoom .onlyImg-01 .pdImg::before,
#paroom .sideChest::before,
#paroom .sideChest::after,
#paroom .sideChest .pdImg::before,
#paroom .onlyImg-02::before,
#paroom .plusOne-01 .pdImg::before,
#bedRoom .plusOne-02::before,
#paroom .sofa .pdImg::before,
#tableSide .table .pdImg::before,
#tableSide .plusOne-02 .pdImg::before,
#tableSide .pdVideo::before,
#tableSide .table::before,
#tableSide .plusOne-02::before,
#displaySpace .plusOne-01::before,
#displaySpace .plusOne-01::after,
#displaySpace .plusOne-02::after,
#displaySpace .plusOne-01 .pdImg::before,
#displaySpace .plusOne-02 .pdImg::before,
#cafeSpace .pdIntro .cafeTable::before,
#cafeSpace .pdIntro .cafeTable::after,
#cafeSpace .cafeTable .pdImg::before,
#cafeSpace .chair .pdImg::before,
#cafeSpace .stool .pdImg::before,
#cafeSpace .stool .pdImg::after,
#cafeSpace .stool::before,
#dresser .onlyImg-01::before {
  content: "";
  position: absolute;
}
#paroom .sideChest .pdImg::before{
  background: url("/img/interior/paris/slider0102_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 368/100;
  width: 92%;
  top: -12%;
  left: 5%;
}
#paroom .plusOne-01 {
  margin-top: 14%;
}
#paroom .plusOne-01 .pdImg::before{
  background: url("/img/interior/paris/plusone_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 331/96;
  width: 70%;
  top: -14%;
  right: 1%;
  transform: rotate(5deg);
}
#paroom li[class^="plusOne"] {
  column-gap: 0;
}
#paroom .plusOne-01 .pdImg {
  width: 61%;
}
#paroom .plusOne-01 .pdLink {
  width: 39%;
}
#bedRoom .plusOne-02 {
  position: relative;
}
#bedRoom .plusOne-02::before {
  background: url("/img/interior/paris/icon_perfume.png") 50% / 100% no-repeat;
  aspect-ratio: 161/212;
  width: 11%;
  top: 88%;
  left: 5%;
}
#paroom .plusOne-02 .pdImg {
  width: 62%;
}
#bedRoom .plusOne-02 .pdImg {
  margin-top: -5%;
}
#paroom .plusOne-02 .pdLink {
  width: 38%;
}
#paroom .pdImg .slider{
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* slick-dots */
#paroom .slick-dots {
  display: flex;
  bottom: 0;
  z-index: 1;
  justify-content: center;
}
#paroom .slick-dots li {
  aspect-ratio: 1;
  margin: 0;
}
#paroom .slick-dots li button:before {
  opacity: 1;
  color: #ffffff;
}
#paroom .slick-dots li.slick-active button:before {
  color: #7383b4;
}
/* slick-dots */
#paroom .onlyImg-02 .pdImg{
  width: 100%;
}
#paroom .pdIntro .sofa {
  margin-top: -15%;
  margin-bottom: 9% !important;
  column-gap: 0;
}
#paroom .sofa .pdImg {
  width: 63%;
  margin-right: -1%;
}
#paroom .sofa .pdImg::before {
  background: url("/img/interior/paris/slider03_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 146/111;
  width: 31%;
  top: -12%;
  right: 9%;
}
/* tableSide */
#tableSide {
  margin-top: 10%;
}
#tableSide .plusOne-01 {
  justify-content: end;
}
#paroom .sofa .pdLink {
  width: 38%;
  margin-top: 20%;
  font-size: 93%;
}
#tableSide .pdVideo .pdLink {
  margin-top: 25%;
}
#tableSide .pdVideo .pdLink .Ttl {
  letter-spacing: -1px;
}
#tableSide .pdIntro .plusOne-01 .pdImg {
  width: 70%;
}
#tableSide .pdIntro .plusOne-01::before {
  content: none;
}
#tableSide .pdVideo::before {
  background: url("/img/interior/paris/icon_shoes.png") 50% / 100% no-repeat;
  aspect-ratio: 233/261;
  width: 16%;
  /* top: -17%;
  right: 4%; */
  top: -4%;
  right: 9%;
}
#tableSide .table {
  position: relative;
}
#tableSide .table::before {
  background: url("/img/interior/paris/icon_flower03.png") 50% / 100% no-repeat;
  aspect-ratio: 232/308;
  width: 15%;
  top: -45%;
  left: 7%;
}
#tableSide .table {
  margin-top: 18%;
}
#tableSide .table .pdImg {
  flex: 0 0 62%;
  margin-left: -2%;
}
#tableSide .table .pdImg::before {
  background: url("/img/interior/paris/img0201_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 185/105;
  width: 42%;
  top: -13%;
  left: 5%;
}
#tableSide .table .pdLink {
  position: relative;
  flex: 0 0 45%;
  margin-left: -7%;
}
#tableSide .plusOne-02 {
  position: relative;
  margin-top: 26%;
  align-items: flex-start !important;
}
#tableSide .plusOne-02::before {
  background: url("/img/interior/paris/icon_perfume.png") 50% / 100% no-repeat;
  aspect-ratio: 161/212;
  width: 11%;
  bottom: -9%;
  right: 5%;
  transform: rotate(25deg)
}
#tableSide .plusOne-02 .pdImg {
  flex: 0 0 66%;
  margin-right: -2%;
}
#tableSide .plusOne-02 .pdLink {
  flex: 0 0 47%;
  margin-right: -10%;
}
#tableSide .plusOne-02 .pdLink span:not(.Ttl) {
  margin-right: 18%;
}
#tableSide .plusOne-02 .pdImg::before {
  background: url("/img/interior/paris/plusone_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 331/96;
  width: 71%;
  top: -17%;
  right: 5%;
}

/* displaySpace */
#displaySpace {
  margin-top: 14%;
}
#displaySpace .pdVideo {
  margin-top: -12%;
}
#displaySpace .plusOne-01 {
  margin-top: 17%;
  position: relative;
}
#displaySpace .plusOne-01 .pdImg{
  width: 72%;
}
#displaySpace .plusOne-01 .pdImg::before {
  background: url("/img/interior/paris/slider06_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 450/145;
  width: 88%;
  top: -13%;
  left: 1%;
}
#displaySpace .plusOne-01::after {
  background: url("/img/interior/paris/icon_dress.png") 50% / 100% no-repeat;
  aspect-ratio: 205/429;
  width: 14%;
  top: -15%;
  right: 7%;
  transform: rotate(10deg);
}
#displaySpace .plusOne-01::before {
  background: url("/img/interior/paris/icon_flower04.png") 50% / 100% no-repeat;
  aspect-ratio: 216/282;
  width: 15%;
  bottom: -28%;
  left: 4%;
}
#displaySpace .plusOne-02 {
  position: relative;
  margin-top: 24%;
  align-items: flex-start !important;
}
#displaySpace .plusOne-02::after {
  background: url("/img/interior/paris/icon_ribon.png") 50% / 100% no-repeat;
  aspect-ratio: 363/321;
  width: 26%;
  bottom: -24%;
  right: 9%;
}
#displaySpace .plusOne-02 .pdImg{
  flex: 0 0 66%;
  margin-right: -1%;
}
#displaySpace .plusOne-02 .pdLink{
  position: relative;
  flex: 0 0 48%;
  margin-top: 2%;
  margin-right: -12%;
}
#displaySpace .plusOne-02 .pdImg::before {
  background: url("/img/interior/paris/plusone_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 331/96;
  width: 71%;
  top: -17%;
  right: 5%;
}
#displaySpace .plusOne-02 .pdLink span:not(.Ttl) {
  margin-right: 19%;
}

/* cafeSpace */

#cafeSpace {
  margin-top: 18%;
}
#cafeSpace .pdIntro .cafeTable,
#cafeSpace .pdIntro .chair,
#cafeSpace .pdIntro .stool {
  position: relative;
  column-gap: 0 !important;
}
#cafeSpace .pdIntro .cafeTable::before {
  background: url("/img/interior/paris/icon_flower02.png") 50% / 100% no-repeat;
  aspect-ratio: 200/267;
  width: 13%;
  top: -45%;
  right: 3%;
}
#cafeSpace .pdIntro .cafeTable::after {
  background: url("/img/interior/paris/icon_wine.png") 50% / 100% no-repeat;
  aspect-ratio: 182/272;
  width: 13%;
  bottom: -32%;
  right: 7%;
}
#cafeSpace .cafeTable .pdVideo .pdLink {
  margin-top: 10%;
}
#cafeSpace .cafeTable .pdImg {
  flex: 0 0 66%;
  margin-right: -1%;
}
#cafeSpace .cafeTable .pdLink {
  position: relative;
  flex: 0 0 40%;
  margin: 5% -4% auto auto;
  font-size: 93%;
}
#cafeSpace .cafeTable p {
  margin-right: 6%;
}
#cafeSpace .cafeTable .pdImg::before {
  background: url("/img/interior/paris/slider08_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 380/105;
  width: 81%;
  top: -13%;
  left: 9%;
}
#cafeSpace .pdVideo .pdLink {
  margin-top: 15%;
}
#cafeSpace .chair .pdImg {
  flex: 0 0 63%;
  margin-right: -1%;
}
#cafeSpace .chair .pdLink {
  position: relative;
  flex: 0 0 47%;
  margin: 5% -8% auto auto;
}
#paroom .smallSize {
  font-size: 90%;
}
#cafeSpace .chair .pdLink span:not(.Ttl,.smallSize) {
  margin-left: -7%;
}
#cafeSpace .chair .pdImg::before {
  background: url("/img/interior/paris/slider09_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 209/100;
  width: 44%;
  top: -13%;
  right: 13%;
}
#cafeSpace .stool {
  position: relative;
  margin-top: 24%;
}
#cafeSpace .stool::before {
  background: url("/img/interior/paris/icon_cake.png") 50% / 100% no-repeat;
  aspect-ratio: 217/173;
  width: 15%;
  top: -23%;
  left: 47%;
}
#cafeSpace .stool .pdImg {
  flex: 0 0 62%;
  margin-left: -1%;
}
#cafeSpace .stool .pdImg::before {
  background: url("/img/interior/paris/slider10_ttl.png") 50% / 100% no-repeat;
  aspect-ratio: 199/88;
  width: 44%;
  top: -13%;
  left: 13%;
}
#cafeSpace .stool .pdImg::after {
  background: url("/img/interior/paris/icon_eiffel.png") 50% / 100% no-repeat;
  aspect-ratio: 136/277;
  width: 14%;
  bottom: -27%;
  left: 9%;
}

/* dresser */
#dresser {
  margin-top: 20%;
}
#dresser .pdVideo {
  margin-top: -15%;
}
#dresser .onlyImg-01 {
  position: relative;
  justify-content: start;
}
#dresser .onlyImg-01::before {
  background: url("/img/interior/paris/icon_flower03.png") 50% / 100% no-repeat;
  aspect-ratio: 232/308;
  width: 15%;
  bottom: -3%;
  right: 7%;
  transform: scaleX(-1);
}
#dresser .onlyImg-01 .pdImg {
  width: 72%;
}
#paroom .contents .lastBtn {
  width: 75%;
  margin: 10% auto;
}

/* contents */
@media screen and (min-width: 768px){
#paroom .container * {
  font-size: min(1.7vw, 20px);
}
#paroom .sp { display: none;}
#paroom .pc { display: block;}
#paroom .loading-screen img {
  width: 20%;
}
#paroom .container {
  background-size: 50%;
}
#paroom .contents {
  padding-bottom: 5%;
  background: url("/img/interior/paris/bg_shape3.png") 45% 3.8%/49% no-repeat, url("/img/interior/paris/bg_shapelace.png") 89% 8%/32% no-repeat, url("/img/interior/paris/bg_shapelace02.png") 10% 11.5%/41% no-repeat, url("/img/interior/paris/bg_shape2.png") 48% 10.1%/49% no-repeat, url("/img/interior/paris/bg_shapelace.png") 63% 14%/35% no-repeat,  url("/img/interior/paris/bg_shape4.png") 34% 17.3%/35% no-repeat, url("/img/interior/paris/bg_shapelace.png") 85% 19.8%/36% no-repeat, url("/img/interior/paris/bg_shape5.png") 46% 22%/34% no-repeat, url("/img/interior/paris/bg_shapelace.png") 23% 24%/39% no-repeat, url("/img/interior/paris/bg_shape6.png") 75% 25.5%/35% no-repeat, url("/img/interior/paris/bg_shapelace02.png") 72% 32.1%/32% no-repeat, url("/img/interior/paris/bg_shape2.png") 46% 32.4%/40% no-repeat, url("/img/interior/paris/bg_shapelace.png") 60% 35%/33% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 41% 39.9%/32% no-repeat, url("/img/interior/paris/bg_shape7.png") 48% 38%/45% no-repeat, url("/img/interior/paris/bg_shapelace3.png")  64% 43.5%/38% no-repeat, url("/img/interior/paris/bg_shape4.png") 28% 46%/46% no-repeat, url("/img/interior/paris/bg_shapelace02.png") 34% 49%/33% no-repeat, url("/img/interior/paris/bg_shape5.png") 48% 54.5%/38% no-repeat, url("/img/interior/paris/bg_shapelace.png")  64% 57.6%/38% no-repeat, url("/img/interior/paris/bg_shape8.png") 80% 60.1%/32% no-repeat, url("/img/interior/paris/bg_shapelace04.png") 7% 63.4%/46% no-repeat, url("/img/interior/paris/bg_shape9.png") 40% 64.9%/36% no-repeat, url("/img/interior/paris/bg_shapelace.png") 94% 67.5%/37% no-repeat, url("/img/interior/paris/bg_shape9.png") 77% 70.4%/35% no-repeat, url("/img/interior/paris/bg_shape2.png") 45% 73.2%/41% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 67% 76%/36% no-repeat, url("/img/interior/paris/bg_shapelace04.png") 38% 80.5%/28% no-repeat, url("/img/interior/paris/bg_shape7.png") 53% 79.5%/42% no-repeat, url("/img/interior/paris/bg_shape10.png") 69% 83.2%/44% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 108% 84.9%/34% no-repeat, url("/img/interior/paris/bg_shape7.png") 60% 90.6%/45% no-repeat, url("/img/interior/paris/bg_shapelace3.png") 91% 95%/34% no-repeat, url("/img/interior/paris/bg_shape11.png") 70% 98%/49% no-repeat, url("/img/interior/paris/bg_shapelace3.png") -12% 100.5%/34% no-repeat;
}
#paroom .kanbanIntro {
  width: 85%;
  margin: 0 auto;
}
#paroom .kanbanTxt {
  padding: 3%;
}
#paroom .kanbanTxt p {
  padding: 8% 0;
  font-size: min(20px, 1.7vw);
}
#paroom .guide {
  background: url("/img/interior/paris/icon_eiffel.png") 12% 5% / 6% no-repeat, url("/img/interior/paris/bg_shape1.png") 20% 0 / 47% no-repeat, url("/img/interior/paris/bg_shapelace.png") 84% 54% / 35% no-repeat;
}
#paroom .guideBg {
  width: 50%;
  margin: 8% auto 0 36%;
}
#paroom .guideIntro {
  padding: 15% 0;
}
#paroom .pdIntro .sofa {
  margin-top: -20%;
}
#paroom .guide ul {
  margin-left: 21%;
}
#paroom .guide span {
  margin-bottom: 3%;
}
#paroom .guide ul li {
  padding-left: 9%;
}
#paroom .guide ul li:not(:last-child) {
  margin-bottom: 6%;
  line-height: 1.2;
}
#paroom .guide ul li::before {
  width: 6%;
  top: -20%;
}
#paroom h2 {
  width: 70%;
}
#bedRoom {
  margin: -43% auto 5%;
}
#paroom .pdIntro li {
  column-gap: 3vw;
}
#paroom li[class^="plusOne"] {
  column-gap: 0;
}
#paroom .pdIntro {
  width: 65%;
}
#paroom .btn {
  display: flex;
  justify-content: center;
}
#paroom .btn a {
  width: 80%;
  border-radius: 50px;
  transition: 0.3s ease-in-out;
}
#paroom .btn a:hover {
  background: #3f5289;
}
#bedRoom .pdIntro .pdVideo::before {
  width: 17%;
  top: 0;
  right: 0;
}
#bedRoom .pdIntro .pdVideo::after {
  width: 11%;
}
#paroom .sideChest::before {
  width: 14%;
  top: -19%;
}
#bedRoom .pdIntro .onlyImg-02 {
  margin-bottom: 15% !important;
}
#bedRoom .plusOne-02::before {
  width: 9%;
  top: 102%;
  left: 2%;
}

/* tableSide  */
#tableSide,
#displaySpace,
#dresser {
  margin-top: 10%;
}
#tableSide .table {
  margin-top: 8%;
}
#tableSide .pdIntro .pdVideo {
  column-gap: 0;
}
#tableSide .plusOne-02 .pdLink,
#tableSide .plusOne-02 .pdLink span:not(.Ttl) {
  margin-right: 0;
}
#tableSide .pdVideo .pdLink {
  margin-top: 20%;
}
#tableSide .pdVideo .pdLink .Ttl {
  letter-spacing: normal;
}
#tableSide .pdVideo::before {
  width: 15%;
  top: 5%;
}
#displaySpace .plusOne-02 .pdLink,
#displaySpace .plusOne-02 .pdLink span:not(.Ttl) {
  margin-right: 0;
}
#displaySpace .plusOne-02::after {
  width: 22%;
  bottom: -32%;
  right: 0;
}
#cafeSpace .cafeTable .pdLink {
  margin: 0 auto;
}
#cafeSpace .chair .pdLink {
  margin: 0 auto;
}
#tableSide .plusOne-02::before {
  width: 9%;
  bottom: -21%;
}
#displaySpace .pdVideo {
  margin-top: -20%;
}
#displaySpace .plusOne-01 .pdImg::before {
  left: 5%;
}
#displaySpace .plusOne-01::after {
  width: 11%;
}
#displaySpace .plusOne-01::before {
  width: 13%;
  bottom: -18%;
  left: -2%;
}
#bedRoom .onlyImg-01 {
  margin-top: 12%;
}
#paroom .contents .lastBtn {
  width: fit-content;
  margin: 10% auto 5%;
}
#dresser .onlyImg-01 {
  margin-top: 8%;
}
#dresser .onlyImg-01 .pdImg {
  width: 68%;
}
.slick-dots li button:before {
  font-size: 10px;
}
}
/*///// 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);
  }
}