@charset "UTF-8";


.art-history-archive {
color: #111;
--history-war-crisis-bg: #313131;
padding: 30px 20px 100px;
}

.art-history-archive *,
.art-history-archive *::before,
.art-history-archive *::after {
box-sizing: border-box;
}


/* English / numeric display typography
--------------------------------------------------------- */

.art-history-archive__eyebrow,
.art-history-nav a,
.art-history-decade__label,
.art-history-item__year {
font-family: "hoefler-text", serif;
font-weight: 400;
font-style: normal;
}


/* header
--------------------------------------------------------- */

.art-history-archive__header {
width: 100%;
margin: 0 auto 30px auto;
}



.art-history-archive__title {
margin: 0;
font-family: "trajan-pro-3", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
line-height: 1;
letter-spacing: -0.03em;
text-align: center;
}

.art-history-archive__lead {
margin: 10px 0 0 0;
font-size: 10px;
line-height: 1.3;
text-align: center;
}


/* Decade jump navigation
--------------------------------------------------------- */

.art-history-nav {
position: sticky;
top: 0;
z-index: 20;
margin: 0 -20px 58px;
border-top: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.admin-bar .art-history-nav {
top: 46px;
}

.art-history-nav__inner {
position: relative;
display: flex;
column-gap: 13px;
justify-content: flex-start;
justify-content: safe center; /* Center when it fits; keep the first item reachable when overflowing. */
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 20px 0 20px;
overflow-x: auto;
scrollbar-width: none;
}

.art-history-nav__inner::-webkit-scrollbar {
display: none;
}

/* Continuous reading-position indicator; follows scrolling without easing. */
.art-history-nav__progress {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 10px;
height: 2px;
background: #ff6e61;
opacity: 0;
pointer-events: none;
transform: translate3d(0, 0, 0);
}

.art-history-nav a {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 3px;
min-height: 48px;
padding: 8px 3px;
color: #444;
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: 11px;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
transition: color 180ms ease;
}

.art-history-nav__period {
font-family: "hoefler-text", serif;
font-feature-settings: "palt" 1, "kern" 1;
font-kerning: normal;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1;
color: #666;
}

.art-history-nav__name {
font-feature-settings: "palt" 1, "kern" 1;
font-kerning: normal;
font-size: 11px;
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.25;
text-align: center;
}

.art-history-nav a:first-child {
padding-left: 0;
}

.art-history-nav a:hover,
.art-history-nav a:focus-visible {
color: #111;
}

/* Hover/focus overview: floating tooltip near the nav item (desktop only). */
.art-history-nav-tooltip {
box-sizing: border-box;
position: fixed;
z-index: 9000;
width: min(420px, calc(100vw - 24px));
padding: 16px 18px;
border: 1px solid #d8d8d8;
border-radius: 4px;
background: #fff;
box-shadow: 0 5px 22px rgb(0 0 0 / 12%);
color: #222;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
font-feature-settings: "pkna" 1;
white-space: normal;
visibility: hidden;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
/* Fade-out completes before the tooltip becomes hidden. */
transition: opacity 160ms ease-in, transform 160ms ease-in, visibility 0s linear 160ms;
}

.art-history-nav-tooltip.is-visible {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s linear 0s;
}

/* Repeat the era name above its explanatory text for quick recognition. */
.art-history-nav-tooltip__heading {
margin: 0 0 9px;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}

/* Keep explicit paragraphs readable within multi-paragraph era tooltips. */
.art-history-nav-tooltip__description p {
margin: 0;
}

.art-history-nav-tooltip__description p + p {
margin-top: 1em;
}

.art-history-nav-tooltip::before {
content: "";
position: absolute;
left: var(--tooltip-arrow-left, 50%);
top: -7px;
width: 12px;
height: 12px;
transform: translateX(-50%) rotate(45deg);
border-left: 1px solid #d8d8d8;
border-top: 1px solid #d8d8d8;
background: #fff;
}

.art-history-nav-tooltip.is-above::before {
top: auto;
bottom: -7px;
transform: translateX(-50%) rotate(225deg);
}

/* Smartphone: hide the era jump navigation; keep it on desktop. */
@media screen and (max-width: 767px) {
    .art-history-archive > .art-history-nav,
    .art-history-nav-tooltip {
        display: none;
    }
}


/* Timeline
--------------------------------------------------------- */

.art-history-timeline {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
}

.art-history-decade {
position: relative;
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
scroll-margin-top: 84px;
}

.art-history-decade__label {
position: sticky;
top: 74px;
align-self: start;
padding: 10px 15px 80px 0;
font-size: 17px;
line-height: 1.2;
letter-spacing: -0.04em;

/*oldの数字解除*/
font-variant-numeric: lining-nums;
}

.admin-bar .art-history-decade__label {
top: 120px;
}

.art-history-decade__content {
position: relative;
padding: 0 0 58px 25px;
border-left: 1px solid #d8d8d8;
}





/* Item
--------------------------------------------------------- */
.art-history-item {
position: relative;
margin: 0;
border-top: 1px solid #d8d8d8;
}

.art-history-item:last-child {
border-bottom: 1px solid #d8d8d8;
}

.art-history-item__dot {
position: absolute;
top: 25px;
left: -26px;
width: 8px;
height: 8px;
border: 1px solid #d8d8d8;
border-radius: 50%;
background: #fff;
transform: translateX(-50%);
transition: background 180ms ease, transform 180ms ease;
}

.art-history-item__link {
display: block;
padding: 20px 30px 21px 0;
color: inherit;
text-decoration: none;
}

.art-history-item__year {
display: block;
margin-bottom: 8px;
padding-top: 2px;
font-size: 13px;
line-height: 1.4;
}

.art-history-item__title {
margin: 0;
font-size: 17px;
line-height: 1.3;
letter-spacing: -0.025em;
}

.art-history-item__excerpt {
max-width: 720px;
margin: 8px 0 0;
font-size: 12px;
line-height: 1.5;
}

.art-history-item__arrow {
position: absolute;
top: 22px;
right: 0;
padding-top: 2px;
font-size: 15px;
line-height: 1;
text-align: right;
transition: transform 180ms ease;
}

.art-history-item:hover .art-history-item__dot,
.art-history-item:focus-within .art-history-item__dot {
background: #111;
transform: translateX(-50%) scale(1.15);
}

.art-history-item:hover .art-history-item__arrow,
.art-history-item:focus-within .art-history-item__arrow {
transform: translate(3px, -3px);
}

.art-history-item__link:focus-visible {
outline: 1px solid #111;
outline-offset: 5px;
}


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

.art-history-archive__empty {
width: 100%;
max-width: 1180px;
margin: 0 auto;
color: #777;
}


/* WordPress accessibility helper if the theme does not already provide it
--------------------------------------------------------- */

.art-history-archive .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}









/* PC-only CONTEXT column / column heads
--------------------------------------------------------- */

.art-history-column-heads,
.art-history-decade__context {
display: none;
}

/* ART HISTORY period bands
--------------------------------------------------------- */

.art-history-era-group {
--era-color: #c8c8c8;
--era-color-light: #e8e8e8;
position: relative;
display: grid;
grid-template-columns: 28px 28px 28px minmax(0, 1fr);
grid-auto-rows: auto;
width: calc(100% + 20px);
margin-left: -20px;
}

.art-history-era-group--prehistory { --era-color: #bfb6ad; --era-color-light: #e1dcd7; --era-color-art: #ebe7e5; }
.art-history-era-group--ancient-civilizations { --era-color: #ceb98c; --era-color-light: #e7dec9; --era-color-art: #efe9da; }
.art-history-era-group--classical-antiquity { --era-color: #cb9c86; --era-color-light: #e4cbc0; --era-color-art: #ecdcd5; }
/* Crisis of the Third Century: black first band, white vertical label. */
.art-history-era-group--third-century-crisis { --era-color: var(--history-war-crisis-bg); --era-color-light: #d0d0d0; --era-color-art: #e2e2e2; }
.art-history-era-group--third-century-crisis .art-history-era-band__label { color: #fff; }
.art-history-era-group--late-antiquity { --era-color: #abb8a6; --era-color-light: #d2d9cf; --era-color-art: #e0e6df; }
.art-history-era-group--medieval { --era-color: #89a3b5; --era-color-light: #c0ced7; --era-color-art: #d4dee5; }
/* 14th century: split the left-hand label at 1340 while keeping the middle band black throughout. */
.art-history-era-group--fourteenth-century-crisis,
.art-history-era-group--fourteenth-century-gothic { --era-color: #c4a4d1; --era-color-light: var(--history-war-crisis-bg); --era-color-art: #e8dfd0; }
.art-history-era-group--fourteenth-century-crisis .art-history-milestone-cell--world,
.art-history-era-group--fourteenth-century-gothic .art-history-milestone-cell--world { color: #fff; }
.art-history-era-group--renaissance { --era-color: #a7b786; --era-color-light: #ced7b7; --era-color-art: #dee5cf; }
.art-history-era-group--baroque { --era-color: #ab9ab3; --era-color-light: #d1c8d6; --era-color-art: #e0dae4; }
.art-history-era-group--eighteenth-century { --era-color: #c8b187; --era-color-light: #e4d7c1; --era-color-art: #ece5d5; }
.art-history-era-group--nineteenth-century { --era-color: #b3928c; --era-color-light: #d7c5c1; --era-color-art: #e5d8d5; }
/* From the 1870s: coordinated sage-green shades across all three left bands. */
.art-history-era-group--nineteenth-century-late { --era-color: #aec9bd; --era-color-light: #d3e5db; --era-color-art: #e5f0e9; }
.art-history-era-group--modernism { --era-color: #819cb1; --era-color-light: #b9cad7; --era-color-art: #cfdbe5; }
.art-history-era-group--postwar { --era-color: #9b93aa; --era-color-light: #cac6d0; --era-color-art: #dbd9e0; }
.art-history-era-group--contemporary { --era-color: #8ea6a2; --era-color-light: #c2d1cf; --era-color-art: #d5e0df; }

.art-history-era-band {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 3;
width: 28px;
background: var(--era-color);
}

.art-history-era-band__label {
position: sticky;
top: 82px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 0;
font-family: "Noto Serif JP", serif;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
writing-mode: vertical-rl;
text-orientation: upright;
}

.admin-bar .art-history-era-band__label {
top: 128px;
}

.art-history-milestone-cell {
display: flex;
flex-direction: column;
grid-row: var(--era-row);
align-items: stretch;
justify-content: flex-start;
min-height: 100%;
padding: 0;
border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.art-history-milestone-cell--world {
grid-column: 2;
background: var(--era-color-light);
/* Keep dark war blocks flush with the Vietnam War stripe: no 1px left seam. */
border-left: 0;
}

/* Vietnam War is highlighted only in the MIDDLE world-history band.
 * It spans the available 1950s–1970s decade rows, independent of era colors.
 */
.art-history-vietnam-world-band {
    position: relative;
    z-index: 2;
    display: block;
    grid-column: 2;
    grid-row: var(--vietnam-row-start) / var(--vietnam-row-end);
    min-height: 100%;
    background: var(--history-war-crisis-bg);
    color: #fff;
}

.art-history-vietnam-world-band__label {
    position: sticky;
    top: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 14px 4px;
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    pointer-events: none;
}

.admin-bar .art-history-vietnam-world-band__label {
    top: 128px;
}

.art-history-milestone-cell--art {
grid-column: 3;
background: var(--era-color-art);
}

.art-history-milestone {
display: flex;
align-items: center;
justify-content: flex-start;
width: 28px;
padding: 14px 4px;
font-family: "Noto Serif JP", serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
text-align: center;
writing-mode: vertical-rl;
text-orientation: upright;
pointer-events: none;
}

.art-history-milestone.is-dark {
background: var(--history-war-crisis-bg);
color: #fff;
}

.art-history-decade {
grid-column: 4;
grid-row: var(--era-row);
width: 100%;
min-width: 0;
}

.art-history-jp-era-band,
.art-history-jp-era-pin {
display: none;
}


/* Japanese reference band colors */
.art-history-jp-era-band--paleolithic { --jp-era-color: #dbd7d4; }
.art-history-jp-era-band--jomon { --jp-era-color: #eae3b5; }
.art-history-jp-era-band--yayoi { --jp-era-color: #c7dfd6; }
.art-history-jp-era-band--kofun { --jp-era-color: #d4d0cc; }
.art-history-jp-era-band--asuka { --jp-era-color: #e0d6c5; }
.art-history-jp-era-band--nara { --jp-era-color: #e8d6b6; }
.art-history-jp-era-band--heian { --jp-era-color: #bdd9e6; }
.art-history-jp-era-band--kamakura { --jp-era-color: #eaceae; }
.art-history-jp-era-band--nanbokucho { --jp-era-color: #d2e3c2; }
.art-history-jp-era-band--muromachi { --jp-era-color: #c9dbbc; }
.art-history-jp-era-band--azuchi-momoyama { --jp-era-color: #e3c4b7; }
.art-history-jp-era-band--edo { --jp-era-color: #c3ced7; }
.art-history-jp-era-band--meiji { --jp-era-color: #d8bdba; }
.art-history-jp-era-band--taisho { --jp-era-color: #d2ccda; }
.art-history-jp-era-band--showa { --jp-era-color: #e6d9bf; }
/* Pacific War: black only on the 1940s row in the far-right Japan band. */
.art-history-jp-era-band--pacific-war { --jp-era-color: var(--history-war-crisis-bg); }
.art-history-jp-era-pin--pacific-war { color: #fff; }
.art-history-jp-era-band--heisei { --jp-era-color: #d4d4d4; }
.art-history-jp-era-band--reiwa { --jp-era-color: #e3e3e3; }






/* スマホ終了
------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {

.art-history-archive {
padding: 100px 0 140px;
}


/* header */
.art-history-archive__header {
width: 100%;
margin: 0 auto 50px auto;
padding-inline: 32px;
}



.art-history-archive__title {
margin: 0 auto 10px auto;
font-size: 25px;
line-height: 1;
letter-spacing: -0.03em;
}

.art-history-archive__lead {
max-width: 560px;
margin: 0 auto;
font-size: 12px;
line-height: 1.3;
}


/* nav */
.art-history-nav {
position: sticky;
top: 0;
z-index: 20;
margin: 0 0 30px;
}

.admin-bar .art-history-nav {
top: 46px;
}

.art-history-nav__inner {
max-width: 1320px;
padding: 0 16px;
}

.art-history-nav a {
padding: 8px 3px;
}



/* column heads */
.art-history-column-heads {
display: flex;
flex-direction: row;
width: min(calc((100vw - 120px) * 0.92), 1320px);
max-width: none;
margin: 0 auto 22px;
transform: translateX(30px);
font-family: "hoefler-text", serif;
font-size: 16px;
line-height: 1;
}

.art-history-column-head--context {
flex: 1 1 0%;
min-width: 0;
padding-right: 34px;
text-align: left;
}

.art-history-column-head--time {
flex: 0 0 118px;
text-align: center;
}

.art-history-column-head--art {
flex: 1 1 0%;
min-width: 0;
padding-left: 34px;
text-align: left;
}


/* timeline: full-bleed across the archive width */
.art-history-timeline {
position: relative;
width: 100%;
max-width: none;
margin: 0;
}

/* PC: left three bands + center timeline + Japanese reference band */
.art-history-era-group {
display: grid;
grid-template-columns: 30px 30px 30px minmax(0, 1fr) 60px 30px;
grid-auto-rows: auto;
width: 100%;
margin-left: 0;
scroll-margin-top: 84px;
}

.art-history-era-band {
width: 30px;
}

.art-history-era-band__label {
top: 88px;
padding: 16px 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
}

.admin-bar .art-history-era-band__label {
top: 120px;
}

.art-history-milestone-cell {
padding: 0;
}

.art-history-milestone-cell--world {
grid-column: 2;
}

.art-history-vietnam-world-band__label {
top: 88px;
width: 30px;
padding: 16px 5px;
font-size: 14px;
line-height: 1.25;
}

.admin-bar .art-history-vietnam-world-band__label {
top: 120px;
}

.art-history-milestone-cell--art {
grid-column: 3;
}

.art-history-milestone {
width: 30px;
padding: 14px 5px;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.04em;
}

.art-history-decade {
grid-column: 4;
grid-row: var(--era-row);
justify-self: center;
width: min(92%, 1320px);
min-width: 0;
}

.art-history-jp-era-band {
display: flex;
grid-column: 6;
grid-row: var(--jp-row-start) / var(--jp-row-end);
align-items: flex-start;
justify-content: center;
min-height: 100%;
background: var(--jp-era-color);
}

.art-history-jp-era-pin {
position: fixed;
top: 88px;
left: 0;
z-index: 18;
display: flex;
align-items: flex-start;
justify-content: center;
width: 30px;
opacity: 0;
pointer-events: none;
transition: none;
}

.admin-bar .art-history-jp-era-pin {
top: 120px;
}

.art-history-jp-era-pin.is-visible {
opacity: 1;
}

.art-history-jp-era-pin__label {
display: inline-block;
flex: 0 0 auto;
width: auto;
margin: 0;
padding: 16px 0 0;
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
white-space: nowrap;
writing-mode: vertical-rl;
text-orientation: upright;
}

.art-history-jp-era-pin__name {
font-size: 14px;
font-weight: 600;
}

.art-history-jp-era-pin__years {
margin-top: 10px;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}


.art-history-decade {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0;
scroll-margin-top: 84px;
}

/* TIME軸は3列レイアウト全体の中央に固定 */
.art-history-decade::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: #d8d8d8;
transform: translateX(-50%);
pointer-events: none;
}

.art-history-decade__context,
.art-history-decade__content {
flex: 1 1 0%;
min-width: 0;
}

.art-history-decade__context {
display: block;
order: 0;
padding: 23px 20px 88px 0;
font-family: YakuHanJPs, "Noto Serif JP", serif;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0;
}

.art-history-decade__context-item {
margin: 0 0 28px;
}

.art-history-decade__context-item:last-child {
margin-bottom: 0;
}


/*見出し*/
.art-history-decade__context-heading {
margin: 0 0 8px;
font: inherit;
font-weight: 700;
line-height: 1.3;
}


.art-history-decade__context-figure {
margin: 0 0 14px;
}

.art-history-decade__context-image-link {
display: block;
}

.art-history-decade__context-image {
display: block;
width: 100%;
height: auto;
}

/* Context: responsive YouTube embed (16:9 on PC and mobile) */
.art-history-decade__context-video {
margin: 0 0 14px;
}

.art-history-decade__context-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #171717;
}

.art-history-decade__context-video-frame iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}

.art-history-decade__context-caption {
margin-top: 6px;
font: inherit;
font-size: 11px;
font-weight: 400;
line-height: 1.45;
}

.art-history-decade__context-caption-link {
color: inherit;
font: inherit;
text-decoration: none;
}

.art-history-decade__context-caption-link:hover {
opacity: 0.62;
}

.art-history-decade__context-text {
margin: 0;
}

/* 13世紀のゴシック美術の説明文と動画の間だけに余白を追加 */
.art-history-decade__context-text--video-intro {
margin-bottom: 1em;
}

/* 複数段落のContextのみ、段落間に余白を設ける */
.art-history-decade__context-text + .art-history-decade__context-text {
margin-top: 1em;
}

.art-history-decade__context-empty {
display: block;
font-family: "hoefler-text", serif;
font-size: 13px;
line-height: 1.4;
}

.art-history-decade__label {
position: sticky;
/* PC: original sticky position +40px to clear the central MENU. */
top: 128px;
z-index: 2;
order: 0;
flex: 0 0 118px;
align-self: flex-start;
width: 118px;
padding: 10px 0 0 0;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.04em;
text-align: center;
background: #f9f9f7;

/*oldの数字解除*/
font-variant-numeric: lining-nums;
}

/* PC: show the BCE suffix on its own line, regardless of the number's width. */
.art-history-decade__bce {
display: block;
}

.art-history-decade__label::after {
content: "";
display: block;
width: 9px;
height: 9px;
margin: 13px auto 0;
border: 1px solid #d8d8d8;
border-radius: 50%;
background: #f9f9f7;
}

.admin-bar .art-history-decade__label {
top: 160px;
}

.art-history-decade__content {
position: relative;
order: 0;
padding: 0 0 88px 20px;
border-left: 0;
}


/* item */

.art-history-item {
position: relative;
margin: 0;
border-top: 1px solid #d8d8d8;
}

.art-history-item:last-child {
border-bottom: 1px solid #d8d8d8;
}

.art-history-item__dot {
display: none;
}

.art-history-item__link {
display: grid;
grid-template-columns: 80px minmax(0, 1fr) 20px;
gap: 10px;
align-items: start;
padding: 20px 0 20px;
opacity: 1;
transition: background-color .25s ease;
}

.art-history-archive .art-history-item__link:hover,
.art-history-archive .art-history-item__link:focus-visible {
color: inherit;
opacity: 1;
background: #fff;
}

.art-history-item__year {
display: block;
margin-bottom: 0;
padding-top: 2px;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.0em;
}

.art-history-item__title {
margin: 0;
font-size: 19px;
line-height: 1.3;
letter-spacing: -0.025em;
}

.art-history-item__excerpt {
max-width: 720px;
margin: 10px 0 0;
font-size: 12px;
line-height: 1.5;
}

.art-history-item__arrow {
position: static;
top: auto;
right: auto;
padding-top: 2px;
font-size: 15px;
line-height: 1;
text-align: right;
}


/* empty */

.art-history-archive__empty {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}

}


/*PC 終了*/


/* WordPress admin bar（PC：783px以上）
--------------------------------------------------------- */

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

.admin-bar .art-history-nav {
top: 32px;
}

.admin-bar .art-history-decade__label {
top: 160px;
}

}


.art-history-context__artist-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.art-history-context__artist-link:hover {
    opacity: 0.62;
}


.art-history-context__source-reference {
    display: inline;
    margin-left: 0;
    color: inherit;
    font: inherit;
    white-space: normal;
}

/* 括弧はPHP側で出力。HTMLの改行やインデントが括弧内に入らないようにする。 */
.art-history-context__source-reference--related {
    margin-left: 0;
}

.art-history-context__source-prefix {
    font: inherit;
}

.art-history-context__source-link {
    color: inherit;
    font: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.art-history-context__source-link:hover {
    opacity: 0.62;
}




/* One uninterrupted label per historical period, shared across art-history eras.
 * The existing era-band backgrounds remain per group, while this sticky label
 * belongs to the entire historical period (e.g. all of the early-modern rows).
 */
.art-history-archive .art-history-historical-run {
    position: relative;
}

.art-history-archive .art-history-historical-run__pin {
    position: absolute;
    z-index: 4;
    inset: 0 auto 0 0;
    width: 28px;
    pointer-events: none;
}

.art-history-archive .art-history-historical-run__label {
    position: sticky;
    top: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    font-family: "Noto Serif JP", serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.admin-bar .art-history-archive .art-history-historical-run__label {
    top: 128px;
}

@media screen and (min-width: 768px) {
    .art-history-archive .art-history-historical-run__pin { width: 30px; }
    .art-history-archive .art-history-historical-run__label {
        top: 88px;
        padding: 16px 0;
        font-size: 14px;
        letter-spacing: 0.06em;
    }
    .admin-bar .art-history-archive .art-history-historical-run__label { top: 120px; }
}

/* Shared six-period palette for ART HISTORY and WORLD HISTORY.
 * The broad left-hand band keeps its existing colors. These two tokens drive
 * the middle and right bands of both archives (with art-style nuances on the right).
 */
.art-history-archive .art-history-historical-run--prehistoric {
    --historical-middle-band: #e9e4e0;
    --historical-right-band: #f3efed;
}
.art-history-archive .art-history-historical-run--ancient {
    --historical-middle-band: #fbe2cf;
    --historical-right-band: #fff6ef;
}
.art-history-archive .art-history-historical-run--medieval {
    --historical-middle-band: #bccce5;
    --historical-right-band: #e4ebf7;
}
.art-history-archive .art-history-historical-run--early-modern {
    --historical-middle-band: #ebeeb9;
    --historical-right-band: #f6f5e6;
}
.art-history-archive .art-history-historical-run--modern {
    --historical-middle-band: #ffebb2;
    --historical-right-band: #fff4d7;
}
.art-history-archive .art-history-historical-run--contemporary {
    --historical-middle-band: #ffc9c4;
    --historical-right-band: #fff6f4;
}

/* Left-band hues: prehistoric greige, ancient peach, medieval blue,
 * early-modern sage, modern yellow, and contemporary coral.
 * ART HISTORY retains lighter style-specific variations in the right band;
 * WORLD HISTORY uses the shared right-band base for each broad period.
 */
/* ART HISTORY: three independent timelines.
 * Left = six broad historical epochs; middle = historical events (unchanged);
 * right = art-history movements and existing art-related milestones.
 */
.art-history-archive .art-history-era-band--history-prehistoric { background: #e0d8d0; }
.art-history-archive .art-history-era-band--history-ancient { background: #f7c6a1; }
.art-history-archive .art-history-era-band--history-medieval { background: #6b8ac7; }
.art-history-archive .art-history-era-band--history-early-modern { background: #d0e4a1; }
.art-history-archive .art-history-era-band--history-modern { background: #ffda66; }
.art-history-archive .art-history-era-band--history-contemporary { background: #ff6e61; }

/* White period labels on the medieval blue and contemporary coral left bands only. */
.art-history-archive .art-history-historical-run--medieval .art-history-historical-run__label,
.art-history-archive .art-history-historical-run--contemporary .art-history-historical-run__label {
    color: #fff;
}

/* Match the middle world-history band to the lighter shade of the six historical periods.
 * Crisis and war highlights below retain their own dark background.
 */
.art-history-archive .art-history-era-band--history-prehistoric ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-band--history-ancient ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-band--history-medieval ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-band--history-early-modern ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-band--history-modern ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-band--history-contemporary ~ .art-history-milestone-cell--world { background: var(--historical-middle-band); }
.art-history-archive .art-history-era-group--third-century-crisis .art-history-milestone-cell--world,
.art-history-archive .art-history-era-group--fourteenth-century-crisis .art-history-milestone-cell--world,
.art-history-archive .art-history-era-group--fourteenth-century-gothic .art-history-milestone-cell--world {
    background: var(--history-war-crisis-bg);
    color: #fff;
}
.art-history-archive .art-history-era-group--third-century-crisis .art-history-era-band__label {
    color: var(--history-war-crisis-bg);
}

/* ART HISTORY: flat colors across the middle and right timeline bands (no 1px separator). */
.art-history-archive .art-history-milestone-cell--world,
.art-history-archive .art-history-milestone-cell--art {
    border-left: 0;
}

/* Keep right-hand art styles visually distinct while preserving their milestone texts. */
.art-history-archive .art-history-milestone-cell--art[data-art-style="prehistoric"] { background: #f3efed; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="ancient-orient"] ~ .art-history-milestone-cell--art:not(.art-history-event-band--dark) { background: #fff6ef; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="classical"] ~ .art-history-milestone-cell--art:not(.art-history-event-band--dark) { background: #fff6ef; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="early-byzantine"] ~ .art-history-milestone-cell--art:not(.art-history-event-band--dark) { background: #fff6ef; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="early-medieval"] { background: #e4ebf7; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="romanesque"] { background: #ccd9f0; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="gothic"] { background: #d9e3f5; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="late-byzantine"] { background: #bfceea; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="renaissance"] { background: #f6f5e6; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="baroque"] { background: #eef1da; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="rococo"] { background: #faf9ee; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="nineteenth-century"] { background: #fff4d7; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="impressionism"] { background: #ffe9b4; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="modernism"] { background: #fff0c8; }
.art-history-archive .art-history-milestone-cell--art[data-art-style="contemporary"] { background: #fff6f4; }

.art-history-archive .art-history-style-marker {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 28px;
    padding: 14px 4px;
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    pointer-events: none;
}

@media screen and (min-width: 768px) {
    .art-history-archive .art-history-style-marker {
        width: 30px;
        padding: 14px 5px;
        font-size: 14px;
        line-height: 1.25;
    }
}

/* =========================================================
   WORLD HISTORY — scoped layout and exceptional war/crisis bands.
   Colors follow the same six-period palette declared above, even when
   the detailed World History labels cross a broad-period boundary.
   ========================================================= */
.world-history-archive .world-history-era-sub-band {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1 / var(--world-era-row-end);
    min-height: 100%;
    background: var(--historical-middle-band, #e9e4e0);
}

.world-history-archive .world-history-era-sub-band .art-history-era-band__label {
    width: 100%;
}

/* WORLD HISTORY: give the Greek-Roman era a distinct midpoint peach shade. */
.world-history-archive .art-history-era-group--nav-2 .world-history-era-sub-band {
    background: #f9d4b8;
}

/* The right band presents historical milestones, so it uses the shared
 * right-band base color rather than the art-movement variations. */
.world-history-archive .art-history-milestone-cell--art {
    background: var(--historical-right-band, #f3efed);
}

/* Wars and crises are chronological events, displayed in the right band.
 * The middle band's period labels remain sticky and use six-period colors.
 * All styling is scoped to WORLD HISTORY, leaving ART HISTORY unchanged. */
.world-history-archive .art-history-milestone-cell--art.world-history-event-band--dark {
    background: var(--history-war-crisis-bg);
    color: #fff;
}

/* WORLD HISTORY only: highlight the last-glacial climate sequence in the
 * rightmost of the three narrow bands, just like the existing war/crisis bands.
 * The left/middle bands, existing vertical events and Context stay unchanged.
 * The Holocene (from c. 9700 BCE) resumes the regular historical color. */
.world-history-archive .art-history-milestone-cell--art.world-history-climate-band--glacial {
    background: #b5d8ea;
    color: #172b3c;
}
.world-history-archive .art-history-milestone-cell--art.world-history-climate-band--maximum {
    background: #3779ac;
    color: #fff;
}
.world-history-archive .art-history-milestone-cell--art.world-history-climate-band--deglaciation {
    background: #8ec1dd;
    color: #172b3c;
}
.world-history-archive .art-history-milestone-cell--art.world-history-climate-band--younger-dryas {
    background: #205a8a;
    color: #fff;
}

/* On phones the Context column is hidden by the shared layout;
   suppress editorial-only blank article rows as in the former WORLD HISTORY page. */
@media screen and (max-width: 767px) {
    /* Match the ART HISTORY mobile timeline: only decades with articles occupy height.
       0px tracks prevent empty editorial rows from stretching the timeline through
       the middle band's grid-row span. Desktop/editorial rows remain unchanged. */
    .world-history-archive .art-history-era-group.has-world-posts {
        grid-template-rows: var(--world-mobile-grid-rows);
    }

    .world-history-archive .art-history-decade.is-world-empty,
    .world-history-archive .art-history-milestone-cell--art.is-world-empty,
    .world-history-archive .art-history-era-group.is-world-empty {
        display: none;
    }
}


/* ART HISTORY: fixed art periods in the middle band, every historical event
 * in the right band. World History keeps its own existing scoped layout. */
.art-history-archive--art .art-history-style-sub-band {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1 / var(--art-style-row-end);
    min-height: 100%;
    background: var(--historical-middle-band, #e9e4e0);
}
.art-history-archive--art .art-history-style-sub-band .art-history-era-band__label {
    width: 100%;
}
/* Preserve each art movement's original hue in its new middle-band position. */
.art-history-archive--art .art-history-style-sub-band[data-art-style="prehistoric"] { background: #e9e4e0; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="ancient-orient"] { background: #fbe2cf; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="classical"] { background: #f9d8bf; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="early-byzantine"] { background: #fbe2cf; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="early-medieval"] { background: #d2dff1; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="romanesque"] { background: #ccd9f0; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="gothic"] { background: #d9e3f5; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="late-byzantine"] { background: #bfceea; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="renaissance"] { background: #9eb6d9; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="baroque"] { background: #ebeeb9; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="rococo"] { background: #A8BF79; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="nineteenth-century"] { background: #ffe7a4; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="impressionism"] { background: #F7CD61; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="modernism"] { background: #ffe7a4; }
.art-history-archive--art .art-history-style-sub-band[data-art-style="contemporary"] { background: #ffc9c4; }

.art-history-archive--art .art-history-milestone-cell--art {
    background: var(--historical-right-band, #f3efed);
}
/* Early Medieval: keep the middle style band distinct from the right event band. */
.art-history-archive--art .art-history-style-sub-band[data-art-style="early-medieval"] ~ .art-history-milestone-cell--art:not(.art-history-event-band--dark) {
    background: #f2f6fc;
}
.art-history-archive--art .art-history-milestone-cell--art.art-history-event-band--dark {
    background: var(--history-war-crisis-bg);
    color: #fff;
}

/* ART HISTORY: split only the 1940s right-hand band visually at its midpoint.
 * 1930s stays dark, the top half of the 1940s stays dark, and its bottom
 * half returns to the normal right-band color. This is intentionally a visual
 * 50/50 split independent of the positions of individual 1945 entries. */
.art-history-archive--art .art-history-milestone-cell--art.art-history-event-band--wwii-end-split {
    isolation: isolate;
    background: linear-gradient(
        to bottom,
        var(--history-war-crisis-bg) 0 50%,
        var(--historical-right-band, #fff4d7) 50% 100%
    );
}
/* Keep the 1940s postwar explanations in the light lower half.
 * The height of the band is adjusted to accommodate the vertical text. */
.art-history-archive--art .art-history-event-band--wwii-end-split {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.art-history-archive--art .art-history-event-band--wwii-end-split .art-history-event-band__postwar-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.art-history-archive--art .art-history-event-band--wwii-end-split .art-history-milestone {
    color: #111;
    mix-blend-mode: normal;
}

/* ART HISTORY: one continuous sticky art-style label across legacy era splits
 * (Classical Antiquity / Third-Century Crisis; Late Byzantine era groups). */
.art-history-archive--art .art-history-style-run {
    position: relative;
}
.art-history-archive--art .art-history-style-run .art-history-style-run__pin {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 28px;
    pointer-events: none;
}
@media screen and (min-width: 768px) {
    .art-history-archive--art .art-history-style-run .art-history-style-run__pin {
        left: 30px;
        width: 30px;
    }
}


/* ART HISTORY: one continuous sticky middle-band label when an art style
 * spans two broad historical periods (e.g. Renaissance and Rococo).
 * The original colored band segments and left historical labels stay intact. */
.art-history-archive--art .art-history-cross-period-style-pin {
    display: none;
    position: absolute;
    z-index: 4;
    left: 8px;
    width: 28px;
    pointer-events: none;
}
.art-history-archive--art .art-history-timeline.has-cross-period-style-pins .art-history-cross-period-style-pin {
    display: block;
}
.art-history-archive--art .art-history-timeline.has-cross-period-style-pins .art-history-style-sub-band.is-cross-period-style > .art-history-era-band__label {
    visibility: hidden;
}
@media screen and (min-width: 768px) {
    .art-history-archive--art .art-history-cross-period-style-pin {
        left: 30px;
        width: 30px;
    }
}

/* iPad touch test: native anchor smooth scrolling (Art History / World History only).
 * Keep the sticky navigation and all existing anchor links unchanged.
 * Respect the system setting for reduced motion. */
@media screen and (min-width: 768px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    html:has(main.art-history-archive) {
        /* scroll-behavior: smooth; */
    }
}

/* A Context photograph inserted between paragraphs needs the same breathing room as the text. */
.art-history-decade__context-figure--in-text {
    margin-top: 1em;
}

/* ART HISTORY: optional two-column era artwork viewer.
   Used only when a nav item has data-art-history-nav-viewer. */
.art-history-nav-tooltip--with-viewer {
    width: min(960px, calc(100vw - 24px));
    padding: 16px 18px;
    pointer-events: auto;
}

.art-history-nav-tooltip--with-viewer .art-history-nav-tooltip__layout {
    display: grid;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: start;
    gap: 22px;
}

.art-history-nav-tooltip__viewer {
    margin: 0;
    min-width: 0;
    max-height: calc(var(--art-nav-tip-available, 80vh) - 34px);
    display: flex;
    flex-direction: column;
}

.art-history-nav-tooltip__frame {
    position: relative;
    width: 100%;
    height: clamp(190px, 37vh, 410px);
    min-height: 0;
    overflow: hidden;
}

.art-history-nav-tooltip__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 800ms ease;
}

.art-history-nav-tooltip__photo.is-current {
    opacity: 1;
}

.art-history-nav-tooltip__credit {
    margin-top: 9px;
    height: 4.7em;
    flex: 0 0 4.7em;
    font-size: 11px;
    line-height: 1.55;
    color: #444;
    overflow-wrap: anywhere;
    overflow-y: auto;
}

.art-history-nav-tooltip__credit a {
    color: inherit;
    text-underline-offset: 2px;
}

.art-history-nav-tooltip__credit a:hover,
.art-history-nav-tooltip__credit a:focus-visible {
    color: #111;
}

.art-history-nav-tooltip--with-viewer .art-history-nav-tooltip__text {
    min-width: 0;
    max-height: calc(var(--art-nav-tip-available, 80vh) - 34px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
}

@media screen and (min-width: 768px) and (max-width: 859px) {
    .art-history-nav-tooltip--with-viewer {
        width: min(600px, calc(100vw - 24px));
    }
    .art-history-nav-tooltip--with-viewer .art-history-nav-tooltip__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .art-history-nav-tooltip__frame {
        height: clamp(145px, 26vh, 250px);
    }
    .art-history-nav-tooltip--with-viewer .art-history-nav-tooltip__text {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .art-history-nav-tooltip--with-viewer {
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-history-nav-tooltip__photo {
        transition: none;
    }
}

/* Smartphone: align historical-period labels with the first colored band.
   The era grid extends 20px left of the timeline on phones. */
@media screen and (max-width: 767px) {
    .art-history-archive .art-history-historical-run__pin {
        left: -20px;
    }
}

/* Smartphone: compact decade labels and separate them from the colored bands.
   Desktop (768px and wider) is unchanged. */
@media screen and (max-width: 767px) {
    .art-history-archive .art-history-decade__label {
        font-size: 12px; /* 60% of the original 20px */
        line-height: 1.25;
        padding-left: 12px; /* breathing room after the third band */
        padding-right: 7px;
    }
}


/* =========================================================
   JAPANESE HISTORY — uses the same 3-column shared layout as WORLD HISTORY.
   Only the period/event bands and mobile empty-track handling are scoped here.
   The old jp_history_archive.css cannot affect these new class names.
   ========================================================= */
.jp-history-unified-archive .jp-history-era-sub-band {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1 / var(--jp-era-row-end);
    min-height: 100%;
    background: var(--historical-middle-band, #e9e4e0);
}
.jp-history-unified-archive .jp-history-era-sub-band .art-history-era-band__label { width: 100%; }
.jp-history-unified-archive .art-history-milestone-cell--art {
    background: var(--historical-right-band, #f3efed);
}
.jp-history-unified-archive .art-history-milestone-cell--art.jp-history-event-band--dark {
    background: var(--history-war-crisis-bg);
    color: #fff;
}
/* PC: match WORLD HISTORY's balanced grid exactly. The three left
   period bands occupy 90px; retain the empty 60px + 30px right tracks
   even though the Japan page has no outer Japan reference band.
   This keeps the main timeline and its center rule at the same horizontal
   position as WORLD HISTORY, without displaying any additional band. */
@media screen and (min-width: 768px) {
    .jp-history-unified-archive .art-history-era-group {
        grid-template-columns: 30px 30px 30px minmax(0, 1fr) 60px 30px;
    }
}
@media screen and (max-width: 767px) {
    .jp-history-unified-archive .art-history-era-group.has-archive-posts {
        grid-template-rows: var(--jp-mobile-grid-rows);
    }
    .jp-history-unified-archive .art-history-decade.is-archive-empty,
    .jp-history-unified-archive .art-history-milestone-cell--art.is-archive-empty,
    .jp-history-unified-archive .art-history-era-group.is-archive-empty {
        display: none;
    }
}

/* =========================================================
   JAPANESE HISTORY — subtle middle-band shades per Japanese era.
   The six broad historical-period hues remain the basis of the palette.
   Scoped to this archive so WORLD HISTORY and ART HISTORY stay unchanged.
   ========================================================= */
/* 先史時代 */
.jp-history-unified-archive .art-history-era-group--nav-0 .jp-history-era-sub-band { background: #e9e4e0; } /* 旧石器 */
.jp-history-unified-archive .art-history-era-group--nav-1 .jp-history-era-sub-band { background: #e3ded9; } /* 縄文 */

/* 古代 */
.jp-history-unified-archive .art-history-era-group--nav-2 .jp-history-era-sub-band { background: #fbe2cf; } /* 弥生 */
.jp-history-unified-archive .art-history-era-group--nav-3 .jp-history-era-sub-band { background: #f8d9c4; } /* 古墳 */
.jp-history-unified-archive .art-history-era-group--nav-4 .jp-history-era-sub-band { background: #fae0cf; } /* 飛鳥 */
.jp-history-unified-archive .art-history-era-group--nav-5 .jp-history-era-sub-band { background: #fce7d6; } /* 奈良 */
.jp-history-unified-archive .art-history-era-group--nav-6 .jp-history-era-sub-band { background: #f8ddc9; } /* 平安 */

/* 中世 */
.jp-history-unified-archive .art-history-era-group--nav-7 .jp-history-era-sub-band { background: #bccce5; } /* 鎌倉 */
.jp-history-unified-archive .art-history-era-group--nav-8 .jp-history-era-sub-band { background: #b5c6e1; } /* 南北朝 */
.jp-history-unified-archive .art-history-era-group--nav-9 .jp-history-era-sub-band { background: #c2d1e8; } /* 室町 */

/* 近世 */
.jp-history-unified-archive .art-history-era-group--nav-10 .jp-history-era-sub-band { background: #ebeeb9; } /* 安土桃山 */
.jp-history-unified-archive .art-history-era-group--nav-11 .jp-history-era-sub-band { background: #e3e8b2; } /* 江戸 */

/* 近代 */
.jp-history-unified-archive .art-history-era-group--nav-12 .jp-history-era-sub-band { background: #ffebb2; } /* 明治 */
.jp-history-unified-archive .art-history-era-group--nav-13 .jp-history-era-sub-band { background: #f9e4ab; } /* 大正 */
.jp-history-unified-archive .art-history-historical-run--modern .art-history-era-group--nav-14 .jp-history-era-sub-band { background: #ffedbc; } /* 昭和：戦前 */

/* 現代：昭和の帯は1950sの歴史大区分で分割されるため別色を指定 */
.jp-history-unified-archive .art-history-historical-run--contemporary .art-history-era-group--nav-14 .jp-history-era-sub-band { background: #ffc9c4; } /* 昭和：戦後 */
.jp-history-unified-archive .art-history-era-group--nav-15 .jp-history-era-sub-band { background: #ffd0ca; } /* 平成 */
.jp-history-unified-archive .art-history-era-group--nav-16 .jp-history-era-sub-band { background: #ffc3bd; } /* 令和 */


/* =========================================================
   JAPANESE ART HISTORY (PHASE 1)
   Visual-only era timeline; contextual text and tooltips are deferred.
   Inherits the JAPANESE HISTORY layout, with its own scoped 10 era colors.
   Other archive pages and typography remain unchanged.
   ========================================================= */
/* First navigation era crosses the prehistoric/ancient historical palette. */
.jp-art-history-unified-archive .art-history-historical-run--prehistoric .art-history-era-group--nav-0 .jp-history-era-sub-band { background: #e4ded8; }
.jp-art-history-unified-archive .art-history-historical-run--ancient .art-history-era-group--nav-0 .jp-history-era-sub-band { background: #f8dac5; }
/* 古代：飛鳥・奈良／平安 */
.jp-art-history-unified-archive .art-history-era-group--nav-1 .jp-history-era-sub-band { background: #fbe2cf; }
.jp-art-history-unified-archive .art-history-era-group--nav-2 .jp-history-era-sub-band { background: #f7dcc7; }
/* 中世：鎌倉・南北朝／室町 */
.jp-art-history-unified-archive .art-history-era-group--nav-3 .jp-history-era-sub-band { background: #bacbe6; }
.jp-art-history-unified-archive .art-history-era-group--nav-4 .jp-history-era-sub-band { background: #c6d5eb; }
/* 近世：桃山／江戸 */
.jp-art-history-unified-archive .art-history-era-group--nav-5 .jp-history-era-sub-band { background: #ebeeb9; }
.jp-art-history-unified-archive .art-history-era-group--nav-6 .jp-history-era-sub-band { background: #e3e9b2; }
/* 近代：明治／大正・昭和前期 */
.jp-art-history-unified-archive .art-history-era-group--nav-7 .jp-history-era-sub-band { background: #ffebb2; }
.jp-art-history-unified-archive .art-history-era-group--nav-8 .jp-history-era-sub-band { background: #fff0c5; }
/* 1940s starts the postwar group; 1950s starts the broad contemporary band. */
.jp-art-history-unified-archive .art-history-historical-run--modern .art-history-era-group--nav-9 .jp-history-era-sub-band { background: #ffdfaa; }
.jp-art-history-unified-archive .art-history-historical-run--contemporary .art-history-era-group--nav-9 .jp-history-era-sub-band { background: #ffc9c4; }

/* ART HISTORY: the same four climate-blue shades as WORLD HISTORY.
 * Scoped to the rightmost band; existing vertical events and Context remain.
 * The Holocene (c. 9700 BCE onward) keeps the original art-period color. */
.art-history-archive--art .art-history-milestone-cell--art.art-history-climate-band--glacial {
    background: #b5d8ea;
    color: #172b3c;
}
.art-history-archive--art .art-history-milestone-cell--art.art-history-climate-band--maximum {
    background: #3779ac;
    color: #fff;
}
.art-history-archive--art .art-history-milestone-cell--art.art-history-climate-band--deglaciation {
    background: #8ec1dd;
    color: #172b3c;
}
.art-history-archive--art .art-history-milestone-cell--art.art-history-climate-band--younger-dryas {
    background: #205a8a;
    color: #fff;
}