/* hover
=================================================================== */
/* ================================================ vw */
/* ================================================ vh */
/* common
=================================================================== */
/* layout
=================================================================== */
/* video / iframe
=================================================================== */
/* imgCover
=================================================================== */
/* mask
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* textTate
=================================================================== */
/* form
=================================================================== */
/* ============================================================================================ works */
.pageWorks .pageHeader {
  margin-bottom: 75px;
}

.pageWorksTop .pageContents {
  z-index: 2;
}

/* --------------------------------------- worksArticle */
.worksArticle, .worksSection {
  position: relative;
}

/* ================================================================== worksList */
.worksList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ============================================================================================ worksTop__pageNav */
.worksTop__pageNav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.worksTop__pageNavSticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding-bottom: 20px;
}

/* --------------------------------------- worksTop__pageNavInner */
.worksTop__pageNavInner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

/* --------------------------------------- worksTop__pageNavList */
.worksTop__pageNavList {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
}
.worksTop__pageNavList::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 50%;
  background-color: rgba(var(--color-black), 1);
  border-radius: 5px;
  z-index: 1;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- worksTop__pageNavBtn */
.worksTop__pageNavBtn {
  position: relative;
  height: 45px;
  width: 175px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  pointer-events: all;
  cursor: pointer;
  z-index: 2;
}
.worksTop__pageNavBtn .hoverText__base, .worksTop__pageNavBtn .hoverText__position {
  text-align: center;
}
.worksTop__pageNavBtn .hoverText__base > span, .worksTop__pageNavBtn .hoverText__position > span {
  font-size: 15px;
}
.worksTop__pageNavBtn:nth-child(1) .hoverText__base > span, .worksTop__pageNavBtn:nth-child(1) .hoverText__position > span {
  color: #fff;
}

/* ============================================================================================ businessMap */
.businessMap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ================================================================== businessMap__Nav */
.businessMap__Nav {
  position: sticky;
  top: 100px;
  z-index: 3;
}
.businessMap__Nav::before, .businessMap__Nav::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 1px;
  background-color: rgba(var(--color-black), 1);
  left: auto;
  right: 0;
  z-index: 3;
}
.businessMap__Nav::after {
  top: auto;
  bottom: 0;
}
.businessMap__Nav .textureBg {
  top: auto;
  bottom: 0;
  height: calc(100% + 100px);
  z-index: 1;
}

/* --------------------------------------- businessMap__Inner */
.businessMap__Inner {
  position: relative;
  z-index: 2;
}

/* ================================================================== businessMap__List */
.businessMap__List {
  position: relative;
  height: calc(95 * 100 / 1366 * 1vw);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  z-index: 2;
}
.businessMap__List::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 1px;
  background-color: rgba(var(--color-black), 1);
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 2;
}

.businessMap__Inner .businessMap__List {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- businessMap__List li */
.businessMap__Empty, .businessMap__Target {
  position: relative;
  z-index: 1;
}

.businessMap__Empty {
  width: 31.25%;
}

.businessMap__Target {
  width: 11.4583333333%;
}
.businessMap__Target::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 1px;
  background-color: rgba(var(--color-black), 1);
}

/* --------------------------------------- businessMap__Nav target */
.businessMap__Nav .businessMap__Empty {
  padding-top: calc(15 * 100 / 1366 * 1vw);
}

.businessMap__Nav .businessMap__Target {
  padding-left: calc(15 * 100 / 1366 * 1vw);
  padding-bottom: calc(12 * 100 / 1366 * 1vw);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.businessMap__Nav--title {
  font-size: calc(13 * 100 / 1366 * 1vw);
  line-height: 1;
}

/* ================================================================== businessMap__Target */
.businessMap__Target--link, a.businessMap__Target--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: all;
  cursor: pointer;
}

/* --------------------------------------- businessMap__Target obj */
.businessMap__Target--obj {
  position: absolute;
  width: 53.8720538721%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

.businessMap__Target--obj--list {
  position: relative;
  padding-top: 56.25%;
}

.businessMap__Target--obj--target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.businessMap__Target--obj--target:nth-child(1) {
  z-index: 2;
}
.businessMap__Target--obj--target:nth-child(2) {
  top: 10%;
  left: 8%;
  z-index: 1;
}
.businessMap__Target--obj--target:nth-child(n+3) {
  display: none;
}
.businessMap__Target--obj--target img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================================================ body class */
.businessMap {
  pointer-events: none;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
  visibility: hidden;
}

.businessMap__Nav::before, .businessMap__Nav::after, .businessMap__List::after {
  width: 0;
  left: auto;
  right: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.businessMap__Target::after {
  height: 0;
  top: auto;
  bottom: 0;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- businessMap--show */
.businessMap--show .tagsInner {
  position: relative;
  top: 0;
  transform: translate(0, -110%);
}
.businessMap--show .worksArticle {
  margin-bottom: 60px;
}
.businessMap--show .businessMap {
  opacity: 1;
  visibility: visible;
}
.businessMap--show .businessMap__Nav::before, .businessMap--show .businessMap__Nav::after, .businessMap--show .businessMap__List::after {
  width: 100%;
  left: 0;
  right: auto;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.businessMap--show .businessMap__Target::after {
  height: 100%;
  top: 0;
  bottom: auto;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.businessMap--show .businessMap__Nav .businessMap__Target {
  pointer-events: all;
  cursor: pointer;
}
.businessMap--show .worksTop__main {
  padding-top: calc(95 * 100 / 1366 * 1vw);
  z-index: 3;
  pointer-events: none;
}
.businessMap--show .worksList {
  display: block;
  width: 31.25%;
}
.businessMap--show .worksBlock {
  width: 100%;
  height: calc(95 * 100 / 1366 * 1vw);
  margin-right: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.businessMap--show .worksBlock__inner {
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.businessMap--show .worksBlock__thum {
  width: 22.2222222222%;
}
.businessMap--show .worksBlock__thumInner {
  position: relative;
  padding-top: 86.6666666667%;
}
.businessMap--show .worksBlock__thumInner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.businessMap--show .worksBlock__info {
  width: 71.6049382716%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.businessMap--show .worksBlock__info {
  margin-top: 0;
}
.businessMap--show .worksBlock__title {
  margin-bottom: calc(10 * 100 / 1366 * 1vw);
  font-size: calc(13 * 100 / 1366 * 1vw);
}
.businessMap--show .worksBlock__titleSub {
  min-height: inherit;
  margin-bottom: calc(6 * 100 / 1366 * 1vw);
  font-size: calc(12 * 100 / 1366 * 1vw);
  margin-top: auto;
}
.businessMap--show .worksBlock__co {
  font-size: calc(10 * 100 / 1366 * 1vw);
  margin-bottom: calc(6 * 100 / 1366 * 1vw);
}
.businessMap--show .worksBlock__title--p, .businessMap--show .worksBlock__co--p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.businessMap--show .worksTop__pageNavList::after {
  transform: translateX(100%);
}
.businessMap--show .worksTop__pageNavBtn:nth-child(1) .hoverText__base > span, .businessMap--show .worksTop__pageNavBtn:nth-child(1) .hoverText__position > span {
  color: rgba(var(--color-black), 1);
}
.businessMap--show .worksTop__pageNavBtn:nth-child(2) .hoverText__base > span, .businessMap--show .worksTop__pageNavBtn:nth-child(2) .hoverText__position > span {
  color: #fff;
}

/* ============================================================================================ pageWorksDetail */
.pageWorksDetail .pageHeader {
  padding-bottom: 126px;
}
.pageWorksDetail .pageTitle {
  font-size: 28px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
}

a.pageHeader__hamburger--link {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 15px;
}

/* ================================================================== wdArticle */
.wdArticle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 140px;
}

/* ================================================================== wdInfo */
.wdInfo {
  position: sticky;
  height: calc(100vh - 100px - 40px);
  top: 100px;
  align-self: flex-start;
  width: 18.9043209877%;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.wdInfo .wdInfo__target--title, .wdInfo .wdInfo__clientName, .wdInfo .tagsLink, .wdInfo a.tagsLink {
  padding-top: 5px;
  padding-bottom: 5px;
}

.wdInfo__list .tagsTarget {
  width: auto;
  margin-right: 10px;
}
.wdInfo__list .tagsLink {
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-black), 1);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- wdInfo__title */
.wdInfo__title {
  font-size: 21px;
  line-height: 1.3;
  text-align: left;
  margin-bottom: 20px;
}

/* --------------------------------------- wdInfo__clientName */
.wdInfo__clientName {
  font-size: 11px;
  line-height: 1.3;
}

/* --------------------------------------- tagsTarget tagsLink */
.tagsTarget {
  display: inline-block;
  font-size: 0;
}

.tagsLink, a.tagsLink {
  font-size: 14px;
}

/* --------------------------------------- wdInfo__target */
.wdInfo__target {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  text-align: left;
  line-height: 1;
  margin-bottom: 3px;
}

/* wdInfo__target title */
.wdInfo__target--title {
  position: relative;
  top: 3px;
  align-self: flex-start;
  width: 70px;
  font-size: 10px;
}

/* wdInfo__target detail */
.wdInfo__target--detail {
  width: calc(100% - 70px);
}

/* ============================================================================================ wdSection */
.wdSection {
  position: relative;
  width: 69.4444444444%;
}

/* ================================================================== wdKv */
.wdKv {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 3;
}

/* --------------------------------------- playBtn */
.playBtn {
  margin-left: auto;
  margin-top: 20px;
}
.playBtn .hoverText__base > span, .playBtn .hoverText__position > span {
  color: #fff;
}

/* ================================================================== wdKv__areaInner */
.wdKv__areaInner {
  padding-top: 56.25%;
}

/* ================================================================== wdMtBlock */
.wdMtBlock {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* --------------------------------------- wdMtBlock__detail */
.wdMtBlock__detail {
  width: calc(100% - 205px);
  margin-bottom: 110px;
}

/* --------------------------------------- wdMt */
.wdMt {
  margin-top: 60px;
}
.wdMt .videoWrapper {
  margin-bottom: 20px;
}

.wdMt__main {
  font-size: 15px;
}
.wdMt__main aside {
  font-size: 10px;
}
.wdMt__main aside a, .wdMt__main p a {
  display: inline;
  text-decoration: underline;
}
.wdMt__main p {
  margin-bottom: 15px;
}
.wdMt__main sup {
  display: inline-block;
  transform: scale(0.7);
}
.wdMt__main h1, .wdMt__main h2, .wdMt__main h3, .wdMt__main h4, .wdMt__main h5, .wdMt__main h6 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 20px;
}
.wdMt__main img {
  border-radius: 7px;
}
.wdMt__main .wdMtBlock__title {
  width: 205px;
  font-size: 11px;
}

/* --------------------------------------- wdMtBlock__thum */
.wdMtBlock__thum {
  margin-bottom: 10px;
}
.wdMtBlock__thum li {
  position: relative;
  width: calc(100% + 20px);
  left: -10px;
  display: flex;
}
.wdMtBlock__thum li p {
  padding: 10px;
  margin-bottom: 0;
}

/* --------------------------------------- award credit */
.dMtBlock__award .wdMtBlock__detail, .dMtBlock__credit .wdMtBlock__detail {
  font-size: 13px;
}

/* ================================================================== dMtBlock__member */
.dMtBlock__member {
  margin-top: 100px;
}
.dMtBlock__member .wdMtBlock__detail {
  margin-bottom: 0;
}

/* --------------------------------------- dMtBlock__memberList */
.dMtBlock__memberList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.dMtBlock__memberTarget {
  width: calc((100% - 80px) / 3);
  margin-right: 40px;
  margin-bottom: 50px;
}
.dMtBlock__memberTarget:nth-child(3n) {
  margin-right: 0;
}

/* --------------------------------------- dMtBlock__memberThum */
.dMtBlock__memberThum--inner {
  position: relative;
  padding-top: 100%;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 18px;
}
.dMtBlock__memberThum--inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --------------------------------------- dMtBlock__memberInfo */
.dMtBlock__memberInfo--main {
  margin-bottom: 18px;
}

.dMtBlock__memberInfo--name, .dMtBlock__memberInfo--title {
  line-height: 1;
}

.dMtBlock__memberInfo--name {
  font-size: 13px;
  margin-bottom: 8px;
}

.dMtBlock__memberInfo--title {
  font-size: 11px;
}

.dMtBlock__memberInfo--comment {
  padding: 10px 12px;
  border-radius: 7px;
  background-color: #fff;
}

.dMtBlock__memberInfo--comment--p {
  font-size: 11px;
  line-height: 1.5;
}

/* ================================================================== relatedArticle */
.relatedArticle {
  position: relative;
}

/* --------------------------------------- allBtn */
.allBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 125px;
  transform: translate(0, -20%);
}

/* --------------------------------------- relatedSection */
.relatedSection {
  position: relative;
  overflow: hidden;
  margin-bottom: -50px;
}

.wdRelated .worksBlock {
  width: 100%;
  margin: 0;
  height: 100%;
}

/* --------------------------------------- #wdRelated--slider */
@media only screen and (min-width: 768px) {
  .wdRelated .keen-slider:not([data-keen-slider-disabled]) {
    display: flex;
    flex-wrap: wrap;
  }
  .wdRelated .keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
    min-width: inherit !important;
    max-width: inherit !important;
    transform: translate(0, 0) !important;
  }
  #wdRelated--slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #wdRelated--slider .keen-slider__slide {
    position: relative;
    width: calc((100% - 180 * 100 / 1366 * 1vw) / 4);
    margin-right: calc(60 * 100 / 1366 * 1vw);
    margin-bottom: calc(90 * 100 / 1366 * 1vw);
  }
  #wdRelated--slider .keen-slider__slide:nth-child(4n) {
    margin-right: 0;
  }
}
/* ============================================================================================ kv fixed */
/* --------------------------------------- anime */
@keyframes fixedAnime-1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fixedAnime-2 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes hiddenAnime-2 {
  0% {
    height: 100%;
  }
  50% {
    height: 0;
  }
  100% {
    height: 0;
  }
}
/* --------------------------------------- wdKv__fixed--anime */
.wdKv__fixed--anime {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: auto;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================================================ tags */
.tags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: calc(-120px - min(25 * 100 / 1366 * 1vw, 25px));
  z-index: 5;
  pointer-events: none;
  overflow: clip;
}

.tagsInner {
  position: sticky;
  top: 100px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tagsModal {
  position: relative;
  width: 175px;
  height: 45px;
  background-color: rgba(var(--color-black), 1);
  border-radius: 5px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* ================================================================== tagsBtn */
.tagsBtn {
  width: 100%;
  height: 45px;
  background-color: rgba(var(--color-black), 1);
  border-radius: 5px;
  margin-left: auto;
  pointer-events: all;
  cursor: pointer;
}
.tagsBtn .hoverText__base, .tagsBtn .hoverText__position {
  color: #fff;
}
.tagsBtn .hoverText__base > span, .tagsBtn .hoverText__position > span {
  font-size: 15px;
}

/* --------------------------------------- tagsIcon */
.tagsIcon {
  position: absolute;
  width: 22px;
  height: 4px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.tagsIcon__dot {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  overflow: hidden;
}
.tagsIcon__dot::before, .tagsIcon__dot::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.2s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tagsIcon__dot::after {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
}

/* ================================================================== tagsModal__inner */
.tagsModal__inner {
  position: relative;
  overflow: hidden;
}

/* --------------------------------------- tagsLiist */
.tagsLiist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 25px;
  padding-right: 25px;
}

/* --------------------------------------- tagsTarget */
.tagsTarget {
  width: 25%;
}
.tagsTarget .hoverText__base, .tagsTarget .hoverText__position {
  color: #fff;
}
.tagsTarget .hoverText__base > span, .tagsTarget .hoverText__position > span {
  font-size: 18px;
}
.tagsTarget .btnLink, .tagsTarget a.btnLink {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.tagsTarget .tagsNum {
  font-size: 12px;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
  margin-left: 0.2em;
}

/* ============================================================================================ body class */
.videoWrapper iframe {
  top: auto;
  bottom: 0;
  z-index: 1;
}

.wdKvThumImg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

.is--kv--img .wdKvThumImg {
  display: block;
}

/* --------------------------------------- wdKv--fixed */
.wdKv--fixed .wdKv {
  position: fixed;
  width: 245px;
  height: auto;
  top: auto;
  bottom: 110px;
  left: 30px;
  animation: fixedAnime-1 1s 0s ease-in-out forwards;
  cursor: pointer;
}
.wdKv--fixed .wdKv__fixed--anime {
  animation: fixedAnime-2 0.6s ease-in-out forwards;
}

/* --------------------------------------- wdKv--hidden */
.wdKv--hidden .wdKv {
  pointer-events: none;
}
.wdKv--hidden .wdKv__fixed--anime {
  bottom: auto;
  top: 0;
  animation: hiddenAnime-2 0.3s ease-in-out forwards;
}

/* --------------------------------------- tags--open */
.tagsModal, .tagsModal__inner, .tagsLiist {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tagsModal__inner {
  height: 0;
}

.tagsLiist {
  opacity: 0;
  transform: translate(0, 20px);
}

.tags--open .tagsModal {
  width: 495px;
  height: auto;
  /*        height: 137px;*/
}
.tags--open .tagsModal__inner {
  height: calc(100% - 45px);
}
.tags--open .tagsLiist {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.tags--open .tagsTarget {
  pointer-events: all;
}
.tags--open .tagsBtn .tagsIcon__dot:nth-child(1)::before, .tags--open .tagsBtn .tagsIcon__dot:nth-child(3)::before, .tags--open .tagsBtn .tagsIcon__dot:nth-child(1)::after, .tags--open .tagsBtn .tagsIcon__dot:nth-child(3)::after {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  opacity: 0;
}

/* ============================================================================================ hover pc */
@media (hover: hover) and (pointer: fine) {
  .businessMap__Inner .businessMap__List:hover, .businessMap__Inner .businessMap__List:active, .businessMap__Nav .businessMap__Target:hover, .businessMap__Nav .businessMap__Target:active {
    background-color: #fff;
  }
  .wdMtBlock__detail aside a:hover, .wdMtBlock__detail aside a:active, .wdMtBlock__detail p a:hover, .wdMtBlock__detail p a:active {
    text-decoration: none;
  }
  .tagsBtn:hover .tagsIcon__dot::after, .tagsBtn:active .tagsIcon__dot::after {
    opacity: 1;
  }
  .tagsBtn:hover .tagsIcon__dot:nth-child(1)::after, .tagsBtn:active .tagsIcon__dot:nth-child(1)::after {
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
  }
  .tagsBtn:hover .tagsIcon__dot:nth-child(2)::after, .tagsBtn:active .tagsIcon__dot:nth-child(2)::after {
    transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
  }
  .tagsBtn:hover .tagsIcon__dot:nth-child(3)::after, .tagsBtn:active .tagsIcon__dot:nth-child(3)::after {
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
  }
  .wdInfo__list .tagsTarget:hover .tagsLink, .wdInfo__list .tagsTarget:active .tagsLink {
    text-decoration-color: rgba(var(--color-black), 0);
  }
}
/* ============================================================== WDmodal */
.WDmodal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.85);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.WDmodal__inner {
  position: relative;
  width: calc(1000 * 100 / 800 * 1vh);
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-aspect-ratio: 1400/900) {
  .WDmodal__inner {
    width: calc(1100 * 100 / 1366 * 1vw);
  }
}
.WDmodal__movieWrapper {
  position: relative;
  padding-top: 56.25%;
}
.WDmodal__movieWrapper iframe {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  bottom: 0;
}

.WDmodal__closeBtn {
  position: fixed;
  width: 120px;
  height: 100px;
  top: 0;
  right: 0;
  z-index: 3;
  cursor: pointer;
}

.WDmodal__closeBtn--inner {
  position: absolute;
  width: 55px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.WDmodal__closeBtn--inner::before, .WDmodal__closeBtn--inner::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.WDmodal__closeBtn--inner::before {
  transform: rotate(30deg);
}
.WDmodal__closeBtn--inner::after {
  transform: rotate(-30deg);
}

.playBtn {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.WDmodal--show .WDmodal {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.WDmodal--show .playBtn {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .WDmodal__closeBtn:hover .WDmodal__closeBtn--inner::before, .WDmodal__closeBtn:hover .WDmodal__closeBtn--inner::after, .WDmodal__closeBtn:active .WDmodal__closeBtn--inner::before, .WDmodal__closeBtn:active .WDmodal__closeBtn--inner::after {
    transform: rotate(0deg);
  }
}
.WDmodal--show .WDmodal {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.WDmodal--show .playBtn {
  opacity: 0;
}/*# sourceMappingURL=works.css.map */