.hstyle-work-primary {
  font-size: 48rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.hstyle-work-primary b {
  color: var(--color-light-blue);
}

section.work-head {
  margin-bottom: 120rem;
}
section.work-head .inner {
  position: relative;
}
section.work-head .main-ph {
  -webkit-transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  clip-path: inset(0 100% 0 0);
}
section.work-head .main-ph.show {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}
section.work-head .main-ph {
  width: 70%;
  margin-top: 60rem;
  margin-left: auto;
  position: relative;
  z-index: 0;
}
section.work-head .box-text {
  width: 100%;
  top: 50rem;
  padding-left: 30rem;
  position: absolute;
}
section.work-head .box-text.bg-show::before {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}
section.work-head .box-text::before {
  -webkit-transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  clip-path: inset(0 100% 0 0);
  content: "";
  display: block;
  width: 100%;
  height: 420rem;
  background-color: var(--color-light-blue);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform: skewY(10deg);
          transform: skewY(10deg);
}
section.work-head .box-text h2 {
  font-size: 35rem;
  display: -ms-grid;
  display: grid;
  gap: 10rem;
  -webkit-transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  transition: 0.9s cubic-bezier(0.95, 0.05, 0.05, 0.95);
  clip-path: inset(0 100% 0 0);
}
section.work-head .box-text h2.show {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}
section.work-head .box-text h2 span {
  line-height: 1;
  background-color: #fff;
  color: var(--color-light-blue);
  font-weight: 900;
  padding: 0.1em 0.3em;
}
section.work-head .box-text p.job-name {
  margin-top: 40rem;
  color: #fff;
  font-weight: 900;
  font-size: 78rem;
  line-height: 1;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 2;
}
section.work-head .box-text .job-name-en {
  margin-left: -20rem;
  margin-top: -20rem;
  mix-blend-mode: multiply;
  color: rgba(0, 166, 233, 0.5);
  font-size: 72rem;
  font-weight: 700;
  font-family: var(--font-en);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  opacity: 0;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}
section.work-head .box-text .job-name-en.show {
  opacity: 1;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

section.work-about {
  width: 90%;
  margin: 0 auto;
}
section.work-about .box-ph {
  margin-top: 40rem;
}

section.work-detail {
  width: 90%;
  margin: 120rem auto 0;
}
section.work-detail .wrapper-work-detail {
  display: -ms-grid;
  display: grid;
  gap: 80rem;
}
section.work-detail h3 {
  margin-bottom: 80rem;
}
section.work-detail h4 {
  margin-bottom: 40rem;
}
section.work-detail .bg-gray {
  background-color: #f2f2f2;
  padding: 60rem 40rem;
}
section.work-detail .work-detail-col2 {
  margin-top: 60rem;
  display: -ms-grid;
  display: grid;
  gap: 60rem;
}
section.work-detail .work-detail-col2.no-margin {
  margin-top: 0;
}
section.work-detail .work-detail-col2 .inn {
  margin-top: 40rem;
}
section.work-detail .work-detail-col2 h5 {
  color: var(--color-light-blue);
  font-weight: bold;
  font-size: 38rem;
  margin-bottom: 20rem;
  text-align: center;
}

section.work-bottom-nav {
  margin-top: 160rem;
}
section.work-bottom-nav ul.work-bottom-nav-list {
  display: -ms-grid;
  display: grid;
  gap: 40rem;
  width: 75%;
  margin: 30rem auto 0;
}

section.work-movie {
  margin-top: 120rem;
}

section.work-flow {
  margin-top: 120rem;
}
section.work-flow .hstyle-work-primary {
  margin-bottom: 40rem;
}
section.work-flow .hstyle-work-primary.small {
  font-size: 42rem;
  line-height: 1.4;
}
section.work-flow section.bg-blue {
  margin-top: 160rem;
  background: var(--color-light-blue);
  padding-bottom: 60rem;
}
section.work-flow section.bg-blue .inner {
  width: 90%;
  margin: 0 auto;
}
section.work-flow section.bg-blue .wrap-sales-icon {
  position: relative;
  top: -40rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 15rem 1fr 15rem 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15rem;
}
section.work-flow section.bg-blue .item {
  background: #fff;
  border: 2px solid var(--color-light-blue);
  border-radius: 8px;
  padding: 30rem 10rem 20rem;
  position: relative;
}
section.work-flow section.bg-blue .icon {
  width: 110rem;
  margin: 0 auto;
  position: absolute;
  top: -80rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
section.work-flow section.bg-blue p.job {
  color: var(--color-light-blue);
  font-weight: 900;
  font-size: 28rem;
  text-align: center;
  margin-bottom: 5rem;
}
section.work-flow section.bg-blue p.desc {
  font-size: 22rem;
  text-align: center;
  line-height: 1.6;
}
section.work-flow .flow-bottom-text {
  width: 90%;
  margin: -50rem auto 0;
}

.movie-image {
  width: 90%;
  margin: 40rem auto 0;
}

/**********************************************************************

 * Media Query For PC

 ***********************************************************************/
@media print, screen and (min-width: 768px) {
  main {
    overflow: hidden;
  }
  .hstyle-work-primary {
    font-size: clamp(34.7539393939px, 3.39vw, 56px);
  }
  section.work-head {
    margin-top: clamp(136.5333333333px, 13.33vw, 220px);
    margin-bottom: clamp(111.7090909091px, 10.91vw, 180px);
  }
  section.work-head .inner {
    margin: 0 auto 0;
    max-width: 1600px;
    position: relative;
  }
  section.work-head .main-ph {
    width: clamp(620.6060606061px, 60.61vw, 1000px);
    margin-top: 0;
    margin-left: auto;
    position: relative;
    z-index: 0;
  }
  section.work-head .box-text {
    width: 100%;
    padding-left: clamp(62.0606060606px, 6.06vw, 100px);
    position: absolute;
    top: 20%;
    left: 0;
  }
  section.work-head .box-text::before {
    content: "";
    display: block;
    width: 100vw;
    height: clamp(453.0424242424px, 44.24vw, 730px);
    position: absolute;
    top: clamp(-12.4121212121px, -1.21vw, -20px);
    left: calc(50% - 50vw);
    z-index: -1;
    -webkit-transform: skewY(11deg);
            transform: skewY(11deg);
  }
  section.work-head .box-text h2 {
    font-size: clamp(34.7539393939px, 3.39vw, 56px);
    display: -ms-grid;
    display: grid;
    gap: clamp(3.7236363636px, 0.36vw, 6px);
  }
  section.work-head .box-text h2 span {
    line-height: 1;
    letter-spacing: 0.06em;
    background-color: #fff;
    color: var(--color-light-blue);
    font-weight: 900;
    padding: 0.05em 0.3em;
  }
  section.work-head .box-text p.job-name {
    margin-top: clamp(27.9272727273px, 2.73vw, 45px);
    color: #fff;
    font-weight: 900;
    font-size: clamp(86.8848484848px, 8.48vw, 140px);
    line-height: 1;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 2;
  }
  section.work-head .box-text .job-name-en {
    position: absolute;
    bottom: -33%;
    left: clamp(43.4424242424px, 4.24vw, 70px);
    margin-left: clamp(-12.4121212121px, -1.21vw, -20px);
    margin-top: clamp(-12.4121212121px, -1.21vw, -20px);
    mix-blend-mode: multiply;
    color: rgba(0, 166, 233, 0.5);
    font-size: clamp(111.7090909091px, 10.91vw, 180px);
    font-weight: 700;
    font-family: var(--font-en);
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.01em;
    z-index: 1;
  }
  section.work-about {
    max-width: 1500px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  section.work-about .box-ph {
    width: clamp(322.7151515152px, 31.52vw, 520px);
    margin-top: clamp(24.8242424242px, 2.42vw, 40px);
    margin-right: clamp(49.6484848485px, 4.85vw, 80px);
  }
  section.work-about .box-text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  section.work-about .box-text p {
    line-height: 2;
    max-width: 780px;
  }
  section.work-detail {
    width: 90%;
    margin: clamp(93.0909090909px, 9.09vw, 150px) auto 0;
  }
  section.work-detail .wrapper-work-detail {
    display: -ms-grid;
    display: grid;
    gap: clamp(62.0606060606px, 6.06vw, 100px);
    max-width: 1400px;
    margin: 0 auto;
  }
  section.work-detail h3 {
    margin-bottom: clamp(49.6484848485px, 4.85vw, 80px);
  }
  section.work-detail h4 {
    margin-bottom: clamp(43.4424242424px, 4.24vw, 70px);
  }
  section.work-detail p.h-under {
    padding: 0 clamp(68.2666666667px, 6.67vw, 110px);
  }
  section.work-detail .bg-gray {
    padding: clamp(49.6484848485px, 4.85vw, 80px) clamp(93.0909090909px, 9.09vw, 150px);
  }
  section.work-detail .work-detail-col2 {
    margin-top: clamp(49.6484848485px, 4.85vw, 80px);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr clamp(37.2363636364px, 3.64vw, 60px) 1fr;
    grid-template-columns: 1fr 1fr;
    gap: clamp(52.7515151515px, 5.15vw, 85px) clamp(37.2363636364px, 3.64vw, 60px);
  }
  section.work-detail .work-detail-col2 .inn {
    margin-top: clamp(24.8242424242px, 2.42vw, 40px);
    padding: 0 clamp(24.8242424242px, 2.42vw, 40px);
  }
  section.work-detail .work-detail-col2 h5 {
    color: var(--color-light-blue);
    font-size: clamp(24.8242424242px, 2.42vw, 40px);
    margin-bottom: clamp(12.4121212121px, 1.21vw, 20px);
    text-align: center;
  }
  section.work-bottom-nav {
    margin-top: clamp(99.296969697px, 9.7vw, 160px);
  }
  section.work-bottom-nav ul.work-bottom-nav-list {
    display: -ms-grid;
    display: grid;
    gap: clamp(24.8242424242px, 2.42vw, 40px);
    max-width: 1120px;
    margin: clamp(18.6181818182px, 1.82vw, 30px) auto 0;
  }
  section.work-bottom-nav ul.work-bottom-nav-list a img {
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  section.work-bottom-nav ul.work-bottom-nav-list a:hover img {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  section.work-movie {
    margin-top: clamp(93.0909090909px, 9.09vw, 150px);
  }
  section.work-flow {
    margin-top: clamp(93.0909090909px, 9.09vw, 150px);
  }
  section.work-flow .hstyle-work-primary {
    margin-bottom: clamp(24.8242424242px, 2.42vw, 40px);
  }
  section.work-flow .hstyle-work-primary.small {
    font-size: clamp(30.4096969697px, 2.97vw, 49px);
    line-height: 1.4;
  }
  section.work-flow section.bg-blue {
    margin-top: clamp(155.1515151515px, 15.15vw, 250px);
    padding-bottom: clamp(62.0606060606px, 6.06vw, 100px);
  }
  section.work-flow section.bg-blue .inner {
    width: 90%;
    margin: 0 auto;
  }
  section.work-flow section.bg-blue .wrap-sales-icon {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    top: clamp(-89.9878787879px, -8.79vw, -145px);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr clamp(31.0303030303px, 3.03vw, 50px) 1fr clamp(31.0303030303px, 3.03vw, 50px) 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(31.0303030303px, 3.03vw, 50px);
  }
  section.work-flow section.bg-blue .item {
    background: #fff;
    border: 4px solid var(--color-light-blue);
    border-radius: 15px;
    padding: clamp(37.2363636364px, 3.64vw, 60px) clamp(6.2060606061px, 0.61vw, 10px) clamp(24.8242424242px, 2.42vw, 40px);
    position: relative;
  }
  section.work-flow section.bg-blue .icon {
    width: clamp(100.5381818182px, 9.82vw, 162px);
    margin: 0 auto;
    position: absolute;
    top: clamp(-111.7090909091px, -10.91vw, -180px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  section.work-flow section.bg-blue p.job {
    color: var(--color-light-blue);
    font-weight: 900;
    font-size: clamp(24.8242424242px, 2.42vw, 40px);
    text-align: center;
    margin-bottom: clamp(6.2060606061px, 0.61vw, 10px);
  }
  section.work-flow section.bg-blue p.desc {
    font-size: clamp(14.8945454545px, 1.45vw, 24px);
    text-align: center;
    line-height: 1.6;
  }
  section.work-flow .wrap-illust-flow {
    max-width: 1260px;
    margin: 0 auto;
  }
  section.work-flow .flow-bottom-text {
    max-width: 1030px;
    margin: clamp(-86.8848484848px, -8.48vw, -140px) auto 0;
  }
  .movie-image {
    max-width: 800px;
    margin: 40rem auto 0;
  }
}
/*# sourceMappingURL=work.css.map */