.single-work {
margin-top: -1.3vw;
padding-left: 24.3vw;
position: relative;
width: 100%;
}
main.wp-block-group:not(.main-top-page) {
padding: 18vh 2.8vw 12vh;
}
@media screen and (max-width: 768px) {
.single-work {
margin-top: 0;
padding-left: 0;
padding-right: 0;
}
}
.single-work__page-title {
margin-bottom: 0;
}
.single-work__page-title__en {
font-family: inherit;
font-size: max(2.5vw, 26px);
font-weight: 200;
line-height: 1.8;
word-break: auto-phrase;
}
@media screen and (max-width: 768px) {
.single-work__page-title__en {
font-size: 20px;
line-height: 1.6;
}
}
.single-work__heading {
font-family: inherit;
font-size: max(2.5vw, 26px);
font-weight: 200;
line-height: 1.8;
word-break: auto-phrase;
}
.single-work__thumbnail {
margin-top: 70px;
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.single-work__thumbnail {
margin-top: 20px;
}
}
.single-work__information-column {
align-items: start;
border-bottom: 1px solid #b4b4b4;
display: grid;
gap: 50px 2.8vw;
grid-template-columns: 21.5vw 21.5vw 21.5vw;
margin-top: 60px;
padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
.single-work__information-column {
border-bottom: none;
grid-template-columns: 100%;
margin-top: 50px;
padding-bottom: 0;
}
}
.single-work__information-column__tags {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 15px 2vw;
}
.single-work__information-column__tags__tag {
border: 1px solid #000;
border-radius: 30px;
font-size: max(1vw, 11px);
padding: 3px 15px;
text-decoration: none;
color: inherit;
display: inline-block;
transition: opacity 0.2s ease;
}
@media screen and (max-width: 768px) {
.single-work__information-column__tags__tag {
font-size: 11px;
padding: 4px 12px;
}
}
.single-work__information-column__tags__tag:hover {
opacity: 0.7;
}
.single-work__information-column__basic {
display: grid;
gap: 13px 1.5vw;
grid-column: 2/4;
grid-template-columns: auto 1fr;
}
@media screen and (max-width: 768px) {
.single-work__information-column__basic {
gap: 10px 25px;
grid-column: 1/2;
}
}
.single-work__information-column__basic * {
font-size: max(1vw, 13px);
}
@media screen and (max-width: 768px) {
.single-work__information-column__basic * {
font-size: 12px;
}
}
.single-work__row {
display: contents;
}
.single-work__row__label {
font-weight: 700;
}
@media screen and (max-width: 768px) {
.single-work__row__label {
font-weight: 300;
}
}
.single-work__row__value {
display: flex;
flex-direction: column;
word-break: auto-phrase;
}
.single-work__row__value a {
text-decoration: underline;
color: inherit;
}
.single-work__row__value a:hover {
text-decoration: none;
}
.single-work__row__value div {
display: block;
}
.single-work__descriptions {
display: grid;
gap: 70px 2.8vw;
grid-template-columns: 21.5vw 21.5vw 21.5vw;
margin-top: 60px;
padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
.single-work__descriptions {
gap: 50px 0;
grid-template-columns: 1fr;
margin-top: 50px;
padding-bottom: 50px;
}
}
.single-work__descriptions__links {
grid-column: 1/2;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links {
grid-column: 1/2;
grid-row: 2/3;
text-align: center;
}
}
.single-work__descriptions__links__link {
align-items: center;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
height: 7vw;
justify-content: center;
min-height: 100px;
min-width: 100px;
position: relative;
width: 7vw;
text-decoration: none;
color: #000;
transition: background-color 0.3s ease;
}
.single-work__descriptions__links__link:hover {
background-color: rgba(255, 219, 0, 0.8);
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link {
height: 80px;
width: 80px;
}
}
.single-work__descriptions__links__link:hover
.single-work__descriptions__links__link__text {
animation: single-work-colorToWhite 0.3s ease-out forwards;
}
.single-work__descriptions__links__link:hover
.single-work__descriptions__links__link__cercle {
stroke-dashoffset: 0;
animation: single-work-dashoffsetToZero 0.3s ease-out forwards,
single-work-strokeToTransparent 0.3s ease-out forwards,
single-work-fillToYellow 0.3s ease-out forwards;
}
.single-work__descriptions__links__link:hover
.single-work__descriptions__links__link__text__arrow {
animation: single-work-strokeToWhite 0.3s ease-out forwards;
}
.single-work__descriptions__links__link:hover
.single-work__descriptions__links__link__text__arrow
svg {
transform: translateX(0.6vw);
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link:hover
.single-work__descriptions__links__link__text__arrow
svg {
transform: translateX(8px);
}
}
@keyframes single-work-dashoffsetToZero {
0% {
stroke-dashoffset: 345.4px;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes single-work-colorToWhite {
0% {
color: #000;
}
80% {
color: #000;
}
to {
color: #fff;
}
}
@keyframes single-work-strokeToTransparent {
0% {
stroke: #000;
}
80% {
stroke: #000;
}
to {
stroke: transparent;
}
}
@keyframes single-work-strokeToWhite {
0% {
filter: none;
}
80% {
filter: none;
}
to {
filter: invert(97%) sepia(0) saturate(0) hue-rotate(128deg) brightness(107%)
contrast(102%);
}
}
@keyframes single-work-fillToYellow {
0% {
fill: transparent;
}
80% {
fill: transparent;
}
to {
fill: rgba(255, 219, 0, 0.8);
}
}
.single-work__descriptions__links__link__text {
align-items: center;
display: flex;
font-size: max(0.8vw, 10px);
font-weight: 700;
gap: 0.3vw;
justify-content: center;
line-height: 1;
margin: auto;
position: relative;
transform: translateX(0.3vw);
z-index: 1;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link__text {
gap: 5px;
}
}
.single-work__descriptions__links__link__text__arrow {
align-items: center;
display: flex;
height: 0.6vw;
justify-content: center;
overflow: hidden;
position: relative;
width: 0.6vw;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link__text__arrow {
height: 8px;
width: 8px;
}
}
.single-work__descriptions__links__link__text__arrow svg {
position: absolute;
width: 0.6vw;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link__text__arrow svg {
width: 8px;
}
}
.single-work__descriptions__links__link__text__arrow svg:first-child {
left: 0;
}
.single-work__descriptions__links__link__text__arrow svg:nth-child(2) {
left: -0.6vw;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__links__link__text__arrow svg:nth-child(2) {
left: -8px;
}
}
.single-work__descriptions__links__link__cercle {
fill: none;
stroke: #000;
stroke-width: 1px;
stroke-dasharray: 345.4px;
stroke-dashoffset: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 0;
}
.single-work__descriptions__description {
font-size: max(1vw, 11px);
grid-column: 2/4;
line-height: 2;
}
@media screen and (max-width: 768px) {
.single-work__descriptions__description {
grid-column: 1/2;
grid-row: 1/2;
}
}
.single-work__images {
padding-bottom: 70px;
}
@media screen and (max-width: 768px) {
.single-work__images {
padding-bottom: 30px;
}
}
.single-work__images__item {
margin-bottom: 2.8vw;
text-align: right;
width: 100%;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.single-work__images__item {
margin-bottom: 17px;
}
}
.single-work__images__item:last-child {
margin-bottom: 0;
}
.single-work__images__item__img {
width: 100%;
height: auto;
display: block;
}
.single-work__images__item__video {
width: 100%;
height: auto;
display: block;
margin-bottom: 2.8vw;
text-align: right;
cursor: auto;
}
.single-work__images__item__caption {
display: inline-block;
font-size: max(1vw, 11px);
line-height: 2;
margin-left: auto;
margin-top: 20px;
max-width: 45.8vw;
text-align: left;
}
@media screen and (max-width: 768px) {
.single-work__images__item__caption {
width: 100%;
max-width: 100%;
}
}
.single-work__links {
display: flex;
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 700;
gap: 0 2.8vw;
justify-content: center;
margin: 60px auto 160px;
}
@media screen and (max-width: 768px) {
.single-work__links {
justify-content: space-between;
margin-bottom: 100px;
margin-top: 35px;
}
}
.single-work__links__previous,
.single-work__links__all-wrap__all,
.single-work__links__next {
align-items: flex-end;
display: flex;
font-size: max(1vw, 12px);
gap: 0 12px;
line-height: 1;
position: relative;
text-decoration: none;
color: #000;
}
.single-work__links__previous:hover,
.single-work__links__all-wrap__all:hover,
.single-work__links__next:hover {
text-decoration: none;
}
.single-work__links__previous:hover svg,
.single-work__links__all-wrap__all:hover svg,
.single-work__links__next:hover svg {
transform: translateX(calc(100% + 0.5vw));
}
.single-work__links__previous__arrow,
.single-work__links__all-wrap__all__arrow,
.single-work__links__next__arrow {
height: 10px;
overflow: hidden;
position: relative;
width: 3.2vw;
}
@media screen and (max-width: 768px) {
.single-work__links__previous__arrow,
.single-work__links__all-wrap__all__arrow,
.single-work__links__next__arrow {
width: 35px;
}
}
.single-work__links__previous svg,
.single-work__links__all-wrap__all svg,
.single-work__links__next svg {
height: 100%;
position: absolute;
top: 0;
transition: all 0.3s ease-in-out;
width: 100%;
}
.single-work__links__previous svg:first-child,
.single-work__links__all-wrap__all svg:first-child,
.single-work__links__next svg:first-child {
left: 0;
}
.single-work__links__previous svg:nth-child(2),
.single-work__links__all-wrap__all svg:nth-child(2),
.single-work__links__next svg:nth-child(2) {
left: calc(-100% - 0.5vw);
}
.single-work__links__arrow {
height: 10px;
overflow: hidden;
position: relative;
width: 3.2vw;
}
.single-work__links__arrow svg {
height: 100%;
position: absolute;
top: 0;
transition: all 0.3s ease-in-out;
width: 100%;
}
.single-work__links__arrow svg:first-child {
left: 0;
}
.single-work__links__arrow svg:nth-child(2) {
left: calc(-100% - 0.5vw);
}
.single-work__links__all-wrap {
display: flex;
justify-content: center;
width: 21.5vw;
}
.single-work__links__all-wrap__all {
justify-content: center;
align-items: flex-end;
display: flex;
font-size: max(1vw, 12px);
gap: 0 12px;
line-height: 1;
position: relative;
}
.single-work__links__all-wrap__all:after {
background-color: #000;
content: "";
display: block;
height: 3px;
position: absolute;
top: calc(100% + 5px);
width: 100%;
}
.single-work__links__previous {
justify-content: flex-start;
}
.single-work__links__previous:hover svg {
transform: translateX(calc(-100% - 0.5vw));
}
.single-work__links__previous svg:first-child {
left: 0;
}
.single-work__links__previous svg:nth-child(2) {
left: calc(100% + 0.5vw);
}
.single-work__links__next {
justify-content: flex-end;
}
.single-work__links .hidden {
opacity: 0;
pointer-events: none;
}
.single-work__columns {
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.single-work__columns {
padding-bottom: 0;
}
.single-work__links__arrow {
width: 35px;
}
}
.single-work__columns__heading {
font-family: Noto Sans JP, sans-serif;
font-size: max(2.6vw, 30px);
font-weight: 200;
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.single-work__columns__heading {
margin-bottom: 25px;
}
}
.single-work__columns__item {
display: grid;
gap: 25px 2.8vw;
grid-template-columns: 21.5vw 21.5vw 21.5vw;
margin-bottom: 50px;
position: relative;
text-decoration: none;
color: inherit;
}
@media screen and (max-width: 768px) {
.single-work__columns__item {
border-bottom: 1px solid #b4b4b4;
gap: 25px 0;
grid-template-columns: 1fr 1fr;
margin: 30px auto 0;
padding: 0 0 30px;
}
}
.single-work__columns__item:hover
.single-work__columns__item__descriptions__arrow
svg {
transform: translateX(calc(100% + 150px));
}
.single-work__columns__item__thumbnail {
aspect-ratio: 3/2;
grid-column: 1/2;
height: auto;
width: 100%;
}
.single-work__columns__item__thumbnail img {
height: 100%;
object-fit: cover;
width: 100%;
}
.single-work__columns__item__descriptions {
align-items: flex-start;
border-bottom: 1px solid #b4b4b4;
display: flex;
flex-direction: column;
grid-column: 2/4;
justify-content: flex-start;
padding-bottom: 20px;
width: 100%;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions {
border-bottom: none;
padding-bottom: 0;
padding-left: 20px;
}
}
.single-work__columns__item__descriptions__date {
font-size: max(0.7vw, 11px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions__date {
display: none;
}
}
.single-work__columns__item__descriptions__title {
font-family: inherit;
font-size: max(1.1vw, 13px);
line-height: 1.6;
word-break: auto-phrase;
}
.single-work__columns__item__descriptions__title span {
display: inline-block;
}
.single-work__columns__item__descriptions__arrow {
align-items: flex-end;
display: flex;
font-family: neue-haas-grotesk-display, sans-serif;
font-size: max(1.2vw, 10px);
font-weight: 300;
gap: 0.8vw;
line-height: 1;
margin-left: auto;
margin-top: auto;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions__arrow {
font-weight: 600;
gap: 1vw;
margin-bottom: -1px;
position: relative;
right: 0;
}
}
.single-work__columns__item__descriptions__arrow__anim {
height: 10px;
overflow: hidden;
position: relative;
width: 13vw;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions__arrow__anim {
width: 10vw;
}
}
.single-work__columns__item__descriptions__arrow__anim.single-work--pcHidden {
display: none;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions__arrow__anim.single-work--pcHidden {
display: flex;
}
}
.single-work__columns__item__descriptions__arrow__anim.single-work--spHidden {
display: flex;
}
@media screen and (max-width: 768px) {
.single-work__columns__item__descriptions__arrow__anim.single-work--spHidden {
display: none;
}
}
.single-work__columns__item__descriptions__arrow__anim svg {
bottom: 0;
height: 100%;
position: absolute;
transition: all 0.7s ease-in-out;
width: 100%;
}
.single-work__columns__item__descriptions__arrow__anim svg:first-child {
left: 0;
}
.single-work__columns__item__descriptions__arrow__anim svg:nth-child(2) {
left: calc(-100% - 150px);
}
.single-work__related-works {
display: grid;
gap: 30px 2.8vw;
grid-template-columns: 21.5vw 21.5vw 21.5vw;
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.single-work__related-works {
gap: 25px 10px;
grid-template-columns: 100%;
padding-bottom: 80px;
}
}
.single-work__related-works__heading {
font-family: Noto Sans JP, sans-serif;
font-size: max(2.6vw, 30px);
font-weight: 200;
grid-column: 1/4;
}
.single-work__related-works__item {
position: relative;
width: 100%;
text-decoration: none;
color: inherit;
}
@media screen and (max-width: 768px) {
.single-work__related-works__item {
grid-column: 1/2;
}
}
.single-work__related-works__item__thumbnail {
aspect-ratio: 3/2;
height: auto;
width: 100%;
object-fit: cover;
display: block;
}
.single-work__related-works__item__thumbnail img {
height: 100%;
object-fit: cover;
width: 100%;
}
.single-work__related-works__item__hover {
align-items: flex-start;
background: hsla(0, 0%, 100%, .6);
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
left: 0;
line-height: 2;
opacity: 0;
padding: 1.5vw 2vw;
position: absolute;
top: 0;
transition: opacity .2s ease-in-out;
width: 100%;
}
@media screen and (max-width: 768px) {
.single-work__related-works__item__hover {
background: none;
display: block;
height: auto;
margin-top: 10px;
opacity: 1;
padding: 0;
position: relative;
width: auto;
}
}
.single-work__related-works__item:hover .single-work__related-works__item__hover {
opacity: 1;
}
.single-work__related-works__item__hover__summary {
font-size: max(.6vw, 11px);
}
.single-work__related-works__item__hover__title {
font-family: inherit;
font-size: max(1.6vw, 16px);
word-break: auto-phrase;
margin: 0;
}
.single-work__related-works__item__hover__title span {
display: inline-block;
}
.single-work__border {
width: 100%;
height: 1px;
background-color: #000;
margin-top: 10vh;
margin-bottom: 5vh;
}
@media screen and (max-width: 768px) {
.single-work__border {
margin-top: 60px;
margin-bottom: 40px;
}
}
.single-work__image-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
justify-content: center;
align-items: center;
cursor: pointer;
}
.single-work__image-popup.active {
display: flex;
}
.single-work__image-popup__content {
max-width: 90%;
max-height: 90%;
position: relative;
}
.single-work__image-popup__img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.single-work__image-popup__close {
position: absolute;
top: -40px;
right: 0;
color: #fff;
font-size: 30px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.single-work__image-popup__close:hover {
opacity: 0.7;
}
.parent.isThisPage:before {
width: 2.4vh;
}
.parent:before {
background-color: #ffd500;
content: "";
height: 2.5vh;
left: -2.8vw;
margin: auto;
position: absolute;
transition: all 0.5s ease-in-out;
width: 0;
}
.single-work__mobile-title {
border-bottom: 1px solid #000;
display: none;
font-family: "Shippori Mincho B1", serif;
font-size: max(2vw, 20px);
font-weight: 700;
line-height: 1;
margin: 0 0 55px;
padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
.single-work__mobile-title {
display: block;
}
main {
padding: 140px 20px 14vh !important;
}
}
.breadcrumb {
pointer-events: all;
transform: translateY(-0.3vw);
}
@media screen and (max-width: 768px) {
.breadcrumb {
transform: translateY(0);
}
}
.isBottom {
display: none;
margin: 0 auto;
max-width: 2500px;
padding: 0 2.8vw;
}
@media screen and (max-width: 768px) {
.isBottom {
display: block;
margin: 0 auto 0 0;
max-width: 80%;
padding: 0 0 100px;
}
}
.isBottom .breadcrumb {
max-width: 100%;
padding-left: 24.3vw;
}
@media screen and (max-width: 768px) {
.isBottom .breadcrumb {
display: flex;
padding-left: 0;
}
}
.isBottom .breadcrumb .breadcrumb__list .breadcrumb__link {
font-size: max(0.7vw, 11px);
text-transform: uppercase;
}