@charset "UTF-8";
/*==========================================================================
# reset - ブラウザの差異や不要なスタイルを無くすためのスタイル
========================================================================== */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/***************************************************
ベーススタイル
***************************************************/
html {
  font-size: 1px;
  scroll-behavior: smooth;
}

body {
  font-family: "Libre Baskerville", serif;
  color: #16160E;
  background-color: #E1E1E1;
  font-size: 16rem;
}
body.is-active {
  overflow: hidden;
}

.wrapper {
  overflow-y: hidden;
  height: 100dvh;
  -webkit-animation: fadeIn 2s ease forwards;
          animation: fadeIn 2s ease forwards;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 639.9px) {
  .wrapper {
    height: auto;
    overflow-y: auto;
  }
}
@media screen and (max-width: 639.9px) {
  .wrapper.works-wrapper {
    height: 100dvh;
    overflow-y: hidden;
  }
}

img {
  width: 100%;
}

a {
  cursor: pointer;
  color: inherit;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 1024px) {
  .is-sp {
    display: none;
  }
}

@media screen and (max-width: 639.9px) {
  .is-pc {
    display: none;
  }
}

/***************************************************
ヘッダーのスタイル
***************************************************/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  z-index: 300;
  background-color: #E1E1E1;
  border-right: 1px solid #16160E;
}
@media screen and (max-width: 639.9px) {
  .header {
    width: 100%;
    height: 50px;
    border-right: none;
    border-bottom: 1px solid #16160E;
    padding-inline: 10px 20px;
  }
}

.header--lower {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 25px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 639.9px) {
  .header--lower {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    padding-bottom: 0;
  }
}

.header__title {
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  font-size: 28rem;
  font-weight: 700;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .header__title {
    font-size: 20rem;
  }
}
@media screen and (max-width: 639.9px) {
  .header__title {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    font-size: 16rem;
  }
}

.header__title-sub {
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 20rem;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .header__title-sub {
    font-size: 16rem;
  }
}
@media screen and (max-width: 639.9px) {
  .header__title-sub {
    display: none;
  }
}

/***************************************************
TOPページmainスタイル
***************************************************/
.top-main {
  margin-left: 50px;
  position: relative;
  height: 100%;
  width: calc(100% - 50px);
  overflow: hidden;
  text-align: center;
  background-color: #E1E1E1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  container-type: inline-size;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 8px;
}
@media screen and (max-width: 639.9px) {
  .top-main {
    margin-left: 0;
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 15px;
    height: calc(100dvh - 50px);
    margin-top: 50px;
    container-type: inline-size;
  }
}

.top-main__title {
  position: absolute;
  font-size: 7.9861111111vw;
  font-size: 8.273381295cqw;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  white-space: nowrap;
  font-weight: 700;
  color: #16160E;
  z-index: 10;
}
@media screen and (max-width: 639.9px) {
  .top-main__title {
    width: 100%;
    font-size: 11.1111111111cqw;
  }
}

@media screen and (max-width: 639.9px) {
  .top-main__title h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-main__title h1 .is-first {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .top-main__title h1 .is-last {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

.top-main__title-white {
  position: absolute;
  font-weight: 700;
  font-size: 7.9861111111vw;
  font-size: 8.273381295cqw;
  pointer-events: none;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 20;
  width: auto;
  height: 100%;
  aspect-ratio: 520/1024;
  overflow: hidden;
}
@media screen and (max-width: 639.9px) {
  .top-main__title-white {
    aspect-ratio: 283/590;
  }
}

.top-main__title-white--text {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  white-space: nowrap;
  z-index: 20;
  background-color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  line-height: 1.5;
}
@media screen and (max-width: 639.9px) {
  .top-main__title-white--text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100cqw;
    line-height: 1;
    font-size: 11.1111111111cqw;
  }
  .top-main__title-white--text .is-first {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .top-main__title-white--text .is-last {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

.top-main__video {
  width: auto;
  height: 90.234375%;
  aspect-ratio: 520/924;
  max-height: 100vh;
  position: relative;
}
@media screen and (max-width: 639.9px) {
  .top-main__video {
    position: absolute;
    top: calc(50% - 9px);
    left: 50%;
    translate: -50% -50%;
    max-width: 400px;
    height: 85.2542372881%;
  }
}
.top-main__video img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-main__title-sub {
  padding-bottom: 36px;
  font-size: 30rem;
}
@media screen and (max-width: 639.9px) {
  .top-main__title-sub {
    padding-bottom: 15px;
    font-size: 14rem;
  }
}

/***************************************************
ドロワーメニューのスタイル
***************************************************/
.drawer__icon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 83.5px;
  border-bottom: 1px solid #16160E;
  display: grid;
  place-items: center;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
@media (any-hover: hover) {
  .drawer__icon:hover {
    background-color: #E1E1E1;
    opacity: 1;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__icon {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-bottom: 0;
    height: 100%;
    margin-left: auto;
  }
}

.header--lower .drawer__icon {
  height: 83.5px;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .header--lower .drawer__icon {
    height: 60px;
  }
}
@media screen and (max-width: 639.9px) {
  .header--lower .drawer__icon {
    height: 100%;
  }
}

.drawer__icon.js-show {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 150px;
  height: 100%;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
@media (any-hover: hover) {
  .drawer__icon.js-show:hover {
    background-color: #5B5B4E;
    opacity: 1;
  }
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__icon.js-show {
    width: 100px;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__icon.js-show {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% + 40px);
    translate: -20px 0;
    height: 50px;
  }
}

.drawer__icon--bar {
  height: 15px;
  width: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 639.9px) {
  .drawer__icon--bar {
    width: 18px;
    height: 10.2px;
    gap: 3.5px;
  }
}

.drawer__icon.js-show .drawer__icon--bar {
  height: 50px;
  width: 50px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__icon.js-show .drawer__icon--bar {
    height: 32px;
    width: 32px;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__icon.js-show .drawer__icon--bar {
    height: 20px;
    width: 20px;
  }
}
.drawer__icon.js-show .drawer__icon--bar .drawer__icon--bar1,
.drawer__icon.js-show .drawer__icon--bar .drawer__icon--bar3 {
  background-color: #fff;
  width: 141.4213562373%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.drawer__icon.js-show .drawer__icon--bar .drawer__icon--bar1 {
  rotate: 45deg;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.drawer__icon.js-show .drawer__icon--bar .drawer__icon--bar3 {
  rotate: -45deg;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.drawer__icon.js-show .drawer__icon--bar .drawer__icon--bar2 {
  display: none;
}

.drawer__icon--bar1,
.drawer__icon--bar2,
.drawer__icon--bar3 {
  width: 100%;
  height: 2px;
  scale: 1 1.1;
  background-color: #16160E;
}
@media screen and (max-width: 639.9px) {
  .drawer__icon--bar1,
  .drawer__icon--bar2,
  .drawer__icon--bar3 {
    height: 1px;
    scale: 1 1.1;
  }
}

.drawer__icon--bar2 {
  width: 80%;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #16160E;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.drawer.js-show {
  display: block;
  visibility: visible;
  opacity: 1;
}

.drawer__inner {
  margin-left: 150px;
  height: 100%;
  border-left: 1px solid #fff;
  position: relative;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__inner {
    margin-left: 100px;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__inner {
    margin-left: 0;
    margin-top: 50px;
    border-left: none;
    border-top: 1px solid #fff;
    height: calc(100% - 50px);
  }
}

.drawer__list-item--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  font-size: 46rem;
  font-weight: 700;
  color: #fff;
  padding-left: 70px;
  padding-block: 30px;
  border-bottom: 1px solid #fff;
  line-height: 1.2391304348;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__list-item--link {
    font-size: 32rem;
    padding-block: 20px;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__list-item--link {
    font-size: 26rem;
    padding-inline: 20px;
    padding-block: 20px;
    line-height: 1.2307692308;
  }
}
@media (any-hover: hover) {
  .drawer__list-item--link:hover {
    background-color: #5B5B4E;
    opacity: 1;
  }
}

.drawer__name {
  position: absolute;
  bottom: 70px;
  right: 70px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 20px;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__name {
    bottom: 32px;
    right: 32px;
    gap: 10px;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__name {
    bottom: 20px;
    right: 20px;
    gap: 3px;
  }
}

.drawer__name--head {
  font-size: 28rem;
  font-weight: 700;
  line-height: 1.25;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__name--head {
    font-size: 24rem;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__name--head {
    font-size: 20rem;
  }
}

.drawer__name--sub {
  font-size: 20rem;
  line-height: 1.2;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .drawer__name--sub {
    font-size: 16rem;
  }
}
@media screen and (max-width: 639.9px) {
  .drawer__name--sub {
    font-size: 14rem;
    line-height: 1.2857142857;
  }
}

/***************************************************
下層ぺージmain共通スタイル
***************************************************/
.lower-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  max-height: 100%;
  margin-left: 50px;
  overflow-y: hidden;
}
@media screen and (max-width: 639.9px) {
  .lower-main {
    margin-left: 0;
    margin-top: 50px;
    padding-inline: 11px;
  }
}

/***************************************************
ローディングアニメ－ション用スタイル
***************************************************/
body.is-loading {
  overflow: hidden;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  background-color: #E1E1E1;
  z-index: 1000;
  display: grid;
  place-items: center;
  font-size: 36rem;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 639.9px) {
  .loading {
    font-size: 24rem;
  }
}

.show-loader .loading {
  opacity: 1;
  visibility: visible;
}

.loading__inner {
  overflow-y: hidden;
}

/***************************************************
infoページ用スタイル
***************************************************/
.info-main {
  padding-bottom: 60px;
}
@media screen and (max-width: 639.9px) {
  .info-main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow-y: auto;
  }
}

.info__section {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media screen and (max-width: 639.9px) {
  .info-profile {
    padding-top: 17px;
  }
}

.info-profile__title {
  padding-left: 60px;
}
@media screen and (max-width: 639.9px) {
  .info-profile__title {
    padding-left: 0;
  }
}

.info__title {
  padding-top: 28px;
  padding-bottom: 26.5px;
  width: 100%;
  border-bottom: 1px solid #16160E;
  height: 83.5px;
  -ms-flex-line-pack: center;
      align-content: center;
  font-weight: 700;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .info__title {
    height: 60px;
    padding-block: 20px;
  }
}
@media screen and (max-width: 639.9px) {
  .info__title {
    padding-block: 0;
    height: auto;
    border-bottom: none;
    font-size: 14rem;
  }
}

.info__contents {
  padding-block: 36px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1.375;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .info__contents {
    padding-block: 24px;
    font-size: 14rem;
  }
}
@media screen and (max-width: 639.9px) {
  .info__contents {
    font-size: 14rem;
    line-height: 1.2857142857;
    padding-top: 40px;
    padding-bottom: 0;
  }
}

.info-profile__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 20px;
  padding-left: 60px;
}
@media screen and (max-width: 639.9px) {
  .info-profile__contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 0;
    gap: 10px;
  }
}

.info-profile__img {
  width: 365px;
  aspect-ratio: 365/364;
  height: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .info-profile__img {
    width: 250px;
  }
}
@media screen and (max-width: 639.9px) {
  .info-profile__img {
    width: 100%;
  }
}
.info-profile__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.info-profile__text--wrapper {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  height: auto;
  gap: 22px;
}
@media (max-height: 855px) {
  .info-profile__text--wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-height: 620px) {
  .info-profile__text--wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 639.9px) {
  .info-profile__text--wrapper {
    max-height: initial;
    gap: 18px;
    grid-template-columns: 1fr;
  }
}

.info-profile__text {
  width: 312px;
}
@media screen and (max-width: 639.9px) {
  .info-profile__text {
    width: 100%;
  }
}

@media screen and (max-width: 639.9px) {
  .info-contact {
    margin-top: 80px;
  }
}

.info-contact__title {
  padding-left: 150px;
}
@media screen and (max-width: 639.9px) {
  .info-contact__title {
    padding-left: 0;
  }
}

.info-contact__contents {
  padding-left: 150px;
}
@media screen and (max-width: 639.9px) {
  .info-contact__contents {
    padding-left: 0;
  }
}

.info-contact__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 22px;
}
@media screen and (max-width: 639.9px) {
  .info-contact__links {
    gap: 18px;
  }
}

@media screen and (max-width: 639.9px) {
  .info-exhibition {
    margin-top: 80px;
  }
}

.info-exhibition__title {
  padding-left: 150px;
}
@media screen and (max-width: 639.9px) {
  .info-exhibition__title {
    padding-left: 0;
  }
}

.info-exhibition__list {
  padding-left: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 22px;
  max-height: calc(100vh - 80px);
}
@media (max-height: 900px) {
  .info-exhibition__list {
    width: 796px;
  }
}
@media (max-height: 503.9px) {
  .info-exhibition__list {
    width: 1130px;
  }
}
@media (max-height: 384.9px) {
  .info-exhibition__list {
    width: 1442px;
  }
}
@media screen and (max-width: 639.9px) {
  .info-exhibition__list {
    padding-left: 0;
    max-height: initial;
    gap: 18px;
    width: 100%;
  }
}

.info-exhibition__list-item {
  width: 312px;
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}
.info-exhibition__list-item .year {
  font-weight: 700;
}
@media screen and (max-width: 639.9px) {
  .info-exhibition__list-item {
    width: 100%;
  }
}

.info-credit {
  padding-right: 297px;
}
@media screen and (max-width: 639.9px) {
  .info-credit {
    padding-right: 0;
    margin-top: 80px;
    padding-bottom: 50px;
  }
}

.info-credit__title {
  padding-left: 150px;
  padding-right: 40px;
}
@media screen and (max-width: 639.9px) {
  .info-credit__title {
    padding-left: 0;
    padding-right: 0;
  }
}

.info-credit__text {
  padding-left: 150px;
  padding-right: 40px;
}
@media screen and (max-width: 639.9px) {
  .info-credit__text {
    padding-left: 0;
    padding-right: 0;
  }
}

/***************************************************
アドレスクリックでメールコピー表示用スタイル
***************************************************/
.mailto-copy {
  position: relative;
}

.mailto-copy::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  translate: -50% 0;
  background-color: #16160E;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.mailto-copy:hover::after,
.mailto-copy:focus-visible::after,
.mailto-copy.copied::after { /* クリック後の一時表示にも使う */
  opacity: 1;
}

/***************************************************
ポートフォリオ一覧ページスタイル
***************************************************/
.works-main {
  padding-left: 50px;
  padding-right: 150px;
  padding-top: 10px;
}
@media screen and (max-width: 639.9px) {
  .works-main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.works-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: calc(100% - 244px);
  gap: 10px;
  overflow-x: visible;
  width: auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-transition: aspect-ratio 1s ease;
  transition: aspect-ratio 1s ease;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .works-items {
    height: calc(100% - 160px);
  }
}
@media screen and (max-width: 639.9px) {
  .works-items {
    height: calc(100% - 183px);
  }
}

.works-items.aspect-all {
  aspect-ratio: 6375/770;
}

.works-items.aspect-installation {
  aspect-ratio: 1125/770;
}

.works-items.aspect-object {
  aspect-ratio: 1500/770;
}

.works-items.aspect-wall {
  aspect-ratio: 1500/770;
}

.works-items.aspect-light {
  aspect-ratio: 750/770;
}

.works-items.aspect-commission {
  aspect-ratio: 1125/770;
}

.works-items.aspect-other {
  aspect-ratio: 750/770;
}

.works-item {
  height: calc(33.3333333333% - 6.6666666667px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: translate 1s ease;
  transition: translate 1s ease;
}

@media (any-hover: hover) {
  .works-item:hover {
    translate: 50px 0;
    opacity: 1;
  }
}
.works-item__img {
  height: 100%;
  width: auto;
}

.works-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 244px;
  padding-left: 100px;
  -ms-flex-line-pack: end;
      align-content: end;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .works-footer {
    height: 160px;
  }
}
@media screen and (max-width: 639.9px) {
  .works-footer {
    height: 133px;
    padding-left: 10px;
  }
}

.works-footer__current {
  font-size: 70rem;
  line-height: 1.2428571429;
  font-weight: 700;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .works-footer__current {
    font-size: 48rem;
  }
}
@media screen and (max-width: 639.9px) {
  .works-footer__current {
    font-size: 29rem;
    line-height: 1.2413793103;
  }
}

.works-footer__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  margin-top: 14px;
  font-size: 22rem;
  line-height: 1.2272727273;
  font-weight: 700;
  padding-bottom: 26px;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .works-footer__buttons {
    font-size: 16rem;
    gap: 16px;
  }
}
@media screen and (max-width: 639.9px) {
  .works-footer__buttons {
    gap: 6px;
    font-size: 12rem;
    line-height: 1.25;
    margin-top: 4px;
    padding-bottom: 33px;
  }
}
.works-footer__buttons button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  color: inherit;
  position: relative;
}
.works-footer__buttons button::after {
  position: absolute;
  bottom: 0px;
  left: 50%;
  translate: -50%;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #16160E;
  scale: 0 1;
  -webkit-transition: scale 0.3s ease;
  transition: scale 0.3s ease;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.works-footer__buttons button:hover::after {
  scale: 1 1;
}
.works-footer__buttons button.is-current::after {
  scale: 1 1;
}

/***************************************************
ポートフォリオ詳細ページ用スタイル
***************************************************/
.works-detail__main {
  padding-left: 50px;
  overflow-x: auto;
}
@media screen and (max-width: 639.9px) {
  .works-detail__main {
    padding-inline: 10px;
    overflow-x: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow-y: auto;
  }
}

.works-detail__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: calc(100% - 100px);
  gap: 5px;
}
@media screen and (max-width: 639.9px) {
  .works-detail__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    margin-top: 40px;
    gap: 10px;
    padding-bottom: 10px;
  }
}

.works-detail__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100%;
  width: auto;
  overflow: hidden;
}
@media screen and (max-width: 639.9px) {
  .works-detail__item {
    width: 100%;
    height: auto;
  }
}
.works-detail__item img {
  width: auto;
  height: 100%;
}
@media screen and (max-width: 639.9px) {
  .works-detail__item img {
    width: 100%;
    height: auto;
  }
}

.works-detail__item.is-parallax {
  height: 100%;
  width: auto;
}
.works-detail__item.is-parallax img {
  width: 110%;
}
@media screen and (max-width: 639.9px) {
  .works-detail__item.is-parallax {
    aspect-ratio: auto;
  }
  .works-detail__item.is-parallax img {
    width: 100%;
  }
}

.works-detail__item.is-parallax-y {
  height: 100%;
  width: auto;
}
.works-detail__item.is-parallax-y img {
  width: auto;
  height: 105%;
}
@media screen and (max-width: 639.9px) {
  .works-detail__item.is-parallax-y img {
    height: auto;
    width: 100%;
  }
}

.works-detail__next {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 95px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 20px;
  padding-right: 150px;
}
@media screen and (max-width: 639.9px) {
  .works-detail__next {
    margin-left: 0;
    margin-top: 59px;
    padding-right: 0;
    gap: 22px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.works-detail__next-text {
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.2083333333;
  padding-right: 24px;
  position: relative;
}
@media screen and (max-width: 639.9px) {
  .works-detail__next-text {
    font-size: 14rem;
    line-height: 1.2857142857;
    padding-right: 18px;
  }
}

.works-detail__next-text::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #16160E;
  top: 50%;
  right: 0px;
  translate: 0 -50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, translate 0.3s ease;
  transition: opacity 0.3s ease, translate 0.3s ease;
}
@media screen and (max-width: 639.9px) {
  .works-detail__next-text::before {
    width: 14px;
  }
}

.works-detail__next-text::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #16160E;
  border-right: 2px solid #16160E;
  rotate: 45deg;
  right: 0;
  top: 50%;
  translate: 0 -44%;
  -webkit-transition: translate 0.3s ease;
  transition: translate 0.3s ease;
}
@media screen and (max-width: 639.9px) {
  .works-detail__next-text::after {
    width: 7px;
    height: 7px;
  }
}

@media (any-hover: hover) {
  .works-detail__next:hover > .works-detail__next-text::before {
    opacity: 1;
    translate: 10px 0;
  }
  .works-detail__next:hover > .works-detail__next-text::after {
    translate: 10px -44%;
  }
}
.works-detail__next-img {
  width: 320px;
  aspect-ratio: 320/219;
}
@media screen and (min-width: calc(639.9px + 0.1px)) and (max-width: 1023.9px) {
  .works-detail__next-img {
    width: 240px;
  }
}
@media screen and (max-width: 639.9px) {
  .works-detail__next-img {
    width: 100%;
    aspect-ratio: auto;
    max-width: 340px;
  }
}
.works-detail__next-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.works-detail__title--wrapper {
  position: fixed;
  bottom: 0;
  left: 50px;
  width: 100%;
  padding-left: 50px;
  height: 100px;
  -ms-flex-line-pack: center;
      align-content: center;
}
@media screen and (max-width: 639.9px) {
  .works-detail__title--wrapper {
    position: static;
    padding-left: 0;
    padding-top: 17px;
    height: auto;
  }
}

.works-detail__title {
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 639.9px) {
  .works-detail__title {
    font-size: 14rem;
  }
}