@charset "UTF-8";

/***************************
variable
 ***************************/
:root {
  --color-lightGray: #c2c9cc;
  --color-white: #ffffff;
  --color-darkgray: #131414;
  --color-black: #000000;
  --color-bg: linear-gradient(#131414, #a8afb1);
  --font-size-12px: clamp(10px, 0.625vw, 12px);
  --font-size-16px: clamp(14px, 0.9vw, 16px);
  --font-size-24px: clamp(16px, 1.25vw, 24px);
  --font-size-32px: clamp(24px, 1.666vw, 32px);
  --font-size-56px: clamp(48px, 2.916vw, 56px);
  --ma-25: 1.3vw;
  --ma50: 3vw;
  --ma80: 4vw;
  --ma100: 5.208vw;
  --ma150: 8.312vw;
  --ma200: 10.416vw;
}

.title {
  display: block;
  margin-top: var(--ma200);
  margin-bottom: var(--ma50);
  width: fit-content;
  color: var(--color-darkgray);
  font-size: var(--font-size-56px);
}
.title.show {
  color: var(--color-lightGray);
  transition: color 2s ease;
}

/***************************
fv
 ***************************/

.splide__track {
  height: 100vh;
  width: 100vw;
}
.splide__slide img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  transition: 8s linear;
}
.splide__slide.is-active img {
  transform: scale(1.06);
}
/* リサイズ中は即時 */
.is-resizing .splide__slide img {
  transition: none !important;
}

.fv__description {
  font-size: var(--font-size-12px);
  color: var(--color-lightGray);
  background: var(--color-darkgray);
  text-align: center;
  width: 100vw;
  height: 2vw;
  line-height: 2vw;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.splide__arrow--prev {
  display: none;
}
.splide__arrow--next {
  display: none;
}
.splide__pagination__page {
  display: none;
}
.headerandFv__wrap {
  position: relative;
}
/***************************
main
 ***************************/
.main {
  display: block;
  width: 71.04vw;
  margin: auto;
  margin-right: 7.29vw;
}
/***************************
works
 ***************************/
.subtitle {
  display: block;
  width: fit-content;
  color: var(--color-darkgray);
  font-size: var(--font-size-24px);
  margin-bottom: var(--ma-25);
  transition: 0.8s;
}
.subtitle.show {
  color: var(--color-lightGray);
  transition: color 2s ease;
}
.works__container {
  display: flex;
  gap: 16px;
}
.works__imgWrap {
  display: flex;
  flex-direction: column;
}
.works__imgWrap img {
  width: 35.1vw;
  aspect-ratio: 2/1.3;
  object-fit: cover;
}

.works__imgWrap:hover .subtitle {
  color: var(--color-white);
}
.viewmore {
  display: block;
  color: var(--color-lightGray);
  font-size: var(--font-size-32px);
  position: relative;
  width: 13.64vw;
  height: 3.75vw;
  line-height: 3.75vw;
  margin: auto;
  margin-right: 0;
  margin-top: 3.5vw;
  cursor: pointer;
  transition: 0.4s;
}
.viewmore::before {
  position: absolute;
  content: "";
  height: var(--ma80);
  width: 8vw;
  border-bottom: solid 1px var(--color-lightGray);
  bottom: 0;
  right: 3vw;

  transition: 0.6s;
}
.viewmore::after {
  position: absolute;
  content: "";
  height: 4.5vw;
  width: 4.5vw;
  border-radius: 100vh;
  border: solid 1px var(--color-lightGray);
  right: 0;
  bottom: -1vw;
  transition: 0.6s;
}
.viewmore__text {
  font-size: var(--font-size-32px);
  transition: 0.6s;
  width: fit-content;
}

.viewmore:hover.viewmore::before {
  border-bottom: solid 1px var(--color-darkgray);
}
.viewmore:hover.viewmore::after {
  border: solid 1px var(--color-darkgray);
}
.viewmore:hover a .viewmore__text {
  color: var(--color-darkgray);
  transform: translateX(0.5vw);
}
/***************************
exhibition
 ***************************/

.exhibition__infoWrap {
  display: flex;
  cursor: pointer;
  border-bottom: 0.1px solid var(--color-lightGray);
  margin-bottom: var(--ma-25);
  padding-bottom: var(--ma-25);
  position: relative;
  transition: color 2s ease;
}
.exhibition__infoWrap::before {
  content: "";
  width: 5vw;
  height: 1px;
  background: var(--color-lightGray);
  position: absolute;
  right: 0;
  bottom: 50%;
  transition: 1s ease;
}
.exhibition__infoWrap::after {
  content: "";
  width: 1.5vw;
  height: 1px;
  background: var(--color-lightGray);
  position: absolute;
  right: -2px;
  bottom: calc(50% + 0.5vw - 2px);
  transform: rotate(30deg);
  transition: 1s ease;
}
.exhibition__infoWrap:hover::before {
  width: 4vw;
}
.info {
  display: flex;
  width: fit-content;
  color: var(--color-darkgray);
  text-align: center;
  padding-top: 1.25vw;
  vertical-align: middle;
  transition: color 2s ease;
}
.info.show {
  color: var(--color-white);
}
.exhibition__infoWrap:hover .info {
  color: var(--color-darkgray);
  transition: color 0.6s ease;
}

.info__day {
  display: block;
  font-size: var(--font-size-16px);
  width: 18vw;
  text-align: left;
  line-height: 1.8;
  height: fit-content;
}
.info__title {
  display: block;
  font-size: var(--font-size-24px);
  margin: auto;
  margin-left: 0;
  height: fit-content;
}
.info__gallery {
  display: block;
  font-size: var(--font-size-16px);
  margin: auto;
  margin-left: 2vw;
  height: fit-content;
}

/***************************
plofile
 ***************************/
.profile__wrap {
  display: flex;
  gap: 16px;
}
.profile__textwrap {
  width: 49.47vw;
}
.profile__info {
  display: block;
  font-size: var(--font-size-24px);
  color: var(--color-darkgray);
  margin-bottom: var(--ma50);
  line-height: 1.5;
  transition: color 2s ease;
}
.profile__text {
  display: block;
  font-size: var(--font-size-16px);
  color: var(--color-darkgray);
  margin-bottom: var(--ma50);
  line-height: 1.5;
  transition: color 2s ease;
}

.profile__img img {
  width: 20.72vw;
}
.profile__info.show {
  color: var(--color-lightGray);
}
.profile__text.show {
  color: var(--color-lightGray);
}

/***************************
contact
 ***************************/
.titleBK {
  color: var(--color-darkgray);
}
form {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

label {
  font-weight: bold;
  margin-bottom: 0.3em;
  display: block;
  font-size: var(--font-size-16px);
}

input,
textarea {
  width: 100%;
  padding: 12px;
  font-size: var(--font-size-16px);
  border: 1px solid var(--color-lightGray);
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus {
  border-color: var(--color-white);
  outline: none;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

.button {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 12px;
  font-size: var(--font-size-24px);
  border-radius: 100vh;
  cursor: pointer;
  width: 20vw;
  margin: 0 auto;
  margin-top: var(--ma-25);
  text-align: center;
  transition: 1s ease;
}
.button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.required::after {
  content: " *";
  color: #e74c3c;
}

.success {
  background: rgba(255, 255, 255, 0.2);
  color: #155724;
  padding: 10px;
  margin: 16px 8px 0px;
  text-align: center;
}

.error {
  background: rgba(255, 255, 255, 0.2);
  color: #721c24;
  padding: 10px;
  margin: 16px 8px 0px;
  text-align: center;
}

.footer__itemWrap {
  display: flex;
  justify-content: space-between;
  width: 6.35vw;
  margin: auto;
  margin-right: 7.18vw;
}
@media screen and (max-width: 767px) {
  .br {
    display: none;
  }

  .fv__description {
    line-height: 12px;
    height: 12px;
  }
  .main {
    display: block;
    width: 100vw;
    margin: auto;
  }
  .title {
    font-size: var(--font-size-32px);
    margin: 80px auto 40px;
  }
  .subtitle {
    margin: 0 auto 8px;
  }
  .works__container {
    display: block;
    justify-content: center;
  }
  .works__imgWrap img {
    display: block;
    width: 94vw;
    margin: 0 auto 4vh;
  }
  .exhibition__infoWrap {
    width: 69.17vw;
    margin: 50px auto 32px;
  }
  .exhibition__infoWrap::before {
    width: 8vw;
  }
  .exhibition__infoWrap::after {
    width: 3vw;
    bottom: calc(50% + 0.5vw - -1px);
  }
  .info {
    display: block;
    margin-top: 20px;
  }
  .info:first-child {
    margin-top: 0px;
  }
  .info__title {
    width: fit-content;
    margin: 10px auto;
    margin-left: 0;
  }
  .info__gallery {
    margin-left: 0;

    padding-bottom: 20px;
  }
  .profile__wrap {
    flex-direction: column-reverse;
    align-items: center;
  }
  .profile__img img {
    width: 70vw;
  }
  .profile__textwrap {
    width: 70vw;
  }
  .profile__text {
    width: auto;
  }
  .viewmore {
    width: 30vw;
    font-size: var(--font-size-24px);
    right: 4vw;
  }
  .viewmore::before {
    width: 25vw;
    bottom: -3vw;
  }
  .viewmore::after {
    width: 10vw;
    height: 10vw;
    bottom: -5vw;
  }
  .footer__itemWrap {
    width: 20vw;
    margin-right: 10vw;
  }
  form {
    padding: 0 2vh;
    margin-bottom: 6vh;
  }
  .button {
    width: 40vw;
  }
  .viewmore__text {
    font-size: var(--font-size-24px);
  }
}

.img {
  filter: brightness(50%);
  transition: filter 2s ease; /* show が付くとき用 */
}

.img.show {
  filter: brightness(100%); /* JSでクラス付与で1秒で明るくなる */
}

/* hover用 */
.works__imgWrap .img:hover {
  filter: brightness(120%);
  transition: filter 0.4s ease; /* hover時の速さ */
}

section {
  scroll-margin-top: var(--ma150); /* aで飛んだとき、上から200px空ける */
}