@charset "UTF-8";

/* ART MOVEMENT taxonomy archive
---------------------------------------------------------------------------------------------------- */

.movement-page {
box-sizing: border-box;
width: calc(100% - 36px);
max-width: 1120px;
margin: 24px auto 0;
padding: 0;
}


/* Header
---------------------------------------------------------------------------------------------------- */

/* Artists一覧と同じ全幅ヘッダー。左右余白と上下余白も同一 */
.movement-header {
box-sizing: border-box;
margin: 0;
padding: 48px 20px 48px 20px;
border-bottom: 1px solid #d8d8d8;
}

.movement-header__title {
margin: 0;
padding: 0;
color: steelblue;

font-family: "trajan-pro-3", serif;
font-weight: 400;
font-style: normal;

font-size: 31px;
line-height: 1;
letter-spacing: -0.03em;
}

.movement-header__title-ja {
margin: 7px 0 0 0;

font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;

font-size: 16px;
line-height: 1.4;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
}

.movement-header__intro {
max-width: 760px;
margin: 19px 0 0 0;

font-size: 14px;
line-height: 1.7;
}

.movement-header__intro p {
margin: 0;
}

.movement-header__intro p + p {
margin-top: 1.35em;
}


/* Meta
---------------------------------------------------------------------------------------------------- */

.movement-meta {
display: flex;
flex-wrap: wrap;
max-width: 760px;
margin: 22px 0 0 0;
padding: 0;
}

.movement-meta__item {
display: flex;
align-items: baseline;
gap: 8px;
width: 50%;
min-width: 0;
margin: 0;
padding: 11px 12px 11px 0;
box-sizing: border-box;
}

.movement-meta__item dt {
flex: 0 0 auto;
margin: 0;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.45;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
}

.movement-meta__item dd {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 13px;
line-height: 1.45;
overflow-wrap: anywhere;
}

/* アーティスト一覧の年号・日本語名と同じサイズ */
.movement-meta__item--period dd {
font-size: 15px;
}

.movement-meta__item--region dd {
font-size: 16px;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
}


/* Layout
---------------------------------------------------------------------------------------------------- */

.movement-layout {
display: flex;
flex-direction: column;
}

.movement-content {
min-width: 0;
}


/* Section
---------------------------------------------------------------------------------------------------- */

.movement-section {
padding: 0 0 54px 0;
}

.movement-section + .movement-section {
padding-top: 4px;
}

.movement-section__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: 20px;

margin: 0;
padding: 0 0 8px 0;

border-bottom: 1px solid #d8d8d8;
}

.movement-section__head h2 {
margin: 0;

font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 20px;
line-height: 1.2;
}

/* Overviewの日本語見出しだけ、日本語書体にする */
.movement-section__head #movement-about-heading {
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
}

.movement-section__head span {
font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 10px;
line-height: 1.2;
color: #777;
white-space: nowrap;
}


/* Related Art History：右側の「西洋美術史」は日本語書体 */
.movement-section__head #movement-history-heading + span {
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
}



/* Artists
---------------------------------------------------------------------------------------------------- */

.movement-artist-list {
padding: 0 0 0 0;
}

.movement-artist-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px;
gap: 6px;
align-items: baseline;

padding: 12px 0;

border-bottom: 1px solid #d8d8d8;

text-decoration: none;
transition: background-color .25s ease, opacity .25s ease;
}

.movement-artist-row:hover {
opacity: .5;
}

.movement-artist-row__name {
font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 18px;
line-height: 1.1;
}

.movement-artist-row__ja {
grid-column: 1;
grid-row: 2;

font-size: 12px;
line-height: 1.3;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
}

.movement-artist-row__years {
display: none;
white-space: nowrap;
}

.movement-artist-row__arrow {
grid-column: 2;
grid-row: 1;

font-size: 14px;
}


/* Related Art History
---------------------------------------------------------------------------------------------------- */

.movement-history-row {
display: block;
padding: 10px 0 12px 0;
border-bottom: 1px solid #e0e0e0;
text-decoration: none;
transition: background-color .25s ease, opacity .25s ease;
}

.movement-history-row:hover {
opacity: 1;
}

.movement-history-row__period {
display: block;
margin: 0 0 5px 0;
font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 1.2;
color: #666;
}

.movement-history-row__title {
display: block;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 15px;
line-height: 1.25;
}


/* Overview
---------------------------------------------------------------------------------------------------- */

.movement-overview {
padding: 18px 0 0 0;
font-size: 16px;
line-height: 1.5;
}

.movement-overview p {
margin: 0 0 1.35em 0;
}

.movement-overview p:last-child {
margin-bottom: 0;
}

/* Overview本文内の見出し */
.movement-overview h2 {
margin: 42px 0 16px 0;

font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;

font-size: 20px;
line-height: 1.4;
}

/* Overview本文内リンク */
.movement-overview a {
text-decoration: none;
border-bottom: 1px dotted currentColor;
}

.movement-overview a:hover {
opacity: .6;
}


/* Empty / Back
---------------------------------------------------------------------------------------------------- */

.movement-empty {
margin: 20px 0 0 0;

font-size: 16px;
line-height: 1.7;
}

.movement-back {
width: 100%;
padding: 4px 0 18px 0;
}

.movement-back a {
display: block;
box-sizing: border-box;
width: 100%;
height: 56px;
padding: 0;
border: 1px solid #d8d8d8;
text-align: center;

font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;

font-size: 15px;
line-height: 56px;

text-decoration: none;
transition: background-color 0.3s ease;
}

.movement-back a:hover {
background-color: #fff;
}


/* Right: Art Movements
---------------------------------------------------------------------------------------------------- */

.movement-index {
align-self: stretch;
margin: 42px 0 0 0;
}

.movement-index__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;

margin: 0;
padding: 11px 0 8px 0;

border-bottom: 1px solid #d8d8d8;
}

.movement-index__head h2 {
margin: 0;

font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 15px;
line-height: 1.2;
}

.movement-index__head span {
margin: 0 0 0 12px;

font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 10px;
line-height: 1.2;
}

.movement-index__nav {
display: flex;
flex-direction: column;
}

.movement-index__item {
position: relative;
display: block;

margin: 0;
padding: 13px 0 14px 0;

border-bottom: 1px solid #d8d8d8;

text-decoration: none;
transition: background-color .25s ease, opacity .25s ease;
}

.movement-index__item:hover {
opacity: .5;
}


/* 年号 + 英語 / 改行 / 日本語 */
.movement-index__meta {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: 10px;

margin: 0 0 6px 0;

font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;
}

.movement-index__period {
display: block;

font-size: 11px;
line-height: 1.2;
white-space: nowrap;
}

.movement-index__en {
display: block;
min-width: 0;

font-size: 11px;
line-height: 1.2;
color: #777;
text-align: right;
}

.movement-index__title {
display: block;
margin: 0;

font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;

font-size: 15px;
line-height: 1.4;
}

.movement-index__current {
display: block;
margin: 7px 0 0 0;

font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 12px;
line-height: 1.1;
color: red;
}

.movement-index__item.is-current {
padding-left: 12px;
}

.movement-index__item.is-current::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;

width: 2px;
background: #333;
}


/* PC
---------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {

.movement-page {
width: calc(100% - 80px);
}

/* PCでもArtists一覧と同じ上下左右の余白 */
.movement-header {
width: calc(100% - 80px);
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding: 110px 0 35px 0;
}

.movement-page {
margin-top: 28px;
margin-left: auto;
margin-right: auto;
}

.movement-header__title {
font-size: 35px;
}

.movement-header__title-ja {
margin-top: 5px;
font-size: 17px;
}

/* PC：リード文は日本語タイトル・地域名と同じ17px、行間1.5 */
.movement-header__intro {
font-size: 17px;
line-height: 1.5;
}

/* PC：時代・地域は各1px拡大。日本語タイトルは地域の値と同じ17px。 */
.movement-meta__item dt {
font-size: 13px;
}

.movement-meta__item--period dd {
font-size: 16px;
}

.movement-meta__item--region dd {
font-size: 17px;
}

.movement-meta__item {
width: 50%;
}



/* 2 columns */
.movement-layout {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}

.movement-content {
flex: 1 1 760px;
max-width: 760px;
min-width: 0;
}

.movement-index {
flex: 0 0 300px;
width: 300px;
min-width: 300px;
max-width: 300px;
align-self: flex-start;
margin: 0 0 0 55px;
}

.movement-index__head {
padding: 0 0 8px 0;
}


.movement-section {
padding-bottom: 60px;
}

.movement-section__head h2 {
font-size: 24px;
}


/* Artist row */
.movement-artist-row:hover {
opacity: 1;
background: #fff;
}

.movement-artist-row {
grid-template-columns:
    minmax(175px, 1.35fr)
    minmax(145px, 1fr)
    minmax(90px, .55fr)
    16px;

gap: 20px;
padding: 12px 0;
}

.movement-artist-row__name {
font-size: 1.08rem;
}

.movement-artist-row__ja {
grid-column: auto;
grid-row: auto;

font-size: 16px;
}

.movement-artist-row__years {
display: block;

font-size: 15px;
line-height: 1.2;
}

.movement-artist-row__arrow {
grid-column: auto;
grid-row: auto;
}


/* Related history row */
.movement-history-row {
display: block;
padding: 9px 0 10px 0;
}

.movement-history-row:hover {
opacity: 1;
background: #fff;
}

.movement-history-row__period {
margin: 0 0 5px 0;
font-size: 14px;
}

.movement-history-row__title {
font-size: 17px;
}


.movement-index__item:hover {
opacity: 1;
background: #fff;
}

.movement-index__title {
display: block;
margin: 0;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 18px;
line-height: 1.4;
}


.movement-history-row__meta {
margin: 0;
text-align: right;
}

.movement-overview {
font-size: 17px;
line-height: 1.5;
}

.movement-overview h2 {
font-size: 24px;
}

}/* PC end */