@charset "utf-8";

/* 事業紹介 *------------------------------------------------------------------------*/
.service-about .txt {
  flex: 2.3;
}

.service-about .img {
  flex: 1;
  width: 100%;
  max-width:36rem;
}

.service-flow {
  width:calc(100% - 2rem);
  margin:3rem 0 0 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
  .service-flow {
    width:100%;
    max-width: 35rem;
  }
}

.service-flow-li {
  width: 25%;
  line-height:8rem;
  color: #FFF;
  background:var(--ravio-red);
  text-align: center;
  position: relative;
}

.service-flow-li:not(:first-child):not(:last-child) {
  padding: 0 0 0 1rem;
}

.service-flow-li::before,
.service-flow-li::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
}

.service-flow-li::before {
  border: solid 4.7rem transparent;
  border-right: solid 1.3rem transparent;
  border-left: solid 1.3rem #FFF;
  top: -0.7rem;
  left: 0;
  z-index: 1;
}

.service-flow-li::after {
  border: solid 4.0rem transparent;
  border-left: solid 1rem var(--ravio-red);
  border-right: solid 1rem transparent;
  top: 0;
  right:-2rem;
  z-index: 2;
}

.service-flow-li:nth-child(1)::before {content: none;}

.service-flow-li span {
  font-size: var(--ravio-fs-l);
}

/* システム家具 説明 *------------------------------------------------------------------------*/
.service-description .img {
  flex: 2;
  width:100%;
  max-width: 48rem;
}

.service-description .txt {
  flex: 3;
}

/* 製品紹介 *------------------------------------------------------------------------*/
.service-product .notice-txt span.pc {display: inline;}
.service-product .notice-txt span.sp {display: none;}

@media screen and (max-width: 1024px) {
.service-product .notice-txt span.pc {display: none;}
.service-product .notice-txt span.sp {display: inline;}
}


.service-product .floor-map{
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 88rem;
  aspect-ratio: 860 / 1222;
}

@media screen  and (min-width: 1025px) {

.service-product .floor-map{ margin: -20em 0 0;}

}/* End min 1025 */

.service-product .floor-map .map-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 960 / 1200;
}

.service-product .floor-map ul{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.service-product .floor-map .point{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 153, 51, 0.5);  
  cursor: pointer;  
  z-index: 10;
}

.service-product .floor-map .point span{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 2rem;
  height: 2rem;
  display: block;
  overflow: hidden;
  border-radius: 2rem;
  line-height: 300;  
  background-color: var(--ravio-red);
  aspect-ratio: 1 / 1;
}

.service-product .floor-map .point span::before{
  position: absolute;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  color: #fff;
  font-size: 1.6rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  aspect-ratio: 1 / 1;
}

.service-product .floor-map .point-01 span::before{ content: "1";}
.service-product .floor-map .point-02 span::before{ content: "2";}
.service-product .floor-map .point-03 span::before{ content: "3";}
.service-product .floor-map .point-04 span::before{ content: "4";}
.service-product .floor-map .point-05 span::before{ content: "5";}
.service-product .floor-map .point-06 span::before{ content: "6";}
.service-product .floor-map .point-07 span::before{ content: "7";}

.service-product .floor-map .point::after{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 2rem;
  height: 2rem;
  display: block;
  border: solid 0.1rem var(--ravio-red);
  border-radius: 2rem;
  content: "";
  animation: wave 2s linear infinite;
  z-index: 1;  
}

@keyframes wave {
  0% { transform: scale(1); opacity: 1;}
  50% { transform: scale(2); opacity: 0;}
 100% { transform: scale(1); opacity: 0;}
}


.service-product .floor-map .point-01{
  top: 18%;
  left: 45.6%;
  width: 3.7%;
  aspect-ratio: 32 / 136;
}

.service-product .floor-map .point-02{
  top: 36.1%;
  left: 36.5%;
  width: 2.1%;
  aspect-ratio: 18 / 70;
}

.service-product .floor-map .point-03{
  top: 40.6%;
  left: 69.76%;
  width: 8.8%;
  aspect-ratio: 76 / 55;
}

.service-product .floor-map .point-04{
  top: 42.55%;
  left: 44.88%;
  width: 4.41%;
  aspect-ratio: 38 / 31;
}

.service-product .floor-map .point-05{
  top: 46.64%;
  left: 22.21%;
  width: 3.14%;
  aspect-ratio: 27 / 68;
}

.service-product .floor-map .point-06{
  top: 52.21%;
  left: 39.65%;
  width: 3.25%;
  aspect-ratio: 28 / 25;
}

.service-product .floor-map .point-07{
  top: 65.96%;
  left: 22.67%;
  width: 13.49%;
  aspect-ratio: 116 / 51;
}


.service-product .floor-map-list{
  position: sticky;
  top: 2em;
  left: 75%;
  margin: 0;
  padding: 1em 1.5em 1.5em 1.5em;
  width: 90%;
  max-width: 26rem;
  display: block;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 1.5rem -0.5rem rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(1rem);
  z-index: 100;
}

.service-product .floor-map-list li{
  border-bottom: 0.1rem dotted var(--ravio-gray-3);
}


@media screen  and (max-width: 1024px) {

.service-product .floor-map-list{
  position: sticky;
  top: inherit;
  bottom: 5em;
  left: 0;
  margin: 0;
  padding: 1em .5em 1.5em 1.5em;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  order: 3;
}

.service-product .floor-map-list li{ width: calc(25% - 3rem / 4);}

}/* End max 1024 */

@media screen  and (max-width: 860px) {

.service-product .floor-map-list li{ width: calc(100% / 3 - 2rem / 3);}

}/* End max 860 */


@media screen  and (max-width: 620px) {

.service-product .floor-map-list{
  position: relative;
  bottom: inherit;
  left: 0;
  right: 0;
  margin: -5% auto 0;
  display: block;
}

.service-product .floor-map-list li{ width: 100%;}

}/* End max 620 */



.service-product .floor-map-list span{
  position: relative;
  padding: 1rem 1rem 1rem 3.5rem;
  display: block;
}

.service-product .floor-map-list span::before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  line-height: 2.4rem;
  color: #fff;
  font-size: 1.6rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  aspect-ratio: 1 / 1;
  z-index: 10;
}

.service-product .floor-map-list li:nth-child(1) span::before{ content: "1";}
.service-product .floor-map-list li:nth-child(2) span::before{ content: "2";}
.service-product .floor-map-list li:nth-child(3) span::before{ content: "3";}
.service-product .floor-map-list li:nth-child(4) span::before{ content: "4";}
.service-product .floor-map-list li:nth-child(5) span::before{ content: "5";}
.service-product .floor-map-list li:nth-child(6) span::before{ content: "6";}
.service-product .floor-map-list li:nth-child(7) span::before{ content: "7";}

.service-product .floor-map-list span::after{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--ravio-red);
  border-radius: 2.4rem;
  aspect-ratio: 1 / 1;
  content: "";
  z-index: 1;
}


.service-product .modal .modal-block {
  max-width: 60rem;
  /*height: auto;*/
  height: 60vh;
  height: 60svh;
  max-height: 80rem;
}

.service-product .modal .modal-inner{
  padding-bottom: 2em;
  overflow-y:scroll;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.service-product .modal .modal-inner::-webkit-scrollbar { display: none;}

.service-product .product-description {
  width: 99%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  gap:1rem;
}

.service-product .product-description-title {
  width: 100%;
  font-weight: var(--ravio-fw-bold);
  padding: 0.5em 0;
  border-bottom: 0.1rem dotted var(--ravio-gray-3);
}

.service-product .product-description-img{width:calc(60% - 0.5rem);}
.service-product .product-description-txt{width:calc(40% - 0.5rem);}

@media screen and (max-width: 480px) {
  .service-product .product-description-img,
  .service-product .product-description-txt{width:100%;}
}








/* その他 *------------------------------------------------------------------------*/
.service .flex-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:2rem;
  width: 100%;
}

.service .service-inner {
  width: 100%;
  max-width:88rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}


.service #SERVICE03 .service-inner {
  max-width: 100vw;
  width: 100vw;
  margin-right: calc(50% - 50vw);
}


@media screen and (max-width: 1280px) {

.service #SERVICE03 .service-inner {
  margin: 0 auto;
  width: 100%;
}

}/* End max 1280 */


@media screen and (max-width: 1024px) {

.service #SERVICE03 .service-inner { margin: auto;}

}/* End max 1024 */


.service .flex-div .left{order: 1;}
.service .flex-div .right {order: 2;}

.service .flex-div.align-center{ align-items: center;}

@media screen and (max-width: 480px) {
  .service .flex-div {
    display:unset;
    width: 90%;
    margin: 0 auto;
  }

  .service .txt {
    margin: 0 0 2em 0;
  }
}