@charset "UTF-8";

.section-project {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}

/* =====================
name
===================== */
.project-name {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 48px 0px;
  margin-top: 140px;
  margin-left: 80px;
}

.project-date {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 1.2rem;
  line-height: 0.75;
  letter-spacing: 0.24px;
}

.project-title {
  margin-top: 16px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 1.2px;
}

.project-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  vertical-align: bottom;
  margin-top: 16px;
}

.project-item-tag {
  margin-top: 0px;
}

.project-item-tag a {
  color: var(--dark-gray);
}

/* =====================
main-image
===================== */
.project-main-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-main-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.project-main-img {
  display: block;
  margin-left: 80px;
  width: calc(100% - 80px);
  height: 100%;
}

/* =====================
 contents
===================== */
.section-project {
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 160px 80px 161px 80px;
  background-color: #f5f5f5;
}

.project-contents {
  margin-bottom: 160px;
}

.project-contents-wrapper {
  position: relative;
  width: calc(1000 / 1280 * 100%);
}

.project-contents-approach-detail-group {
  margin-top: 80px;
}

/* title */
.project-contents-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  padding-bottom: 17px;
  margin-bottom: 48px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 1.2px;
  border-bottom: 1px solid var(--dark-gray);
}

.project-contents-sub-title {
  margin-bottom: 24px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.48px;
}

.project-contents-txt-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  gap: 32px;
}

/* event */
.project-contents-event {
  position: absolute;
  top: -80px;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: 0;
  margin-left: auto;
}

.project-contents-txt-event {
  display: flex;
  align-items: center;
  height: 24px;
  color: var(--dark-gray);
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: 0.28px;
}

.project-contents-event-wrapper {
  display: flex;
  gap: 16px;
}

.project-contents-event-wrapper h3 {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.24px;
}

/* text */
.project-contents-txt {
  font-size: 1.6rem;
  letter-spacing: 0.32px;
}

.project-contents-txt-quote {
  font-size: 1.4rem;
  color: var(--text-gray);
}

.project-contents-txt-margin80 {
  margin-top: 80px;
}

.project-contents-txt-margin24 {
  margin-top: 24px;
}

.project-contents-txt-margin32 {
  margin-top: 32px;
}

.project-contents-txt-margin64 {
  margin-top: 64px;
}

.section-sub-title-no-margin {
  margin: 0px;
}

.section-sub-title-margin80 {
  margin-top: 80px;
}

.section-sub-title-margin80-bottom0 {
  margin-top: 80px;
  margin-bottom: 0px;
}

.section-sub-title-bottom0 {
  margin-bottom: 0px;
}

.section-sub-title-margin48 {
  margin-top: 48px;
}

.section-sub-title-margin40 {
  margin-top: 40px;
}

/* 画像・動画の余白 */
.project-contents-img {
  margin-top: 80px;
}

.project-detail-video {
  margin-top: 80px;
  margin-bottom: 16px;
}

.project-detail-img {
  margin-top: 48px;
  margin-bottom: 16px;
}

.project-contents-video {
  margin-top: 48px;
}

.detail-group-title {
  margin-bottom: 24px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.36px;
}

/* サムネイル */
.project-contents-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.play-movie-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* creditとmediaをまとめる */
.project-contents-info-group {
  display: flex;
  gap: 80px;
}

/* credit */
.project-contents-credit {
  color: var(--text-gray);
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 1.1rem;
  line-height: 1.75;
  letter-spacing: 0.22px;
}

.project-contents-credit-wrapper {
  margin-top: 24px;
}

/* media */
.project-contents-txt-media {
  color: var(--text-gray);
  font-size: 1.1rem;
  line-height: 0.75;
  letter-spacing: 0.22px;
}

.project-contents-media-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* =====================
 aside
===================== */
.project-contents-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 240px);
  position: sticky;
  top: 160px;
  margin-right: 80px;
}

.project-contents-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-contents-bottom {
  margin-top: 40px;
  margin-bottom: 3px;
}

.project-contents-top a {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: var(--dark-gray);
  font-size: 1.4rem;
  line-height: 2.2;
  letter-spacing: 0.28px;
  text-decoration: none;
}

.project-contents-top-title {
  transition: text-decoration 0.3s ease;
}

/* 遷移した時にヘッダー分余白をあける */
#summary,
#subject,
#approach {
  scroll-margin-top: 120px;
}

/* ホバー時 */
.project-contents-top-title:hover {
  text-decoration: underline;
}

.project-contents-bottom-title {
  color: var(--text-gray);
  font-size: 1.1rem;
  line-height: 0.76;
  letter-spacing: 0.22px;
}

.project-contents-role-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.project-contents-role-txt {
  color: var(--text-gray);
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 1.2rem;
  line-height: 0.75;
  letter-spacing: 0.24px;
}

.project-contents-client {
  margin-top: 32px;
}

.project-contents-client-txt {
  margin-top: 16px;
  color: var(--text-gray);
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0.6px;
}

/* active時左に線をつける */
.project-contents-summary a,
.project-contents-subject a,
.project-contents-approach a {
  position: relative;
}

.project-contents-top > div.active a::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 11px;
  width: 8px;
  height: 8px;
  background-color: var(--dark-gray);
}

/* visit-website */

.project-contents-visit-website {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 80px;
  height: 15px;
}

.project-contents-visit-website-txt {
  color: var(--dark-gray);
  font-size: 1.2rem;
  line-height: 2.5;
  letter-spacing: 0.24px;
}

.project-contents-visit-website-arrow {
  width: 15px;
  height: 15px;
  filter: invert(100%);
}

.project-contents-visit-website-arrow img {
  vertical-align: baseline;
}

.project-contents-role a:hover .project-contents-visit-website-txt {
  text-decoration: underline;
}

/* =====================
 page-info
===================== */
.page-info {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-gray);
}

.page-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 113px;
  margin-bottom: 32px;
}

.page-info-wrapper-prev {
  padding-right: 40px;
  transition: transform 0.5s cubic-bezier(0.5, 0.1, 0.1, 1);
}

.page-info-wrapper-next {
  padding-left: 40px;
  transition: transform 0.5s cubic-bezier(0.5, 0.1, 0.1, 1);
}

.page-info-contents a {
  display: flex;
  overflow: hidden;
}

.page-info-txt {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: var(--dark-gray);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 0.72;
  letter-spacing: 0.36px;
}

.page-info-prev-arrow {
  display: flex;
  width: 15px;
  height: 15px;
}

.page-info-next-arrow {
  display: flex;
  width: 15px;
  height: 15px;
}

.page-info-color {
  display: block;
  width: 80px;
  height: 160px;
  transition: transform 0.5s cubic-bezier(0.5, 0.1, 0.1, 1);
}

.page-info-prev .page-info-color {
  transform: translateX(-100%);
}

.page-info-next .page-info-color {
  transform: translateX(100%);
}

/* ホバー時 */
.page-info-contents a:hover .page-info-color {
  transform: translateX(0);
}

.page-info-contents a:hover .page-info-wrapper-next {
  transform: translateX(-40px);
}

.page-info-contents a:hover .page-info-wrapper-prev {
  transform: translateX(40px);
}

.page-info-disabled {
  pointer-events: none;
  opacity: 0;
}

/* =====================
 related-projects
===================== */
.section-title-related-projects {
  display: flex;
  padding: 120px 80px 48px;
  gap: 8px;
}

.project-item {
  border-top: 1px solid var(--border-gray);
}

.project-item {
  border-bottom: none;
}