/* hover
=================================================================== */
/* ================================================ vw */
/* ================================================ vh */
/* common
=================================================================== */
/* layout
=================================================================== */
/* video / iframe
=================================================================== */
/* imgCover
=================================================================== */
/* mask
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* textTate
=================================================================== */
/* form
=================================================================== */
/*============================================================================================ 767px */
@media only screen and (max-width: 767px) {
  /* ================================================ vw */
  /* ================================================ vh */
  /* ============================================================================================ service */
  .pageService .pageHeader {
    margin-bottom: 20px;
  }
  /* ================================================================== serviceNav */
  .serviceNav__article {
    width: 275px;
  }
  /* --------------------------------------- serviceNav__target inner */
  .serviceNav__target--inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* --------------------------------------- serviceNav__target */
  .serviceNav__target {
    padding-right: 20px;
  }
  .serviceNav__target--en .hoverText__base > span, .serviceNav__target--en .hoverText__position > span {
    font-size: 11px;
    height: 13px;
    line-height: 11px;
  }
  .serviceNav__target--jp {
    transform: scale(0.9);
  }
  .serviceNav__target--jp .hoverText__base > span, .serviceNav__target--jp .hoverText__position > span {
    font-size: 10px;
  }
  /* ============================================================================================ serviceArticle */
  .serviceArticle {
    padding-top: 30px;
  }
  .serviceArticle::after {
    top: 30px;
    width: calc(100% - 40px);
    left: 20px;
  }
  /* ============================================================================================ serviceSection */
  .serviceSection {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .serviceSection__underline {
    width: calc(100% - 40px);
  }
  /* ================================================================== serviceSection__title */
  .serviceSection__title {
    position: relative;
    z-index: 2;
  }
  .serviceSection__title--en {
    font-size: min(7.2vw, 27px);
    margin-bottom: min(2.6666666667vw, 10px);
  }
  .serviceSection__title--jp {
    font-size: min(3.2vw, 12px);
  }
  /* ================================================================== serviceSection__inner */
  .serviceSection__inner {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
    width: 100%;
  }
  /* --------------------------------------- serviceSection__detail */
  .serviceSection__detail {
    width: 100%;
    min-height: inherit;
    padding-right: 0;
    margin-bottom: 25px;
  }
  .serviceSection__detail--title {
    font-size: min(5.0666666667vw, 19px);
    margin-bottom: 23px;
  }
  .serviceSection__detail--desc, .serviceSection__detail--aside {
    position: relative;
    width: calc(100% - 25px);
    margin-left: auto;
  }
  .serviceSection__detail--desc {
    font-size: min(3.2vw, 12px);
    margin-bottom: 20px;
  }
  .serviceSection__detail--aside {
    padding-left: min(2.9333333333vw, 11px);
  }
  /* --------------------------------------- serviceSection__thum */
  .serviceSection__thum {
    right: 20px;
  }
  .serviceSection__thumList {
    border-radius: 3px;
  }
  /* ================================================================== serviceSection__related */
  .serviceSection__related {
    width: calc(100% + 20px);
    padding-top: 20px;
    padding-bottom: 20px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  /* --------------------------------------- serviceSection__relatedLeader */
  .serviceSection__relatedLeader {
    width: 90px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .serviceSection__relatedLeader--title {
    font-size: 10px;
  }
  /* --------------------------------------- serviceSection__relatedInner */
  .serviceSection__relatedInner {
    width: calc(100% - 90px);
  }
  .serviceSection__relatedInner--slider {
    padding-right: 20px;
  }
  /* --------------------------------------- #ssRelated--slider */
  .keen-slider .worksBlock__inner .worksBlock__thum {
    width: 34.9206349206%;
  }
  .keen-slider .worksBlock__inner .worksBlock__info {
    width: 60.3174603175%;
    padding-right: min(5.3333333333vw, 20px);
  }
  .keen-slider .worksBlock__title {
    margin-bottom: min(2.6666666667vw, 10px);
  }
  .keen-slider .worksBlock__title--p {
    font-size: min(2.6666666667vw, 10px);
  }
  .keen-slider .worksBlock__titleSub {
    min-height: min(5.3333333333vw, 20px);
  }
  .keen-slider .worksBlock__titleSub--p {
    font-size: min(2.6666666667vw, 10px);
    transform: scale(0.8);
    transform-origin: left center;
  }
  .keen-slider .worksBlock__co--p {
    font-size: min(2.6666666667vw, 10px);
    transform: scale(0.9);
    transform-origin: left center;
  }
  /* --------------------------------------- #ssRelated--slider keenDots */
  .serviceSection__related .keenDots {
    width: 90px;
    bottom: 15px;
    padding-left: 13px;
  }
  .serviceSection__related .keenDot {
    width: 8px;
    height: 10px;
  }
  .serviceSection__related .keenDot::after {
    width: 2px;
    height: 2px;
  }
  /* ================================================================== ssEventArea */
  /* --------------------------------------- toggleBtn */
  .toggleBtn {
    width: 33px;
    height: 33px;
    left: 20px;
    bottom: auto;
    top: 90px;
    border-radius: 4px;
    z-index: 2;
  }
  /* --------------------------------------- toggleBtn__icon */
  .toggleBtn__icon {
    width: 7px;
  }
  /* ================================================================== serviceSection active */
  .serviceSection__thum {
    width: 33.0666666667%;
    height: min(17.0666666667vw, 64px);
    top: 60px;
  }
  /* --------------------------------------- serviceSectio active */
  .serviceSection__inner, .serviceSection__title, .toggleBtn {
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition-duration: 0.8s;
    -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition-duration: 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition-duration: 0.8s;
    -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .serviceSection {
    height: 145px;
  }
  .serviceSection.active {
    height: auto;
  }
  .serviceSection.active .serviceSection__thum {
    width: 89.3333333333%;
    height: 185px;
    top: 20px;
  }
  .serviceSection.active .ssEventArea {
    height: 205px;
  }
  .serviceSection.active .toggleBtn {
    pointer-events: all;
    cursor: pointer;
    background-color: rgba(var(--color-black), 1);
  }
  .serviceSection.active .toggleBtn .toggleBtn__icon::before, .serviceSection.active .toggleBtn .toggleBtn__icon::after {
    background-color: #fff;
    transform: rotate(0deg);
  }
  .serviceSection.active .serviceSection__inner {
    width: 100%;
    padding-top: 136px;
  }
  .serviceSection.active .serviceSection__title {
    width: calc(100% - 34px);
    margin: 0 auto;
    color: #fff;
    padding: 15px 35px;
    background-color: rgba(30, 30, 30, 0.6);
  }
  .serviceSection.active .toggleBtn {
    top: 155px;
    left: 35px;
    background-color: #fff;
    z-index: 6;
  }
  .serviceSection.active .toggleBtn .toggleBtn__icon::before, .serviceSection.active .toggleBtn .toggleBtn__icon::after {
    background-color: rgba(var(--color-black), 1);
  }
}/*# sourceMappingURL=service-sp.css.map */