.works__index__ttl {
  margin-top: 48px;
}
@media (min-width: 835px) {
  .works__index__ttl {
    margin-top: 80px;
  }
}

.works__index__txt {
  margin-top: 8px;
  text-align: center;
  font-size: 0.625rem;
}
@media (min-width: 835px) {
  .works__index__txt {
    margin-top: 12px;
    text-align: left;
    font-size: 0.75rem;
  }
}

.works__indexlist {
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  margin-top: 32px;
  padding: 16px 0 48px;
  position: relative;
}
@media (min-width: 835px) {
  .works__indexlist {
    display: flex;
    flex-wrap: wrap;
    margin-top: 64px;
    padding: 16px 0 48px;
  }
}

.works__indexlist__item {
  font-size: 0.8125rem;
  margin-top: 20px;
}
.works__indexlist__item a {
  font-weight: 500;
}
@media (min-width: 835px) {
  .works__indexlist__item {
    font-size: 1rem;
    margin-top: 32px;
    width: 50%;
  }
}

.works__indexlist__item__cat {
  margin-top: 0px;
  font-size: 0.625rem;
}
@media (min-width: 835px) {
  .works__indexlist__item__cat {
    margin-top: 2px;
    font-size: 0.75rem;
  }
}
.works__indexlist__item__cat .category {
  display: flex;
}
.works__indexlist__item__cat li + li {
  margin-left: 0.5em;
}
.works__indexlist__item__cat li + li:before {
  content: "/";
  margin-right: 0.5em;
}

.works__list {
  display: flex;
  flex-wrap: wrap;
  margin: 46px -10px -10px;
  position: relative;
}
@media (min-width: 835px) {
  .works__list {
    margin: 16px -32px -32px;
  }
}

.works__list__item {
  aspect-ratio: 1/1;
  background: #fff;
  margin: 10px;
  position: relative;
  width: calc(50% - 20px);
}
@media (min-width: 835px) {
  .works__list__item {
    height: calc(25% - 64px);
    margin: 32px;
    width: calc(25% - 64px);
  }
}
@media (max-width: 834px) {
  .works__list__item.-n2, .works__list__item.-n4, .works__list__item.-n6, .works__list__item.-n8, .works__list__item.-n10, .works__list__item.-n12, .works__list__item.-n14, .works__list__item.-n16 {
    transition-delay: 0.1s;
  }
}
@media (min-width: 835px) {
  .works__list__item.-n2, .works__list__item.-n6, .works__list__item.-n10, .works__list__item.-n14 {
    transition-delay: 0.1s;
  }
}
@media (min-width: 835px) {
  .works__list__item.-n3, .works__list__item.-n7, .works__list__item.-n11, .works__list__item.-n15 {
    transition-delay: 0.2s;
  }
}
@media (min-width: 835px) {
  .works__list__item.-n4, .works__list__item.-n8, .works__list__item.-n12, .works__list__item.-n16 {
    transition-delay: 0.3s;
  }
}
.works__list__item a {
  display: block;
  height: 100%;
}
.works__list__item .info {
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  background: #fff;
  border: 1px solid #ff9d00;
  color: #ff9d00;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 1em;
  text-align: center;
  width: 100%;
}
.works__list__item .arw {
  margin-bottom: 4px;
  text-align: center;
}
.works__list__item .arw .c-arw {
  transform: rotate(90deg);
}
.works__list__item .ttl {
  font-size: 0.875rem;
  font-weight: 500;
}
.works__list__item .category {
  display: flex;
  flex-wrap: wrap;
  font-size: min(0.6vw, 12px);
  font-weight: 500;
  justify-content: center;
}
.works__list__item .category li:after {
  content: "/";
  margin: 0 0.5em;
}
.works__list__item .category li:last-child:after {
  display: none;
}

.works__noworks {
  margin-top: 64px;
  font-size: 0.9375rem;
}

.works__listnav {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 1;
  margin-top: 56px;
}
@media (min-width: 835px) {
  .works__listnav {
    margin-top: 96px;
  }
}
.works__listnav .pn {
  margin: 0 16px;
  transition: transform 0.4s 0s ease;
}
.works__listnav .pn a {
  display: block;
}
.works__listnav .pn.-prev i {
  transform: rotate(-180deg);
}
.works__listnav .pn:hover.-prev {
  transform: translate(-5px, 0);
}
.works__listnav .pn:hover.-next {
  transform: translate(5px, 0);
}
.works__listnav .pn.-disable {
  opacity: 0.25;
  pointer-events: none;
}
.works__listnav .index {
  align-items: center;
  display: flex;
  font-weight: 700;
  font-size: 1rem;
}
@media (min-width: 835px) {
  .works__listnav .index {
    font-size: 1.75rem;
  }
}
.works__listnav .index li {
  margin: 0 8px;
}
@media (min-width: 835px) {
  .works__listnav .index li {
    margin: 0 16px;
  }
}
.works__listnav .index li.-active {
  color: #ff9d00;
  pointer-events: none;
}

.works__selectttl {
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-top: 10px;
  width: 40%;
  font-size: 0.625rem;
}

.works__selectrow {
  position: relative;
  z-index: 2;
}

@media (max-width: 834px) {
  .works__select {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff9d00;
    height: 32px;
    overflow: hidden;
    transition: height 0.3s 0s ease;
    width: 60%;
  }
}
.works__select:after {
  position: absolute;
  top: 12px;
  right: 12px;
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 8.7px 5px 0 5px;
  content: "";
  height: 0;
  width: 0;
}
.works__select.-open:after {
  transform: rotate(180deg);
}

.works__catlist {
  display: flex;
  flex-wrap: wrap;
}

.works__catlist__item {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media (max-width: 834px) {
  .works__catlist__item {
    font-size: 0.75rem;
    color: #fff;
    line-height: 34px;
    order: 1;
    padding-left: 1em;
    width: 100%;
  }
}
@media (min-width: 835px) {
  .works__catlist__item + .works__catlist__item {
    margin-left: 32px;
  }
}
@media (min-width: 835px) {
  .works__catlist__item:before {
    background: #ff9d00;
    content: "";
    display: inline-block;
    display: none;
    height: 0.9em;
    margin-right: 0.5em;
    transform: translate(0, 10%);
    width: 0.9em;
  }
}
.works__catlist__item.-active {
  pointer-events: none;
}
@media (max-width: 834px) {
  .works__catlist__item.-active {
    order: 0;
  }
}
@media (min-width: 835px) {
  .works__catlist__item.-active:before {
    display: inline-block;
  }
}
@media (min-width: 835px) {
  .works__catlist__item.-active.-reveal a {
    color: #ff9d00;
  }
}
.works__catlist__item:nth-child(0) {
  transition-delay: calc(0.05s * 0);
}
.works__catlist__item:nth-child(1) {
  transition-delay: calc(0.05s * 1);
}
.works__catlist__item:nth-child(2) {
  transition-delay: calc(0.05s * 2);
}
.works__catlist__item:nth-child(3) {
  transition-delay: calc(0.05s * 3);
}
.works__catlist__item:nth-child(4) {
  transition-delay: calc(0.05s * 4);
}
.works__catlist__item:nth-child(5) {
  transition-delay: calc(0.05s * 5);
}
.works__catlist__item:nth-child(6) {
  transition-delay: calc(0.05s * 6);
}
.works__catlist__item:nth-child(7) {
  transition-delay: calc(0.05s * 7);
}
.works__catlist__item:nth-child(8) {
  transition-delay: calc(0.05s * 8);
}
.works__catlist__item:nth-child(9) {
  transition-delay: calc(0.05s * 9);
}
.works__catlist__item:nth-child(10) {
  transition-delay: calc(0.05s * 10);
}
.works__catlist__item:nth-child(11) {
  transition-delay: calc(0.05s * 11);
}
.works__catlist__item:nth-child(12) {
  transition-delay: calc(0.05s * 12);
}
.works__catlist__item:nth-child(13) {
  transition-delay: calc(0.05s * 13);
}
.works__catlist__item:nth-child(14) {
  transition-delay: calc(0.05s * 14);
}
.works__catlist__item:nth-child(15) {
  transition-delay: calc(0.05s * 15);
}
.works__catlist__item:nth-child(16) {
  transition-delay: calc(0.05s * 16);
}
.works__catlist__item:nth-child(17) {
  transition-delay: calc(0.05s * 17);
}
.works__catlist__item:nth-child(18) {
  transition-delay: calc(0.05s * 18);
}
.works__catlist__item:nth-child(19) {
  transition-delay: calc(0.05s * 19);
}
.works__catlist__item:nth-child(20) {
  transition-delay: calc(0.05s * 20);
}
@media (max-width: 834px) {
  .works__catlist__item.-color.-reveal {
    color: #fff;
  }
}

.works__single__recommend {
  margin-top: 120px;
}
@media (min-width: 835px) {
  .works__single__recommend {
    margin-top: 240px;
  }
}

.works__ph__row {
  position: relative;
}
@media (min-width: 835px) {
  .works__ph__row {
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 834px) {
  .works__ph__row {
    margin: 0 -28px;
  }
}

.works__ph__view {
  position: relative;
}
@media (min-width: 835px) {
  .works__ph__view {
    width: 90%;
  }
}
.works__ph__view .ph {
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.works__ph__view .category {
  line-height: 1;
  margin-top: 12px;
  min-height: 1em;
  text-align: center;
  font-size: 0.625rem;
}
@media (min-width: 835px) {
  .works__ph__view .category {
    margin-top: 20px;
    text-align: right;
    font-size: 0.75rem;
  }
}

.works__ph__view__list {
  aspect-ratio: 16/10;
  position: relative;
}

.works__ph__view__list__item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s 0s ease;
  width: 100%;
}
.works__ph__view__list__item.-active {
  opacity: 1;
  z-index: 1;
}

@media (min-width: 835px) {
  .works__ph__thumb {
    width: 8%;
  }
}
@media (max-width: 834px) {
  .works__ph__thumb {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin: 40px 26px 24px;
  }
}
@media (max-width: 834px) {
  .works__ph__thumb.-minheight {
    min-height: 21.3vw;
  }
}
.works__ph__thumb .item {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s 0s ease;
}
@media (max-width: 834px) {
  .works__ph__thumb .item {
    margin: 2px;
    width: calc(20% - 4px);
  }
}
.works__ph__thumb .-active.item,
.works__ph__thumb .item:hover {
  opacity: 1;
}
@media (min-width: 835px) {
  .works__ph__thumb .item + .item {
    margin-top: 8px;
  }
}

.works__ph__index {
  position: absolute;
  bottom: -38px;
  right: 20px;
  font-size: 1.875rem;
  font-weight: 700;
  height: 64px;
  line-height: 1;
  width: 64px;
}
@media (max-width: 834px) {
  .works__ph__index {
    height: 32px;
    width: 32px;
    font-size: 0.9375rem;
    position: absolute;
    bottom: 0;
    right: 28px;
  }
}
@media (max-width: 834px) and (min-width: 835px) {
  .works__ph__index {
    transform: translate(0, 25%);
  }
}
.works__ph__index:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ff9d00;
  content: "";
  height: 1px;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
}
.works__ph__index .child {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10%, 10%);
}
.works__ph__index .parent {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-10%, -10%);
}

.works__single {
  margin-top: 24px;
}
@media (min-width: 835px) {
  .works__single {
    margin-top: 64px;
  }
}

.works__single__headsub {
  color: #ff9d00;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 0.625rem;
}
@media (min-width: 835px) {
  .works__single__headsub {
    margin-bottom: 8px;
    font-size: 0.8125rem;
  }
}
.works__single__headsub.-mt {
  margin-top: 2em;
}

.works__single__ttl {
  font-size: 1.5rem;
  font-feature-settings: "palt";
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: -4px;
}
@media (min-width: 835px) {
  .works__single__ttl {
    margin-top: -8px;
    font-size: 2.25rem;
  }
}

.works__single__row {
  display: flex;
  margin-top: 32px;
}
@media (min-width: 835px) {
  .works__single__row {
    margin-top: 64px;
  }
}
@media (max-width: 834px) {
  .works__single__row.-nodfnrw {
    display: block;
  }
}

.works__single__info {
  width: 50%;
}
@media (min-width: 835px) {
  .works__single__info {
    width: 320px;
  }
}
@media (max-width: 834px) {
  .works__single__info.-fullnrw {
    width: 80%;
  }
}
@media (max-width: 834px) {
  .works__single__info.-mtnrw {
    margin-top: 32px;
  }
}

.works__single__info__txt {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6923076923;
}
@media (min-width: 835px) {
  .works__single__info__txt {
    font-size: 0.8125rem;
  }
}
.works__single__info__txt .-copy {
  font-size: 0.625rem;
  font-weight: 400;
  margin-top: 0.5em;
}
@media (min-width: 835px) {
  .works__single__info__txt .-copy {
    font-size: 0.6875rem;
  }
}
.works__single__info__txt .staff dl {
  display: flex;
  margin-bottom: 1em;
}
.works__single__info__txt .staff dl dt {
  width: 50%;
}
.works__single__info__txt .staff dl dd {
  width: 50%;
}

.works__single__share {
  align-items: center;
  display: flex;
  margin-top: 32px;
}
@media (min-width: 835px) {
  .works__single__share {
    margin-top: 56px;
  }
}
.works__single__share h5 {
  font-size: 0.625rem;
  font-weight: 700;
}
@media (min-width: 835px) {
  .works__single__share h5 {
    font-size: 0.8125rem;
  }
}
.works__single__share a {
  display: block;
}
.works__single__share ul {
  align-items: center;
  display: flex;
  margin-left: 8px;
}
.works__single__share li {
  margin: 0 8px;
}
.works__single__share .twitter {
  background: url(../../assets/img/common/ico/ico_twitter_b.png) no-repeat 0 0/contain;
  height: 19px;
  width: 23px;
}
@media (min-width: 835px) {
  .works__single__share .twitter:hover {
    background: url(../../assets/img/common/ico/ico_twitter_o.png) no-repeat 0 0/contain;
  }
}
.works__single__share .facebook {
  background: url(../../assets/img/common/ico/ico_facebook_b.svg) no-repeat 0 0/100%;
  height: 20px;
  width: 20px;
}
@media (min-width: 835px) {
  .works__single__share .facebook:hover {
    background: url(../../assets/img/common/ico/ico_facebook_o.svg) no-repeat 0 0/100%;
  }
}

.works__single__back {
  margin-top: 32px;
}
@media (min-width: 835px) {
  .works__single__back {
    margin-top: 56px;
  }
}
.works__single__back .c-arw {
  transform: translate(12px, -50%) rotate(180deg);
}
@media (min-width: 835px) {
  .works__single__back .c-arw {
    transform: translate(12px, -50%) rotate(180deg);
  }
}

.works__single__category {
  display: flex;
  margin-top: 0.25em;
}

.works__single__category__item .hide {
  height: 0;
  padding: 0 0.25em;
  visibility: hidden;
}
.works__single__category__item .c-cubebtn a {
  display: block;
  height: 100%;
}
.works__single__category__item .c-cubebtn {
  height: 20px;
  width: auto;
}
@media (min-width: 835px) {
  .works__single__category__item .c-cubebtn {
    height: 24px;
  }
}
.works__single__category__item .c-cubebtn .btn {
  font-size: 0.6875rem;
  font-weight: 500;
}
@media (min-width: 835px) {
  .works__single__category__item .c-cubebtn .btn {
    font-size: 0.75rem;
  }
}
.works__single__category__item .c-cubebtn .boxBase > .front {
  transform: translateZ(10px);
}
@media (min-width: 835px) {
  .works__single__category__item .c-cubebtn .boxBase > .front {
    transform: translateZ(12px);
  }
}
.works__single__category__item + .works__single__category__item {
  margin-left: 8px;
}

:root {
  --cubeDepth: 128px;
}

.works__cube {
  height: 100%;
  position: relative;
  width: 100%;
}
.works__cube .boxBase > div {
  background: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
}
.works__cube .boxBase > .front {
  transform: translateZ(40vw);
}
@media (min-width: 835px) {
  .works__cube .boxBase > .front {
    transform: translateZ(var(--cubeDepth));
  }
}
.works__cube .boxBase {
  transition: transform 0.3s 0s ease;
}

@media (min-width: 835px) {
  .works__list__item:hover .boxBase {
    transform: rotateX(90deg);
  }
}
.works__list__item:hover .arw {
  opacity: 1;
  transform: translate(0px, 0px);
  transition: all 0.4s 0.2s cubic-bezier(0, 0.55, 0.45, 1);
}

.works__list__item .arw {
  opacity: 0;
  transform: translate(0, -20px);
}