@charset "utf-8";

/* ==============================================================
*  Service Common
* ============================================================ */
.pageSection {
  &._faq {
    padding-bottom: min(6.45vw,80px);
  }
  &._aim {
    padding-top: min(4.43vw,55px);
    padding-bottom: 0;
  }
  &._links {
    padding-top: min(9.67vw,120px);
  }
}
@media screen and (width <= 768px) {
  .pageSection {
    &._aim {
      padding-top: min(7.33vw,55px);
    }
  }
}

.footerLinks {
  display: flex;
  gap: 0 min(2.41vw,30px);
  & li {
    width: calc((100% - min(4.82vw,60px)) / 3);
  }
}
@media screen and (width <= 768px) {
  .footerLinks {
    flex-wrap: wrap;
    gap: min(8vw,60px);
    & li {
      width: 100%;
    }
  }
}

.businessContentItems + .footerLinks {
  margin-top: min(7.74vw,96px);
}
@media screen and (width <= 768px) {
  .businessContentItems + .footerLinks {
    
  }
}

.footerLink {
  position: relative;
  display: block;
  color: #454545;
  text-align: center;
  overflow: hidden;
  transition: color 0.3s ease-out;
  &:hover {
    color: var(--color-main);
  }
}

.footerLink-img {
  transition: scale 0.3s;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .footerLink:hover & {
    scale: 1.05;
  }
}

.footerLink-contents {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(100% - min(4.82vw,60px));
  padding: min(1.61vw,20px);
  background-color: #ffffffe6;
}
@media screen and (width <= 768px) {
  .footerLink-contents {
    width: calc(100% - min(13.33vw,100px));
    padding: min(4.66vw,35px);
  }
}

.footerLink-ttl {
  font-size: clamp(12px, 3.607px + 1.093vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  & span {
    display: inline-block;
    &::after {
      translate: 0 min(0.16vw,2px);
      display: inline-block;
      width: min(1.61vw,20px);
      height: auto;
      aspect-ratio: 1;
      margin-left: 10px;
      background: linear-gradient( 90deg, rgb(160,203,67) 0%, rgb(176,255,5) 100%);
      -webkit-mask: url(/assets/img/top/icn_btn_arrow.svg) center / 100% auto no-repeat;
      mask: url(/assets/img/top/icn_btn_arrow.svg) center / 100% auto no-repeat;
      transition: translate 0.3s ease-out;
      content: "";
    }
  }
  .footerLink:hover & {
    & span::after {
      translate: 5px 2px;
    }
  }
}
@media screen and (width <= 768px) {
  .footerLink-ttl {
    font-size: min(4.8vw,36px);
    & span {
      &::after {
        translate: 0 min(0.53vw,4px);
        width: min(4.8vw,36px);
        margin-left: min(2.66vw,20px);
      }
    }
    .footerLink:hover & {
      & span::after {
        translate: 5px min(0.53vw,4px);
      }
    }
  }
}

.footerLink-txt {
  margin-top: min(0.8vw,10px);
  font-size: clamp(11px, 5.754px + 0.683vw, 16px);
}
@media screen and (width <= 768px) {
  .footerLink-txt {
    font-size: min(3.73vw,28px);
    line-height: 1.78;
  }
}


/* ==============================================================
*  Service Top
* ============================================================ */
.pageHeader._serviceTop {
  padding-top: min(4.8vw,36px);
  & .pageHeader-inner {
    position: static;
    translate: 0;
    width: 100%;
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
  }
  & h1 {
    position: relative;
    padding-bottom: min(3.62vw, 45px);
    color: var(--txt-color-main);
    font-size: min(4.03vw,50px);
    line-height: 1.3;
    text-align: center;
    & span {
      font-family: var(--font-logo);
    }
    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      translate: -50% 0;
      width: min(11.69vw, 145px);
      height: auto;
      aspect-ratio: 145 / 5;
      background: url(/assets/img/service/fm/bg_header_dotted.webp) no-repeat center / contain;
      content: "";
    }
  }
  & p {
    margin-top: min(3.22vw,40px);
    color: #454545;
    font-size: min(1.82vw,18px);
    line-height: 1.88;
    text-align: center;
  }
}
@media screen and (width <= 768px) {
  .pageHeader._serviceTop {
    & .pageHeader-inner {
      max-width: 100%;
      padding: 0 min(5.33vw,40px); 
    }
    & h1 {
      padding-bottom: min(4.8vw,36px);
      font-size: min(6.66vw,50px);
      line-height: 1.24;
      &::after {
        width: min(23.2vw,174px);
      }
    }
    & p {
      margin-top: min(7.19vw,54px);
      font-size: min(4.53vw,34px);
      line-height: 1.82;
      text-align: left;
    }
  }
}


.aimBox {
  padding: min(5.64vw,70px) min(8.06vw,100px) min(6.45vw,80px);
  background-color: #f2f8ea;
}
@media screen and (width <= 768px) {
  .aimBox {
    padding: min(8.66vw,65px) min(5.06vw,38px) min(9.33vw,70px);
  }
}

.aimBoxHeader {
  margin-bottom: min(3.62vw,45px);
  & h2 {
    font-family: var(--font-serif);
    font-size: min(3.22vw,40px);
    font-weight: 500;
    color: var(--color-main);
    line-height: 1.2;
    text-align: center;
    & span {
      font-family: var(--font-logo);
    }
  }
}
@media screen and (width <= 768px) {
  .aimBoxHeader {
    margin-bottom: min(6.66vw,50px);
    & h2 {
      font-size: min(5.33vw,40px);
      line-height: 1.45;
    }
  }
}

.aim {
  display: flex;
  gap: 0 min(3.22vw,40px);
  &:not(:first-child) {
    margin-top: min(3.87vw,48px);
  }
}
@media screen and (width <= 768px) {
  .aim {
    flex-direction: column;
    &:not(:first-child) {
      margin-top: min(6.4vw,48px);
    }
  }
}

.aim-img {
  align-self: center;
  flex-shrink: 0;
  width: min(7.33vw,91px);
}
@media screen and (width <= 768px) {
  .aim-img {
    width: min(12.13vw,91px);
  }
}

.aim-contents {
  & h3 {
    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: min(2.25vw,28px);
    font-weight: 500;
    line-height: 1.35;
  }
  & p {
    margin-top: min(1.29vw,16px);
    font-size: min(1.82vw,16px);
    line-height: 2;
  }
}
@media screen and (width <= 768px) {
  .aim-contents {
    margin-top: min(2.66vw,20px);
    & h3 {
      font-size: min(4.53vw,34px);
      line-height: 1.64;
      text-align: center;
    }
    & p {
      font-size: min(3.46vw,26px);
      line-height: 1.76;
    }
  }
}

.businessContentFigure {
  max-width: 1060px;
  margin: min(6.45vw,80px) auto 0;
  & image {
    transition: translate 0.3s;
  }
  & a:hover image {
    translate: -5px 0;
  }
}

a.svg_link{
  & .svg_str path {
    transition: all .3s;
  }
  & .svg_btn {
    transition: all .3s;
  }
  &:hover {
    & .svg_str path {
      fill: var(--color-main) !important;
    }
    & .svg_btn {
      translate: 5px 0;
    }
  }

}


.businessContentItems {
  display: flex;
  gap: 0 min(2.41vw,30px);
  margin-top: min(7.74vw,96px);
  & li {
    width: calc((100% - min(2.41vw,30px)) / 2);
  }
}
@media screen and (width <= 768px) {
  .businessContentItems {
    flex-wrap: wrap;
    gap: min(4vw,30px) 0;
    & li {
      width: 100%;
    }
  }
}

.businessContentItem {
  height: 100%;
  padding: min(1.85vw,23px) min(3.22vw,40px) min(2.41vw,30px);
  background-color: #f2f8ea;
  & h3 {
    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: min(2.41vw,30px);
    font-weight: 500;
    text-align: center;
  }
  & p {
    line-height: 1.75;
  }
}
@media screen and (width <= 768px) {
  .businessContentItem {
    padding: min(6vw,45px) min(8vw,60px) min(6.93vw,52px);
    & h3 {
      margin-bottom: min(1.06vw,8px);
      font-size: min(4vw,30px);
    }
    & p {
      font-size: min(3.46vw,26px);
      line-height: 1.76;
    }
  }
}


/* ==============================================================
*  Facility Management
* ============================================================ */
.introduction {
  position: relative;
  padding-top: min(4.03vw,50px);
  padding-bottom: 20px;
  &._noimg {
    padding-top: 0;
  }
  & + .introduction {
    margin-top: 80px;
  }
}
@media screen and (width <= 768px) {
  .introduction {
    padding-top: min(32vw,240px);
    padding-bottom: min(4vw,30px);
    &._noimg {
      padding-top: 0;
    }
    & + .introduction {
      margin-top: min(10.66vw,80px);
    }
  }
}

.introduction-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: min(40.32vw,500px);
  height: auto;
  aspect-ratio: 5/3;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  ._reverse & {
    right: 0;
    left: auto;
  }
}
@media screen and (width <= 900px) {
.introduction-img {
  width: 30vw;
}
}
@media screen and (width <= 768px) {
  .introduction-img {
    left: calc(min(5.33vw,40px) * -1);
    width: min(66.66vw,500px);
    ._reverse & {
      right: calc(min(5.33vw,40px) * -1);
    }
  }
}

.introduction-contents {
  position: relative;
  width: min(59.43vw,737px);
  margin: 0 20px 0 auto;
  padding: min(4.83vw,60px) min(6.29vw,78px) min(4.43vw,55px) min(10.8vw,135px);
  background-color: #f6f8f2;
  box-shadow: 20px 20px #dbeac0;
  ._reverse & {
    margin-left: 20px;
    padding-right: min(9.67vw,120px);
    padding-left: min(6.04vw,75px);
    box-shadow: -20px 20px #dbeac0;
  }
}
@media screen and (width <= 900px) {
  .introduction-contents {
    width: 68vw;
  }
}
@media screen and (width <= 768px) {
  .introduction-contents {
    width: 100%;
    margin-right: min(4vw,30px);
    margin-left: 0;
    padding: min(14.66vw,110px) min(6.66vw,50px) min(6.66vw,50px);
    box-shadow: min(4vw,30px) min(4vw,30px) #dbeac0;
    ._reverse & {
      margin-left: 0;
      padding: min(14.66vw,110px) min(6.66vw,50px) min(6.66vw,50px);
      box-shadow: calc(min(4vw,30px) * -1) min(4vw,30px) #dbeac0;
    }
    ._noimg & {
      padding-top: min(6.66vw,50px);
    }
  }
}

.introductionHeader {
  & h3 {
    font-family: var(--font-serif);
    font-size: clamp(22px, 10.459px + 1.503vw, 33px);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.41;
  }
  & p {
    margin-top: min(0.4vw,5px);
    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: min(1.82vw,18px);
    font-weight: 500;
    line-height: 1.53;
  }
}
@media screen and (width <= 768px) {
  .introductionHeader {
    & h3 {
      font-size: min(5.33vw,40px);
    }
    & p {
      font-size: min(3.46vw, 26px);
    }
  }
}

.introductionBody + .introductionHeader {
  margin-top: 30px;
}

.introductionBody {
  padding-left: 1.2em;
  & p {
    margin-top: min(2.01vw,25px);
    font-size: 14px;
  }
  & ul {
    margin-top: min(0.48vw,6px);
    margin-left: 1em;
    & li {
      position: relative;
      padding-left: min(2.08vw,20px);
      font-size: min(1.82vw,16px);
      line-height: 1.75;
      &::before {
        position: absolute;
        top: min(1.17vw,10px);
        left: 0;
        rotate: -45deg;
        width: min(1.17vw,11px);
        height: auto;
        aspect-ratio: 11/6;
        border-bottom: 2px solid var(--color-main);
        border-left: 2px solid var(--color-main);
        content: "";
      }
      & + li {
        margin-top: 7px;
      }
    }
  }
  & dl {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 18px;
    margin-top: 30px;
    & dt {
      margin-top: .5em;
      padding: 0 6px 1px;
      border-radius: 4px;
      background-color: #ddebc4;
      font-size: 14px;
      line-height: 1.5;
    }
    & dd {
      & p {
        margin-top: 0.5em;
      }
      & P:first-of-type {
        margin: 0;
      }
    }
    & a {
      border-bottom: 1px solid #ccc;
      color: #454545;
      font-size: 14px;
      transition: color 0.3s;
      &[target="_blank"] {
        display: inline-block;
        &::after {
          translate: 0 1px;
          display: inline-block;
          width: 14px;
          height: auto;
          aspect-ratio: 1;
          margin-left: 8px;
          background: var(--color-main);
          -webkit-mask: url(/assets/img/top/icn_btn_external.svg) center / cover no-repeat;
          mask: url(/assets/img/top/icn_btn_external.svg) center / cover no-repeat;
          content: "";
        }
      }
      &:hover {
        color: var(--color-main);
      }
    }
    & + p {
      margin-top: 30px;
    }
  }
}
@media screen and (width <= 768px) {
  .introductionBody {
    & p {
      margin-top: min(3.73vw,28px);
      font-size: min(2.93vw,22px);
      line-height: 1.36;
    }
    & ul {
      margin-top: min(1.86vw,14px);
      margin-left: min(3.73vw,28px);
      & li {
        padding-left: min(4.26vw,32px);
        font-size: min(3.46vw,26px);
        line-height: 1.84;
        &::before {
          top: min(2.66vw,20px);
          width: min(1.86vw,14px);
        }
        & + li {
          margin-top: min(0.93vw,7px);
        }
      }
    }
    & dl {
      gap: min(1.2vw,9px) 0;
      margin-top: 8vw;
      & dt {
        margin-top: 0;
        padding: 0 min(1.33vw,10px);
        font-size: min(2.66vw,20px);
      }
      & dd {
        width: 100%;
      }
      & a {
        
        font-size: min(2.93vw,22px);
        &[target="_blank"] {
          &::after {
            width: min(2.93vw,22px);
          }
        }
      }
      & + p {
        margin-top: 8vw;
      }
    }
  }
}

.introduction-contents._multi {
  & .introductionHeader {
    & p {
      margin-top: min(2.01vw, 25px);
    }
  }
  & .introductionBody {
    & .introduction-txt:first-of-type {
      margin-top: .5em;
    }
  }
}
@media screen and (width <= 768px) {
  .introduction-contents._multi {
    & .introductionHeader {
      & p {
        margin-top: min(3.73vw, 28px);
      }
    }
  }
}

.introductionTxt {
  margin-top: min(4.02vw,50px);
  font-size: min(1.82vw,16px);
  text-align: left !important;
}
@media screen and (width <= 768px) {
  .introductionTxt {
    margin-top: min(6.66vw,50px);
    font-size: min(3.46vw,26px);
  }
}

.case {
  display: flex;
  background-color: #fff;
  & + .case {
    margin-top: 40px;
  }
}
@media screen and (width <= 768px) {
  .case {
    display: block;
  }
}

.case-contents {
  width: calc(100% - min(32.25vw,400px));
  padding: min(3.22vw,40px) min(3.22vw,40px) min(3.22vw,40px) min(4.83vw,60px);
  & h3 {
    margin-bottom: min(1.61vw,20px);
    padding-bottom: min(0.64vw,8px);
    border-bottom: 1px solid var(--color-main);
    color: var(--color-main);
    font-size: min(2.09vw,26px);
    font-weight: 500;
    line-height: 1.84;
  }
  & p {
    font-size: min(1.82vw,16px);
    line-height: 2;
  }
}
@media screen and (width <= 768px) {
  .case-contents {
    width: 100%;
    padding: min(6.66vw,50px) min(8vw,60px) min(6.66vw,50px);
    & h3 {
      margin-bottom: min(3.46vw,26px);
      padding-bottom: min(1.86vw,14px);
      font-size: min(4.8vw,36px);
      line-height: 1.33;
    }
    & p {
      font-size: min(3.46vw,26px);
      line-height: 1.84;
    }
  }
}

.case-linkBtn {
  margin-top: min(1.29vw,16px);
  text-align: right;
  & a {
    display: inline-block;
    border-bottom: 1px solid #ccc;
    color: #454545;
    font-size: 14px;
    transition: color 0.3s;
    &[target="_blank"] {
      &::after {
        translate: 0 1px;
        display: inline-block;
        width: 14px;
        height: auto;
        aspect-ratio: 1;
        margin-left: 8px;
        background: var(--color-main);
        -webkit-mask: url(/assets/img/top/icn_btn_external.svg) center / cover no-repeat;
        mask: url(/assets/img/top/icn_btn_external.svg) center / cover no-repeat;
        content: "";
      }
    }
    &:hover {
      color: var(--color-main);
    }
  }
}
@media screen and (width <= 768px) {
  .case-linkBtn {
    & a {
      font-size: min(2.93vw,22px);
      &[target="_blank"] {
        &::after {
          width: min(2.93vw,22px);
        }
      }
    }
  }
}

.case-img {
  flex-shrink: 0;
  width: min(32.25vw,400px);
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (width <= 768px) {
  .case-img {
    width: 100%;
    height: auto;
    aspect-ratio: 674/412;
  }
}

.serviceFaq {
  padding-bottom: min(3.22vw,40px);
  &:not(:first-child){
    margin-top: min(3.82vw,35px);
  }
  &:not(:last-child) {
    border-bottom: 1px solid #dedede;
  }
  & summary {
    position: relative;
    padding-right: min(4.83vw,60px);
    font-size: min(2.09vw,26px);
    font-weight: 500;
    line-height: 1.46;
    list-style: none;
    &::-webkit-details-marker {
      display: none;
    }
    &::before,&::after {
      position: absolute;
      top: min(1.45vw,18px);
      right: min(1.61vw,20px);
      transform-origin: center;
      display: block;
      width: min(1.61vw,20px);
      height: 2px;
      background-color: var(--color-main);
      content: "";
    }
    &::after {
      rotate: 90deg;
    }
    &::marker {
      content: none;
    }
    & span {
      position: relative;
      display: inline-block;
      padding-left: min(3.22vw,40px);
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        color: var(--color-main);
        font-size: min(2.58vw,32px);
        font-weight: 500;
        line-height: 1.2;
        content: "Q.";
      }
    }
  }
  &:open {
    & summary::after {
      rotate: 180deg;
    }
  }
  & div {
    margin-top: min(2.41vw,30px);
    padding: 0 min(4.83vw,60px) 0 min(3.22vw,40px);
  }
}
@media screen and (width <= 768px) {
  .serviceFaq {
    padding-bottom: min(6.66vw,50px);
    &:not(:first-child){
      margin-top: min(6.66vw,50px);
    }
    & summary {
      padding-right: min(6.66vw,50px);
      font-size: min(3.77vw,28px);
      line-height: 1.57;
      &::before,&::after {
        top: 50%;
        right: min(2vw,15px);
        width: min(4vw,30px);
        translate: 50% -50%;
        height: auto;
        aspect-ratio: 30/4;
      }
      & span {
        padding-left: min(6.66vw,50px);
        &::before {
          font-size: min(5.06vw,38px);
        }
      }
    }
    & div {
      padding: 0 min(6.66vw,50px);
      & p {
        font-size: min(3.77vw,28px);
        line-height: 1.57;
      }
    }
  }
}