sup { vertical-align: super; font-size: 56%; }

/*----------------------------- common parts
-------------------------------*/
/*----------------------------- contents
-------------------------------*/
.cont-section-container { padding-top: 12rem; }
@media screen and (max-width: 864px) { .cont-section-container { padding-top: 8rem; } }

.cate-mv { text-align: center; margin: 4rem auto; position: relative; }
.cate-mv .cate-ttl { width: 100%; max-width: 1056px; position: absolute; left: 50%; top: -20rem; transform: translateX(-50%); z-index: 2; }
.cate-mv .cate-ttl p { width: calc((465/1056)*100%); max-width: 465px; margin: 0 0 0 auto; }
.cate-mv .image { max-height: 480px; overflow-y: hidden; }
.cate-mv .image .img { height: 100%; }
.cate-mv .image .img img { object-fit: cover; object-position: center top; }
@media screen and (max-width: 1056px) { .cate-mv { margin: 2.4rem auto; }
  .cate-mv .cate-ttl { top: -54%; } }
@media screen and (max-width: 864px) { .cate-mv .cate-ttl { top: -62%; }
  .cate-mv .cate-ttl p { width: calc((465/960)*100%); } }
@media screen and (max-width: 600px) { .cate-mv { margin: 24px auto; }
  .cate-mv .cate-ttl { top: -40%; }
  .cate-mv .cate-ttl p { width: calc((465/744)*100%); } }

.intro { margin-bottom: 4rem; }
@media screen and (max-width: 600px) { .intro { margin-bottom: 24px; } }

.modelroom-cont .model_slide .slide .img .cap { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 2.4rem; letter-spacing: 0.075em; }
.modelroom-cont .model_slide .slide .img .cap.in { right: 8px; bottom: 8px; }
.modelroom-cont .model_slide .slide#Kitchen .img .cap.in { right: calc((328/1440)*100%); }
.modelroom-cont .model_slide .slide#Basin .img .cap:nth-of-type(1).in { right: calc((768/1440)*100%); }
.modelroom-cont .model_slide .slide#Basin .img .cap:nth-of-type(2).in { right: calc((112/1440)*100%); }
.modelroom-cont .model_slide .slick-dots { position: static; bottom: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; box-sizing: border-box; }
.modelroom-cont .model_slide .slick-dots * { box-sizing: border-box; }
.modelroom-cont .model_slide .slick-dots li { position: relative; /*width: 75px;
height: 50px;
margin-bottom: 10px;*/ width: calc(92.8%/7); height: auto; margin: 0 1.2% 10px 0; /*border: 2px solid #cccccc;*/ }
.modelroom-cont .model_slide .slick-dots li:nth-of-type(7n), .modelroom-cont .model_slide .slick-dots li:last-of-type { margin-right: 0; }
.modelroom-cont .model_slide .slick-dots li::before, .modelroom-cont .model_slide .slick-dots li::after { content: ""; position: absolute; }
.modelroom-cont .model_slide .slick-dots li::before { display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.72); top: 0; left: 0; }
.modelroom-cont .model_slide .slick-dots li::after { display: inline-block; width: calc(100% - 8px); font-size: 1.4rem; text-align: center; line-height: 1.44; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modelroom-cont .model_slide .slick-dots li img { width: 100%; height: auto; vertical-align: top; }
.modelroom-cont .model_slide .slick-dots li.slick-active::before, .modelroom-cont .model_slide .slick-dots li.slick-active::after { content: none !important; }
@media screen and (max-width: 864px) { .modelroom-cont .model_slide .slick-dots li { width: calc(95.8%/4); margin-right: 1.4%; }
  .modelroom-cont .model_slide .slick-dots li:nth-of-type(4n) { margin-right: 0; } }
@media screen and (max-width: 600px) { .modelroom-cont .model_slide { margin-inline: calc(50% - 50cqi); }
  .modelroom-cont .model_slide .slide .img .cap { font-size: 3.8vw; }
  .modelroom-cont .model_slide .slide .img .cap.in { right: 6px; bottom: 8px; }
  .modelroom-cont .model_slide .slick-dots { padding: 0 7%; }
  .modelroom-cont .model_slide .slick-dots li { width: 32%; margin-right: 2%; }
  .modelroom-cont .model_slide .slick-dots li:nth-of-type(4n), .modelroom-cont .model_slide .slick-dots li:nth-of-type(7n) { margin-right: 2%; }
  .modelroom-cont .model_slide .slick-dots li:nth-of-type(3n) { margin-right: 0; } }

@media screen and (max-width: 600px) { .cont-section-container:has(.model_slide) { container-type: inline-size; } }