@charset "utf-8";

/* .keyvisual-container {
  width: 1400px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto; 
} */

/* .keyvisual-container .keyvisual-container__wrapper {
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
} */

.keyvisual-container .keyvisual {
  width: 100%;
  background-size: cover;
}

.office-tour-guide {
  width: 550px;
  margin: 0 auto;
  padding: 0 0 20px 0;
}

.box_item_office{
  padding-top: 30px!important;
  padding-bottom: 40px!important;
}


.office-tour-guide .section-02__box__item {
  width: 260px;
  margin-top: 0px;
}


.section-08-wrap {
  /* background-position: 0 20px, left 450px, right 1300px;
  background-size: 75%, 50% 20%, 75% 32%; */
  /* padding: 60px 0 10px 0; */
  width: 1400px;
  margin: 0 auto;
  /* clear: both; */
  /* background-image: url(../img/bg_section-06_02.png);
  background-repeat: no-repeat, no-repeat, no-repeat; */
  /* background-color: #f4f4f4; */
  margin-top: 80px;
  margin-bottom: 30px;
  padding: 30px 20px;
}

.premium-office-high-quality-section {
  /* background-size: 110%, 75% 100%; */
  padding: 235px 0 100px 0;
  background-position: 0 60px, left 375px, right 1300px;
}

.premium-office-high-quality-section .section-03__ttl {
  margin-top: 70px;
}

.office-tour-guide.bg-white {
  padding: 0;
}

.section-08-wrap .section-03 {
  width: 100%;
  background: #f4f4f4;
  padding: 30px 20px;
}

/* @media screen and (min-width: 1000px){
  .keyvisual-container {
    width: 1400px;
  }
} */

@media only screen and (max-width: 719px){
.box-gray {
    margin: 0!important;
}
}

@media only screen and (max-width: 719px) {
  .section-08-wrap{
    width:100%;
    margin: 0 auto;
  }
}


@media screen and (max-width: 599px) {
  .section-08-wrap {
    width: 100%;
  }

  .office-tour-guide { 
    width: 100%;
  }

  .office-tour-guide .section-02__box__item {
    width: 100%;
  }

  .keyvisual-container {
    width: 100%;
  }

  .section-08-wrap .section-03 {
    width: unset;
    margin: 0 10px 0 10px;
  }

  .premium-office-high-quality-section {
    padding: 50px 0 100px 0;
    background-position: 0 10px, left 191px, right 1300px;
  }

  .high-wrap--community {
    padding-bottom: 0px;
  }

  .box_office{
    margin: 0 -5px!important;
  }
}

/* .further-info__column__btn .btn-hover{
  position: relative;
}

.further-info__column__btn .btn-hover:hover{
  color: #212121;
  background: radial-gradient(98px 98px at center center, white 0%, #0088b5 100%);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  
} */

.btn-hover:hover .icn-dl {
  background:url(/business/solution/space-design/work/abw/img/icn_download_hover.png) no-repeat;
}
.btn-hover:hover .icn-mail{
  background:url(/business/solution/space-design/work/abw/img/icn_mail_hover.png) no-repeat;
  background-size: 70%;
}

.btn-hover:focus{
  color: #fff;
}

.further-info__column__btn a:hover{
  background: none;
}

.section-02__box-02__btn a:hover{
  background: none;
}


.btn-hover:hover, .btn-hover:active {
  color: #212121;
}
.btn-hover {
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  
}
.btn-hover:hover:before, .btn-hover:active:before {
  -webkit-transform: scale(7);
  transform: scale(7);
}
.btn-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0%;
  left: 40%;
  bottom: 0%;
  right: 40%;
  background: #fff;
  border-radius: 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

@media screen and (max-width: 1400px) {
  .section-01-wrap, 
  .section-08-wrap, 
  .section-02-wrap, 
  .section-03-wrap, 
  .section-04-wrap, 
  .section-05-wrap, 
  .section-06-wrap, 
  .office-01-wrap, 
  .office-02-wrap, 
  .office-12-wrap, 
  .office-03-wrap, 
  .high-wrap, 
  .office-09-wrap, 
  .office-10-wrap, 
  .office-11-wrap {
    width: 100%;
  }
}

@media screen and (max-width: 970px) {
  .globalBreadcrumbArea {
    width: 100%;
  }

  .keyvisual__wrap {
    width: 100% !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 730px){
        .section-02__box__item{
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
    }