@charset "UTF-8";
/* ========================================================
about
======================================================== */
.about{
  padding: 186px 0 176px;
  background-color: #EFDEED;
  position: relative;
  @media (width <= 960px) {
    padding: 50px 0 40px;
  }
  &::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: transparent linear-gradient(114deg, #FFFFFF00 0%, #FFFFFF 54%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    top: 0;
    left: 0;
    @media (width <= 960px) {
      background: transparent linear-gradient(150deg, #f0dfee 0%, #f0dfee 36%, #FFFFFF 74%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    }
  }
  .about_inner{
    margin: 0 auto;
    width: calc(130 * var(--layout-unit));
    min-width: 1000px;
    position: relative;
    z-index: 2;
    @media (width <= 960px) {
      width: 100vw;
      min-width: 100vw;
    }
    .about_img{
      font-size: 0;
      line-height: 0;
      @media (width > 960px) {
        position: absolute;
        z-index: -1;
        right: calc(-10 * var(--layout-unit));
        top: calc(-10 * var(--layout-unit));
        text-align: right;
        width: 800px;
        max-height: calc(100% + (20 * var(--layout-unit)));
        aspect-ratio: 800 / 663;
        img{
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
          margin-left: auto;
        }
      }
      @media (width <= 960px) {
        width: 92vw;
        margin: 20px auto 0;
      }
    }
    .about_ttl{
      font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
      @media (width <= 960px) {
        width: 100%;
        font-size: calc(26 / 375 * 100vw);
        line-height: 1.47;
        text-align: center;
      }
    }
    .about_txt{
      line-height: 1.8;
      margin-top: 50px;
      p:not(:first-of-type){
        margin-top: 1.5em;
      }
      @media (width <= 960px) {
        text-align: center;
        margin-top: 30px;
      }
    }
  }
}
/* ========================================================
map
======================================================== */
.map{
  padding: 90px 0;
  @media (width <= 960px) {
    padding: 50px 0;
  }
  .map_inner{
    margin: 0 auto;
    text-align: center;
    width: 1000px;
    @media (width <= 960px) {
      width: calc(357 / 375 * 100vw);
    }
    .map_ttl{
      font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
      @media (width <= 960px) {
        font-size: calc(26/ 375 * 100vw);
      }
    }
    .map_lead{
      color: #1C3A60;
      font-size: clamp(22px, calc(28 / 1920 * 100vw), 35px);
      margin-top: 20px;
      @media (width <= 960px) {
        font-size: calc(20 / 375 * 100vw);
        margin-top: calc(2 * var(--layout-unit));
      }
      span{
        display: inline-block;
        position: relative;
        font-weight: bold;
        &::before,&::after{
          content: "";
          display: block;
          position: absolute;
          background-color: #1D3A60;
          height: 1px;
          width: 1em;
          top: 50%;
        }
        &::before{
          left: -1.3em;
          transform: rotate(70deg);
        }
        &::after{
          right: -1.3em;
          transform: rotate(-70deg);
        }
      }
    }
    .map_txt{
      margin-top: 1em;
    }
    .map_tab{
      margin-top: 40px;
      display: flex;
      justify-content: center;
      gap: 10px;
      @media (width <= 960px) {
        margin-top: calc(1.3 * var(--layout-unit));
        gap: 2vw;
      }
      .map_tab-btwrap{
        position: relative;
        border-radius: 9999px;
        overflow: hidden;
        button{
          background-color: #D6D6D6;
          color: var(--color-white);
          transition: transform 0.3s ease;
          font-weight: bold;
          border-radius: 9999px;
          font-size: 18px;
          width: 240px;
          height: 72px;
          line-height: 72px;
          padding-right: 83px;
          @media (width <= 960px) {
            font-size: 3.8vw;
            width: 41vw;
            height: 16.15vw;
            line-height: 16.15vw;
            padding-right: 11.8vw;
          }
        }
      }
      /* icon */
      .map_tab-btwrap .btn-icon {
        position: absolute;
        pointer-events: none;
        bottom: calc(50% - 17.5px);
        right: 24px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid var(--color-white);
        transition: transform 0.3s ease;
        @media (width <= 960px) {
          bottom: calc(50% - 17.5px);
          right: 5vw;
          width: 7.95vw;
          height: 7.95vw;
        }
      }
      .map_tab-btwrap.active .btn-icon,
      .map_tab-btwrap:hover .btn-icon{
        background: var(--color-white);
      }
      .map_tab-btwrap .btn-icon svg path {
        fill: var(--color-white);
        transition: fill 0.3s ease;
      }
      .map_tab-btwrap:nth-of-type(1):hover,
      .map_tab-btwrap.active:nth-of-type(1){
        button{
          background-color: var(--color-purple);
        }
        .btn-icon svg path {
          fill: var(--color-purple);
        }
      }
      .map_tab-btwrap:nth-of-type(2):hover,
      .map_tab-btwrap.active:nth-of-type(2){
        button{
          background-color: var(--color-pink);
        }
        .btn-icon svg path {
          fill: var(--color-pink);
        }
      }
    }
    .map_tab-body{
      .map_wrap{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #fff;
        .map_inner{
          position: relative;
          width: 100%;
          /* heightは下 */
          border: solid 1px var(--color-pink);
          overflow: hidden;
          .map-zoom{
            display: flex;
            position: absolute;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            transition-property: width;
            transition: 0.1s linear;
            left: 0;
            top: 0;
            > img {
              width: 100%;
              height: auto;
              max-width: none;
              max-height: none;
              vertical-align: bottom;
            }
            &.zoom1{width: 100%;height: 100%;}
            &.zoom2{width: 150%;height: 150%;}
            &.zoom3{width: 225%;height: 225%;}
            &.zoom4{width: 337.5%;height: 337.5%;}
            .pin-kansai{
              position: absolute;
              width: 22%;
              left: 52%;
              top: 46%;
              transition-property: transform;
              transition: 0.1s linear;
              @media (width <= 960px) {
                width: 40vw;
                left: 42%;
                top: 35%;
              }
              a{
                display: block;
              }
            }
            @media (width > 960px) {
              &.zoom1 .pin-kansai{transform: scale(1);transform-origin: 50% 100%;}
              &.zoom2 .pin-kansai{transform: scale(0.66);transform-origin: 50% 100%;}
              &.zoom3 .pin-kansai{transform: scale(0.5);transform-origin: 50% 100%;}
              &.zoom4 .pin-kansai{transform: scale(0.4);transform-origin: 50% 100%;}
            }
            @media (width <= 960px) {
              &.zoom1 .pin-kansai{left: 42%;top: 35%;}
              &.zoom2 .pin-kansai{left: 49%;top: 43%;}
              &.zoom3 .pin-kansai{left: 53.5%;top: 47.5%;}
              &.zoom4 .pin-kansai{left: 56.5%;top: 51%;}
            }
          }
        }
        .button_container{
          display: flex;
          justify-content: center;
          gap: 0 7px;
          margin-top: 10px;
          a{
            display: block;
            width: 34px;
          }
        }
      }
      
      #area-kansai.map_inner{height: 942px;}
      #area-kantou.map_inner{height: 715px;}
      
      @media (width <= 960px) {
        #area-kansai.map_inner{height: 86.4vw;}
        #area-kantou.map_inner{height: 65.6vw;}
      }
    }
  }
}
.popupumeda_img{
  font-size: 0;
  line-height: 0;
  width: 100%;
  img{
    height:auto;
    width: auto;
    max-height:  calc(100vh - (20 * var(--layout-unit)));
    max-width: 100%;
    @media (width <= 960px) {
      max-height: calc(100vh - (4.8 * var(--layout-unit)));
    }
  }
}
/* ========================================================
workplace
======================================================== */
.workplace{
  .folding-body{
    background: #EFDEED;
  }
}
.workplace_headline{
  text-align: center;
  background: #EFDEED;
  padding: 40px 30px 0;
  .workplace_headline_inner{
    width: clamp(1050px, calc(599.99999999999994px + 52.083333333333336vw), 1550px);
    margin: 0 auto;
    .workplace_headline_ttl{
      font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
    }
    .workplace_headline_txt{
      margin-top: 46px;
    }
  }
  @media (width <= 960px) {
    width: 100%;
    padding: 30px calc(0.85 * var(--layout-unit)) 0;
    .workplace_headline_inner{
      width: 100%;
    }
    .workplace_headline_ttl{
      font-size: calc(30 / 375 * 100vw);
      line-height: 1.27;
    }
    .workplace_headline_txt{
      margin-top: 20px;
      text-align: left;
    }
  }
}
/*workplace_headline_btn 
----------------------- */
.workplace_headline_btn {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
	gap: calc(2 * var(--layout-unit));
  margin-top: 50px;
  @media (width <= 960px) {
    margin: 0;
    gap: calc(0.5 * var(--layout-unit));
  }
}
.workplace_headline_btn-box{
  width: calc((100% - (6 * var(--layout-unit))) / 4);
  @media (width <= 1360px) {
    width: calc((100% - (4 * var(--layout-unit))) / 3);
  }
  @media (width <= 960px) {
    width: calc((100% - (0.5 * var(--layout-unit))) / 2);
  }
}
.workplace_headline_btn-box a {
	display: flex;
	flex-direction: column;
	justify-content: center;
  align-items: flex-start;
  text-align: left;
	text-decoration: none;
	padding: 1.5em 3em 1.5em 1em;
	width: 100%;
  height: 100%;
	border-radius: calc(1 * var(--layout-unit));
	color: var(--color-white);
	font-weight: 700;
  font-size: clamp(17px, calc(22 / 1920 * 100vw), 26px);
	line-height: 1.1;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: box-shadow 0.3s ease;
  @media (width <= 960px) {
    font-size: calc(14 / 375 * 100vw);
    padding: 1.5em 2.5em 1.5em 1em;
  }
  &.font-s{
    @media (width > 960px) {
      font-size: 132%;
    }
    @media (width <= 960px) {
      font-size: 92%;
    }

  }
}
/* hover */
.workplace_headline_btn a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: -1;
}
.workplace_headline_btn a:hover::before {
	width: 100%;
}
/* icon */
.workplace_headline_btn .btn-icon {
	position: absolute;
	bottom: calc(50% - 0.8em);
	right: 1em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	border: 1px solid var(--color-white);
	transition: transform 0.3s ease;
  transform: rotate(90deg);
  @media (width <= 960px) {
    right: 0.5em;
  }
}
.workplace_headline_btn a:hover .btn-icon {
	background: var(--color-white);
}
.workplace_headline_btn .btn-icon svg path {
	fill: var(--color-white);
	transition: fill 0.3s ease;
}
.workplace_headline_btn-box a {
	background-image: var(--grad);
}
.workplace_headline_btn-box a::before {
	background-image: var(--grad-hover);
}
.workplace_headline_btn-box a:hover .btn-icon svg circle {
	stroke: var(--color-white);
}
.workplace_headline_btn-box a:hover .btn-icon svg path {
	fill: var(--color-pink-hover);
}
.folding_detail{
    hr{
      border: none;
      border-top:solid 1px #DEDEDE;
      margin: 40px 0;
    }
}
.workplace_detail-mv{
  font-size: 0;
  line-height: 0;
  display: block;
  overflow: hidden;
  border-radius: 30px;
  margin-bottom: 50px;
  @media (width <= 960px) {
    border-radius: 20px;
    margin-bottom: 30px;
  }
}
.workplace_detail_lead{
  line-height: 1.8;
  margin-top: 1.8em;
  @media (width <= 960px) {
    text-align: left;
  }
}
.workplace_link{
  margin-top: 40px;
  @media (width <= 960px) {
    margin-top: 30px;
  }
}
.workplace_detail_introduction-unit{
  display:flex;
  -ms-flex-pack:distribute;
  justify-content:space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px calc(6 * var(--layout-unit)) 0;
  @media (width <= 1360px) {
    margin: 50px 0 0;
  }
  @media (width <= 960px) {
    margin: 30px 0 0;
  }
  .workplace_detail_introduction-img{
    font-size: 0;
    line-height: 0;
    display: block;
    overflow: hidden;
    width: calc(50% + (3 * var(--layout-unit)));
    border-radius: 30px;
    @media (width <= 960px) {
      width: 100%;
      border-radius: 20px;
    }
  }
  .workplace_detail_introduction-detail{
    text-align: left;
    width: calc(50% - (10 * var(--layout-unit)));
    @media (width <= 960px) {
      width: 100%;
      text-align: center;
    }
    .workplace_detail_introduction-logo{
      font-size: 0;
      line-height: 0;
      img{
        width: auto;
        height: auto;
      }
      @media (width <= 960px) {
        margin-top: 20px;
        img{
          margin: 0 auto;
        }
      }
    }
    .workplace_detail_introduction-lead{
      font-weight: bold;
      line-height: 1.3;
      margin-top: 0.6em;
      font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
      strong{
        font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
        line-height: 1;
      }
      @media (width <= 960px) {
        font-size: calc(20 / 375 * 100vw);
        margin-top: 1em;
        strong{
          font-size: calc(30 / 375 * 100vw);
        }
      }
    }
    .workplace_detail_introduction-subimg{
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      display: block;
      width: 256px;
      max-width: 100%;
      border-radius: 30px;
      margin-top: 20px;
      @media (width <= 960px) {
        width: 100%;
        border-radius: 20px;
      }
    }
    .workplace_detail_introduction-txt{
      font-size: clamp(14px, calc(17 / 1920 * 100vw), 25px);
      line-height: 2;
      margin-top: 0.8em;
      @media (width <= 960px) {
        font-size: calc(14 / 375 * 100vw);
        text-align: left;
        margin-top: 1em;
      }
    }
  }
}

/* rental
----------------------- */
.workplace_detail_rental{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(10 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
      }
    }
    .workplace_detail_rental_pointlist-wrap{
      margin: 40px calc(12.5 * var(--layout-unit)) 0;
      @media (width <= 1500px) {
        margin: 40px calc(6 * var(--layout-unit)) 0;
      }
      @media (width <= 1200px) {
        margin: 40px calc(2 * var(--layout-unit)) 0;
      }
      @media (width <= 960px) {
        margin: 30px 20vw 0 0;
        overflow: inherit;
      }
      .workplace_detail_rental_pointlist{
        @media (width > 960px) {
          display:flex;
          -ms-flex-pack:distribute;
          justify-content:space-between;
          align-items: stretch;
          flex-wrap: wrap;
        }
        .swiper-slide{
          height: auto;
          width: calc((100% - 40px) / 3);
          border-radius: 30px;
          padding: 40px 40px 30px;
          @media (width <= 1360px) {
            padding: 40px 20px 30px;
          }
          @media (width <= 960px) {
            border-radius: 20px;
            padding: 25px 17px;
          }
          &:nth-of-type(1){background-color: #FCE5E3}
          &:nth-of-type(2){background-color: #F7E4CB}
          &:nth-of-type(3){background-color: #D5EBE6}
          .workplace_detail_rental_pointlist-icon{
            font-size: 0;
            line-height: 0;
            margin: 0 auto;
            width: calc(12 * var(--layout-unit));
            @media (width <= 960px) {
              width: 20vw;
            }
          }
          .workplace_detail_rental_pointlist-lead{
            font-weight: bold;
            margin-top: 10px;
            font-size: clamp(22px, calc(29 / 1920 * 100vw), 36px);
            @media (width <= 960px) {
              font-size: calc(18 / 375 * 100vw);
              margin-top: 0;
            }
          }
          .workplace_detail_rental_pointlist-txt{
            text-align: left;
            margin-top: 20px;
            font-size: clamp(12px, calc(18 / 1920 * 100vw), 25px);
            @media (width <= 960px) {
              font-size: calc(13 / 375 * 100vw);
              margin-top: 10px;
            }
          }
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto 0;
        @media (width <= 960px) {
          margin: calc(1.5 * var(--layout-unit)) -20vw 0 0;
          width: calc(100% + 20vw);
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #DFDFDF;
      }
      .swiper-pagination-bullet-active {
        background-color: #707070;
      }
    }
    .workplace_detail_rental_building{
      border: 10px solid #E2E7F0;
      border-radius: 30px;
      padding: 40px;
      margin-top: 70px;
      @media (width <= 960px) {
        border: calc(0.5 * var(--layout-unit)) solid #E2E7F0;
        border-radius: 20px;
        padding: calc(1.5 * var(--layout-unit));
        margin-top: 35px;
      }
      .workplace_detail_rental_building-ttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_rental_buildinglist{
        @media (width > 960px) {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 40px 30px;
          margin: 50px calc(17 * var(--layout-unit)) 0;
          width: calc(100% - (30 * var(--layout-unit)));
          @media (width <= 1360px) {
            margin: 50px calc(10 * var(--layout-unit)) 0;
            width: calc(100% - (20 * var(--layout-unit)));
          }
          @media (width <= 1260px) {
            margin: 50px calc(5 * var(--layout-unit)) 0;
            width: calc(100% - (10 * var(--layout-unit)));
          }
        }
        @media (width <= 960px) {
          margin-top: 25px;
        }
        .swiper-slide{
          @media (width > 960px) {
            display:flex;
            -ms-flex-pack:distribute;
            justify-content:space-between;
            align-items: center;
            flex-wrap: wrap;
            width: calc((100% - 30px) / 2);
            max-width: 520px;
          }
          .workplace_detail_rental_buildinglist-img{
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            border-radius: 20px;
            width: calc(19 * var(--layout-unit));
            @media (width <= 960px) {
              border-radius: 10px;
              width: 48vw;
              margin: 0 auto;
            }
          }
          .workplace_detail_rental_buildinglist-body{
            text-align: left;
            width: calc(100% - (21 * var(--layout-unit)));
            @media (width <= 960px) {
              width: 100%;
              margin-top: 20px;
            }
            .workplace_detail_rental_buildinglist-name{
              font-weight: bold;
              border-bottom: solid 1px #C9C9C9;
              padding-bottom: 0.8em;
              margin-bottom: 0.8em;
              font-size: clamp(12px, calc(18 / 1920 * 100vw), 25px);
              @media (width <= 960px) {
                font-size: calc(14 / 375 * 100vw);
              }
            }
            .workplace_detail_rental_buildinglist-txt{
              font-size: clamp(11px, calc(15 / 1920 * 100vw), 22px);
              @media (width <= 960px) {
                font-size: calc(13 / 375 * 100vw);
              }
            }
          }
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto 0;
        @media (width <= 960px) {
          margin: calc(1.5 * var(--layout-unit)) auto 0;
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #DFDFDF;
      }
      .swiper-pagination-bullet-active {
        background-color: #707070;
      }
    }
    .workplace_detail_rental_building-bnr{
      a{
        display: inline-block;
        font-size: 0;
        line-height: 0;
        margin: 35px auto 0;
        transition: opacity 0.6s;
        &:hover{
          opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
        }
      }
    }
    .workplace_detail_rental_building-caption{
      color: var(--color-pink);
      font-size: clamp(12px, calc(15 / 1920 * 100vw), 22px);
      margin-top: 20px;
      font-weight: bold;
      @media (width <= 960px) {
        margin-top: 15px;
        font-size: calc(12 / 375 * 100vw);
        text-align: left;
      }
    }
  }
}
/* conference
----------------------- */
.workplace_detail_conference{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(20 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(10 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
        &::before{
          margin-left: -1.5em;
        }
        &::after{
          margin-right: -1.5em;
        }
      }
    }
    .workplace_detail_conference_case{
      background: transparent linear-gradient(113deg, #CD9B57 0%, #F03B6B 54%, #E09B00 100%) 0% 0% no-repeat padding-box;
      border-radius: 30px;
      padding: 40px calc(9.5 * var(--layout-unit));
      margin-top: 35px;
      @media (width <= 1360px) {
        padding: 20px;
      }
      .workplace_detail_conference_case-ttl span{
        color: #fff;
        border-top:solid 1px #fff;
        border-bottom:solid 1px #fff;
        display: inline-block;
        padding: 0.3em 0;
        font-size: clamp(17px, calc(24 / 1920 * 100vw), 31px);
        @media (width <= 1360px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_conference_case_list{
        @media (width > 960px) {
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          flex-wrap: wrap;
          gap: 20px;
          margin-top: 30px;
        }
        @media (width <= 960px) {
          margin-top: 20px;
        }
        .swiper-slide{
          background-color: #fff;
          text-align: left;
          border-radius: 10px;
          width: calc((100% - 20px) / 2);
          height: auto;
          padding: 20px 30px;
          @media (width <= 960px) {
            width: 100%;
          }
          .workplace_detail_conference_case_list-number{
            position: relative;
            span{
              font-family: var(--font-Arial);
              color: var(--color-pink);
              background-color: #fff;
              font-weight: bold;
              display: inline-block;
              padding-right: 1.5em;
              position: relative;
              z-index: 2;
              @media (width <= 960px) {
                font-size: calc(16 / 375 * 100vw);
              }
            }
            &::before{
                content: "";
                display: block;
                position: absolute;
                left: 0;
                top: 50%;
                width: 100%;
                height: 1px;
                background-color: #CD5792;
              }
          }
          .workplace_detail_conference_case_list-ttl{
            font-size: clamp(14px, calc(18 / 1920 * 100vw), 25px);
            @media (width <= 960px) {
              font-size: calc(14 / 375 * 100vw);
            }
          }
          .workplace_detail_conference_case_list-txt{
            line-height: 2;
            @media (width <= 960px) {
              font-size: calc(12 / 375 * 100vw);
            }
          }
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto 0;
        @media (width <= 960px) {
          margin: calc(1.5 * var(--layout-unit)) auto 0;
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #DFDFDF;
      }
      .swiper-pagination-bullet-active {
        background-color: #fff;
      }
    }
    .workplace_detail_conference_property{
      margin-top: 60px;
      @media (width <= 960px) {
        margin-top: 40px;
      }
      .workplace_detail_conference_property-ttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_conference_property_list{
        display:flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 30px;
        margin: 30px calc(3.5 * var(--layout-unit)) 0;
        @media (width <= 960px) {
          gap: 10px;
          margin: 20px 0 0;
        }
        .workplace_detail_conference_property_list-box{
          border-radius: 20px;
          padding: 30px calc(5 * var(--layout-unit));
          width: calc((100% - 30px) / 2);
          @media (width <= 960px) {
            width: 100%;
            padding: 30px;
          }
          &:nth-of-type(2n-1){
            background-color: #F4F6F9;
          }
          &:nth-of-type(2n){
            background-color: #F9F8F4;
          }
          .workplace_detail_conference_property_list-img{
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            border-radius: 30px;
            margin: 0 calc(1 * var(--layout-unit));
            @media (width <= 960px) {
              border-radius: 20px;
              margin: 0;
            }
          }
          .workplace_detail_conference_property_list-logo{
            span{
              background-color: #fff;
              font-size: 0;
              line-height: 0;
              display: inline-block;
              border-radius: 9999px;
              max-height: 62px;
              max-width: 80%;
              padding: 8px 30px;
              transform: translate(0, -50%);
              img{
                object-fit: contain;
              }
              @media (width <= 960px) {
                padding: 5px 30px;
                max-height: 10.25vw;
              }
            }
          }
          .workplace_detail_conference_property_list-name{
            font-size: clamp(16px, calc(22 / 1920 * 100vw), 37px);
            margin-top: -1em;
            @media (width <= 960px) {
              font-size: calc(16 / 375 * 100vw);
              margin-top: -0.5em;
            }
          }
          .workplace_detail_conference_property_list-txt{
            font-size: clamp(11px, calc(15 / 1920 * 100vw), 22px);
            margin-top: 1em;
            text-align: left;
            line-height: 2;
            @media (width <= 960px) {
              font-size: calc(13 / 375 * 100vw);
            }
          }
        }
      }
    }
  }
}
/* lounge
----------------------- */
.workplace_detail_lounge{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(15 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
      }
    }
    .workplace_detail_lounge_wellco{
      .workplace_detail_lounge_wellco-headline{
        text-align: center;
        .workplace_detail_lounge_wellco-ttl{
          background-color: #FFEDED;
          font-weight: bold;
          padding: 0.6em;
          border-radius: 20px;
          font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);margin-top: 40px;
          @media (width <= 960px) {
            font-size: calc(22 / 375 * 100vw);
            border-radius: 10px;
          }
          span{
            display: block;
            font-size: 50%;
            line-height: 1.5;
          }
          img{
            width: 256px;
            height: auto;
            margin: 15px auto 0;
          }
        }
        .workplace_detail_lounge_woker-lead{
          margin-top: 40px;
          @media (width <= 960px) {
            margin-top: 1em;
            text-align: left;
          }
        }
      }
      @media (width > 960px) {
        .wellco_service{
          margin: 0 calc(20 * var(--layout-unit));
          .wellco_service_box{
            width: calc((100% - 60px) / 4);
          }
        }
      }

    }
    .workplace_detail_lounge_woker{
      .workplace_detail_lounge_woker-headline{
        text-align: center;
        .workplace_detail_lounge_woker-ttl{
          color: var(--color-white);
          background-color: var(--color-deep-blue);
          font-weight: bold;
          padding: 0.6em;
          border-radius: 20px;
          font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
          @media (width <= 960px) {
            font-size: calc(22 / 375 * 100vw);
            border-radius: 10px;
          }
          span{
            display: block;
            font-size: 50%;
            line-height: 1;
          }
        }
        .workplace_detail_lounge_woker-lead{
          margin-top: 40px;
          @media (width <= 960px) {
            margin-top: 1em;
            text-align: left;
          }
        }
      }
      .workplace_detail_lounge_woker-subttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_lounge_photolist{
        @media (width > 960px) {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 40px calc(5 * var(--layout-unit)) 0;
          width: calc(100% - (10 * var(--layout-unit)));
          gap: 40px 30px;
        }
        .swiper-slide{
          width: calc((100% - 60px) / 3);
          display: block;
          .workplace_detail_lounge_photolist-img{
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            border-radius: 30px;
            @media (width <= 960px) {
              border-radius: 20px;
            }
          }
          .workplace_detail_lounge_photolist-txt{
            font-weight: bold;
            margin-top: 10px;
            font-size: clamp(16px, calc(22 / 1920 * 100vw), 37px);
            span{
              font-size: clamp(12px, calc(16 / 1920 * 100vw), 23px);
              font-weight: normal;
              display: block;
            }
            @media (width <= 960px) {
            }
          }
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto 0;
        @media (width <= 960px) {
          margin: calc(2 * var(--layout-unit)) auto 0;
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #DFDFDF;
      }
      .swiper-pagination-bullet-active {
        background-color: #707070;
      }
      .workplace_detail_lounge_umeda{
        margin-top: 50px;
        @media (width <= 960px) {
          margin-top: 30px;
        }
        .workplace_detail_lounge_umeda-lead{
          text-align: left;
          margin: 30px calc(35 * var(--layout-unit)) 0;
          @media (width <= 1360px) {
            margin: 30px calc(15 * var(--layout-unit)) 0;
          }
          @media (width <= 960px) {
            margin: 20px 0 0;
          }
        }
        .workplace_detail_lounge_photolist{
          @media (width <= 960px) {
            margin-top: 40px;
          }
        }
        
      }
      .workplace_detail_lounge_other{
        margin-top: 50px;
        border-top:solid 1px var(--color-pink);
        padding-top: clamp(70px, calc(90 / 1920 * 100vw), 100px);
        position: relative;
        @media (width <= 960px) {
          margin-top: 30px;
        };
        @media (width <= 960px) {
          margin-top: 30px;
          padding-top: calc(6 * var(--layout-unit));
        }
        &::before{
          content: "OFFICE LIST";
          font-family: var(--font-Arial);
          font-weight: bold;
          display: block;
          width: 100%;
          z-index: -1;
          line-height: 1;
          opacity:.4;filter: alpha(opacity=40);-ms-filter: "alpha(opacity=40)";
          color: #E2E8F0;
          font-size: clamp(100px, calc(120 / 1920 * 100vw), 130px);
          position: absolute;
          top: 30px;
          left: 50%;
          transform: translate(-50%, 0);
          @media (width <= 960px) {
            font-size: calc(44 / 375 * 100vw);
            width: 100vw;
          }
        }
        .workplace_detail_lounge_photolist{
          @media (width <= 960px) {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
/* ons
----------------------- */
.workplace_detail_ons{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(15 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
      }
    }
    .workplace_detail_introduction-logo img{
      width: 191px;
      @media (width <= 960px) {
        width: calc(160 / 375 * 100vw);
      }
    }
    .workplace_detail_ons_point{
      .workplace_detail_ons_point-ttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_ons_point-list{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        list-style: none;
        counter-reset: chapter;
        margin: 45px calc(-1.5 * var(--layout-unit)) 0;
        gap: 10px;
        @media (width <= 1360px) {
          margin: 45px 0 0;
        }
        @media (width <= 960px) {
          margin: 30px 0 0;
        }
        .workplace_detail_ons_point-box{
          background-color: #EDEDED;
          display:flex;
          -ms-flex-pack:distribute;
          justify-content:space-between;
          align-items: center;
          flex-wrap: wrap;
          border-radius: 10px;
          width: calc((100% - 30px) / 4);
          padding: 16px;
          @media (width <= 1360px) {
            width: calc((100% - 30px) / 3);
          }
          @media (width <= 960px) {
            width: 100%;
          }
          .workplace_detail_ons_point-ic{
            font-size: 0;
            line-height: 0;
            width: calc(10 * var(--layout-unit));
          }
          .workplace_detail_ons_point-txt{
            font-weight: bold;
            text-align: left;
            font-size: clamp(14px, calc(19 / 1920 * 100vw), 26px);
            width: calc(100% - (10 * var(--layout-unit)) - 0.8em);
            &::before{
              counter-increment: chapter;
              content: "POINT "counter(chapter, decimal-leading-zero);
              font-family:  var(--font-Arial);
              color: #BAA254;
              display: block;
              font-size: 84%;
            }
            @media (width <= 960px) {
              font-size: calc(19 / 375 * 100vw);
            }
          }
        }
      }
    }
    .workplace_detail_ons_price{
      position: relative;
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      margin: 40px calc(-3 * var(--layout-unit)) 0;
      border: 10px solid #EFDEED;
      border-radius: 30px;
      padding: 40px 40px 40px 80px;
      @media (width <= 1460px) {
        margin: 40px calc(-1.5 * var(--layout-unit)) 0;
        padding: 80px 20px 20px;
      }
      @media (width <= 960px) {
        border: 5px solid #EFDEED;
        border-radius: 20px;
        margin: 30px auto 0;
        padding: calc(60 / 375 * 100vw) 20px 20px;
      }
      &::before{
        content: "PRICE";
        display: block;
        font-family: var(--font-Arial);
        font-weight: bold;
        position: absolute;
        color: #EFDEED;
        opacity:.8;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)";
        font-size: clamp(74px, calc(81 / 1920 * 100vw), 88px);
        line-height: 1;
        @media (width > 1460px) {
          transform: rotate(90deg);
          left: -0.9em;
          top: calc(50% - 0.5em);
        }
        @media (width <= 1460px) {
          top: 0;
          left: calc(50% - 2.5em);
          width: 5em;
          text-align: center;
        }
      }
      .workplace_detail_ons_price-headline{
        @media (width <= 1460px) {
          width: 100%;
        }
        .workplace_detail_ons_price-ttl{
          font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
          line-height: 1.6;
          @media (width <= 960px) {
            font-size: calc(20 / 375 * 100vw);
          }
        }
        .workplace_detail_ons_price-point{
          background-color: var(--color-purple);
          color: var(--color-white);
          font-weight: bold;
          border-radius: 9999px;
          display: inline-block;
          padding: 0.3em 1.5em;
          margin-top: 10px;
        }
      }
      .workplace_detail_ons_price-body{
        border-radius: 20px;
        background-color: #EFDEED;
        padding: calc(5 * var(--layout-unit));
        width: calc(50% + (2 * var(--layout-unit)));
        @media (width <= 1460px) {
          width: 80%;
          margin: 20px auto 0;
        }
        @media (width <= 960px) {
          width: 100%;
          padding: calc(2 * var(--layout-unit));
          margin-top: 15px;
        }
        text-align: left;
        .workplace_detail_ons_price-floor{
          display: flex;
          justify-content:space-between;
          flex-wrap: wrap;
          li{
            min-width: 35%;
            padding: 0 0.5em 0 1em;
            position: relative;
            &::before{
              content: "・";
              display: inline-block;
              position: absolute;
              left: 0;
              top: 0;
              width: 1em;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
/* onsoffice
----------------------- */
.workplace_detail_onsoffice{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(15 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
        &::before{
          margin-left: -1.5em;
        }
        &::after{
          margin-right: -1.5em;
        }
      }
    }
    .workplace_detail_introduction-logo img{
      width: 220px;
      @media (width <= 960px) {
        width: calc(170 / 375 * 100vw);
      }
    }
    .workplace_detail_onsoffice_featurelist{
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      margin: 70px calc(6 * var(--layout-unit)) 0;
      @media (width <= 1360px) {
        margin: 70px 0 0;
      }
      @media (width <= 960px) {
      }
      .workplace_detail_onsoffice_featurelist-box{
        width: calc((100% - (6 * var(--layout-unit))) / 3);
        @media (width <= 960px) {
          width: 100%;
          &:not(:first-of-type){
            margin-top: 35px;
          }
        }
        .workplace_detail_onsoffice_featurelist-img{
          font-size: 0;
          line-height: 0;
          overflow: hidden;
          border-radius: 30px;
          @media (width <= 960px) {
            border-radius: 20px;
          }
        }
        .workplace_detail_onsoffice_featurelist-number{
          font-weight: bold;
          font-family: var(--font-Arial);
          background: transparent linear-gradient(90deg, #CD5792 0%, #933E9D 54%, #713BCC 100%) 0% 0% no-repeat padding-box;
          -webkit-background-clip: text;
          background-clip: text;
          position: relative;
          z-index: 2;
          color: transparent;
          font-size: clamp(18px, calc(22 / 1920 * 100vw), 29px);
          margin-top: -1.3em;
          strong{
            line-height: 1;
            font-size: clamp(35px, calc(42 / 1920 * 100vw), 49px);
            vertical-align: text-bottom;
            font-weight: 600;
            margin-left: 0.3em;
          }
          @media (width <= 960px) {
            font-size: calc(18 / 375 * 100vw);
            strong{
              font-size: calc(32 / 375 * 100vw);
            }
          }
        }
        .workplace_detail_onsoffice_featurelist-ttl{
          font-size: clamp(18px, calc(24 / 1920 * 100vw), 31px);
          margin-top: 20px;
          @media (width <= 960px) {
            font-size: calc(20 / 375 * 100vw);
          }
        }
        .workplace_detail_onsoffice_featurelist-txt{
          margin-top: 25px;
          line-height: 2.1;
          text-align: left;
        }
      }
    }
  }
}
/* telecube
----------------------- */
.workplace_detail_telecube{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(15 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
      }
    }
    .workplace_detail_telecube_setting{
      background-color: #F5F7FA;
      padding: 0.9em;
      text-align: center;
      font-weight: bold;
      font-size: clamp(12px, calc(14 / 1920 * 100vw), 21px);
      margin: 30px auto 0;
      width: calc(48.8 * var(--layout-unit));
      border-radius: 20px;
      @media (width <= 960px) {
        text-align: left;
        width: 100%;
        padding: 30px;
        margin: 20px auto 0;
        font-size: calc(13 / 375 * 100vw);
        h4{
          text-align: center;
        }
      }
    }
    .workplace_detail_telecube_photolist-wrap{
      @media (width <= 960px) {
        margin: 30px 20vw 0 0;
        overflow: inherit;
      }
      .workplace_detail_telecube_photolist{
        @media (width > 960px) {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 40px calc(12.8 * var(--layout-unit)) 0;
          width: calc(100% - (25.6 * var(--layout-unit)));
          gap: 40px 30px;
        }
        .swiper-slide{
          width: calc((100% - 60px) / 3);
          display: block;
          font-size: 0;
          line-height: 0;
          overflow: hidden;
          border-radius: 30px;
          @media (width <= 960px) {
            border-radius: 20px;
          }
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto 0;
        @media (width <= 960px) {
          margin: calc(3 * var(--layout-unit)) -20vw 0 0;
          width: calc(100% + 20vw);
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #DFDFDF;
      }
      .swiper-pagination-bullet-active {
        background-color: #707070;
      }
    }
    .workplace_detail_telecube_function{
      background-color: #E2ECF0;
      padding: 40px calc(8.5 * var(--layout-unit));
      border-radius: 20px;
      @media (width <= 960px) {
        padding: 30px;
        margin-top: 30px;
      }
      .workplace_detail_telecube_function-ttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .workplace_detail_telecube_function_list{
        @media (width > 960px) {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 40px calc(5 * var(--layout-unit)) 0;
          width: calc(100% - (10 * var(--layout-unit)));
          gap: 40px 30px;
          .swiper-slide{
            width: calc((100% - 90px) / 4);
          }
        }
        @media (width <= 960px) {
          margin-top: 20px;
        }
        .workplace_detail_telecube_function_list-img{
          display: block;
          font-size: 0;
          line-height: 0;
          text-align: center;
          img{
            width: 200px;
            max-width: 100%;
            margin: 0 auto;
          }
        }
        .workplace_detail_telecube_function_list-lead{
          font-size: clamp(16px, calc(22 / 1920 * 100vw), 29px);
          text-align: center;
          margin-top: 0.5em;
        }
        .workplace_detail_telecube_function_list-txt{
          margin-top: 1em;
          line-height: 1.8;
          text-align: left;
        }
      }
      .swiper-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 30px auto 0;
        @media (width <= 960px) {
          margin: calc(3 * var(--layout-unit)) auto calc(2 * var(--layout-unit));
        }
      }
      .swiper-pagination-bullet {
        display: inline-block;
        border-radius: 9999px;
        margin: 0 0.5em;
        width: 0.5em;
        height: 0.5em;
        cursor: pointer;
        transition: 0.8s;
        vertical-align: top;
        background-color: #fff;
      }
      .swiper-pagination-bullet-active {
        background-color: #707070;
      }
    }
    
  }
}
/* regus
----------------------- */
.workplace_detail_regus{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(19 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(10 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(22 / 375 * 100vw) !important;
      }
    }
    .workplace_detail_regus-unit{
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 40px;
      .workplace_detail_regus-img{
        overflow: hidden;
        border-radius: 30px;
        @media (width <= 960px) {
          border-radius: 20px;
        }
        &:not(:first-of-type){
          margin-top: 20px;
        }
      }
      > .workplace_detail_regus-img{
        width: 50%;
        @media (width <= 960px) {
          width: 100%;
        }
      }
      .workplace_detail_regus-body{
        text-align: left;
        width: calc(50% - (4 * var(--layout-unit)));
        @media (width <= 960px) {
          width: 100%;
          margin-top: 20px;
        }
        .workplace_detail_regus-logo{
          font-size: 0;
          line-height: 0;
          img{
            width: 140px;
          }
          @media (width <= 960px) {
            text-align: center;
            img{
              margin: 0 auto;
            }
          }
        }
        > p{
          margin-top: 1em;
        }
        .workplace_detail_regus-list{
          font-weight: bold;
          margin-top: 1.5em;
          li{
            padding-left: 1em;
            text-indent: -1em;
            margin-top: 0.5em;
            &::before{
              content: "●";
              text-indent:0;
            }
            *{
              text-indent:0;
            }
          }
        }
        .workplace_link .btn{
          @media (width > 960px) {
            margin-inline: inherit;
          }
        }
      }
    }
  }
}
/* workcation
----------------------- */
.workplace_detail_workcation{
  text-align: center;
  padding: 40px 0;
  .folding_detail_inner{
    padding: 0 calc(15 * var(--layout-unit));
    @media (width <= 1360px) {
      padding: 0 calc(5 * var(--layout-unit));
    }
    @media (width <= 960px) {
      padding: 0;
      .folding_detail-ttl{
        font-size: calc(21 / 375 * 100vw) !important;
        margin: 0 calc(50% - 50vw);
      }
    }
  }
  .workplace_detail_workcation-box{
    &:not(:first-of-type){
      border-top: solid 1px #DEDEDE;
      padding-top: 60px;
      margin-top: 60px;
      @media (width <= 960px) {
        padding-top: 50px;
        margin-top: 50px;
      }
    }
  }
  .workplace_detail_workcation-subttl{
    font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
    margin-top: 1em;
    @media (width <= 960px) {
      font-size: calc(17 / 375 * 100vw);
    }
  }
  .workplace_detail_workcation-mv{
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      border-radius: 30px;
      margin-top: 40px;
      @media (width <= 960px) {
        border-radius: 20px;
        margin-top: 20px;
      }
  }
  .workplace_detail_workcation_photolist{
    @media (width > 960px) {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin: 30px calc(5 * var(--layout-unit)) 0;
      width: calc(100% - (10 * var(--layout-unit)));
      gap: 40px 30px;
      .swiper-slide{
        width: calc((100% - 60px) / 3);
      }
    }
    @media (width <= 960px) {
      margin-top: 20px;
    }
    .workplace_detail_workcation_photolist-img{
      display: block;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      border-radius: 30px;
      @media (width <= 960px) {
        border-radius: 20px;
      }
    }
    .workplace_detail_workcation_photolist-txt{
      margin-top: 1em;
      @media (width <= 960px) {
        font-weight: bold;
      }
    }
  }
	.swiper-pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 40px auto 0;
		@media (width <= 960px) {
			margin: calc(3 * var(--layout-unit)) auto calc(2 * var(--layout-unit));
		}
	}
	.swiper-pagination-bullet {
		display: inline-block;
    border-radius: 9999px;
    margin: 0 0.5em;
		width: 0.5em;
		height: 0.5em;
		cursor: pointer;
		transition: 0.8s;
		vertical-align: top;
		background-color: #DFDFDF;
	}
	.swiper-pagination-bullet-active {
		background-color: #707070;
	}
}