@charset "UTF-8";


.home-library {
--home-line: #d9d9d5;
--home-line-dark: #d9d9d5;
--home-muted: #7a7a74;
--home-soft: #f4f4f1;
padding: 0 0 0 0;
width: 100%;
margin: 0 auto;
}



/* Impressionism 3 cards
------------------------------------------------------------------------------------------- */
.al-impressionism {
width: 100%;
margin: 0 auto;
padding: 50px 0 30px 0;
}

.al-impressionism *,
.al-impressionism *::before,
.al-impressionism *::after {
box-sizing: border-box;
}

.al-impressionism__inner {
width: 100%;
margin: 0 auto;
}

.al-impressionism__heading {
margin: 0 0 38px;
}

.al-impressionism__title {
width: 90%;
margin: 0 auto;
font-size: 21px;
line-height: 1.2;
text-align: center;

font-family: "minion-pro-display", serif;
font-weight: 400;
font-style: normal;
}

.al-impressionism__subtitle {
width: 94%;
margin: 25px auto 0 auto;
font-size: 14px;
line-height: 1.6;
text-align: left;




}

.al-impressionism__grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}

.al-impressionism__card {
width: 94%;
margin: 0 auto;
min-width: 0;
}

.al-impressionism__link {
position: relative;
display: block;
width: 100%;
aspect-ratio: .82;
overflow: hidden;
color: #fff;
background: #9e9c96;
text-decoration: none;
isolation: isolate;
}

.al-impressionism .al-impressionism__link:hover,
.al-impressionism .al-impressionism__link:focus-visible,
.al-impressionism .al-impressionism__link:active,
.al-impressionism .al-impressionism__link:visited {
color: #fff;
}

.al-impressionism__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .8s cubic-bezier(.22,.61,.36,1);
}

.al-impressionism__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.13) 22%, transparent 44%, transparent 67%, rgba(0,0,0,.10) 83%, rgba(0,0,0,.34) 100%);
}

.al-impressionism__top {
position: absolute;
z-index: 2;
top: 43px;
left: 18px;
right: 18px;
text-align: center;
}

.al-impressionism__artist {
display: block;
font-size: 21px;
line-height: 1.22;
letter-spacing: .005em;

font-family: "minion-pro-display", serif;
font-weight: 400;
font-style: normal;
}

.al-impressionism__desc {
display: block;
margin-top: 11px;
font-size: 12px;
line-height: 1.5;
letter-spacing: .045em;
}

.al-impressionism__more {
position: absolute;
z-index: 2;
bottom: 43px;
left: 50%;
transform: translateX(-50%);


font-size: 15px;
line-height: 1.4;
letter-spacing: .01em;
padding-bottom: 3px;
white-space: nowrap;
border-bottom: 1px solid rgba(255,255,255,.88);
}

.al-impressionism__link:hover .al-impressionism__image {
transform: scale(1.045);
}

.al-impressionism__link:focus-visible {
outline: 3px solid #555;
outline-offset: 4px;
}






/* Impressionism image credit */
.al-impressionism__credit {
margin: 14px auto 0 ;
width: 90%;

font-family: "hoefler-text", Georgia, serif;
font-size: 12px;
line-height: 1.6;
text-align: center;
color: #777;
}

.al-impressionism__credit a,
.al-impressionism__credit a:hover,
.al-impressionism__credit a:visited {
color: inherit;
text-decoration: underline;
}

/* 印象派・1874年ビジュアル
------------------------------------------------------------------------------------------- */
.imp02,
.imp02 *,
.imp02 *::before,
.imp02 *::after {
box-sizing: border-box;
}

.imp_tokubetu {
padding: 100px 0 0 0;
}

.imp02 {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
margin: 0 auto;
}



.imp02__visual {
grid-row: 1;
position: relative;
width: 100%;
height: clamp(340px, 112vw, 580px);
overflow: hidden;
isolation: isolate;
}

.imp02__art {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
will-change: opacity;
animation-duration: 32s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.imp02__art--01 {
animation-name: imp02-fade-01;
}

.imp02__art--02 {
animation-name: imp02-fade-02;
}

.imp02__art--03 {
animation-name: imp02-fade-03;
}

.imp02__art--04 {
animation-name: imp02-fade-04;
}

@keyframes imp02-fade-01 {
0%, 20% { opacity: 1; }
25%, 95% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes imp02-fade-02 {
0%, 20% { opacity: 0; }
25%, 45% { opacity: 1; }
50%, 100% { opacity: 0; }
}

@keyframes imp02-fade-03 {
0%, 45% { opacity: 0; }
50%, 70% { opacity: 1; }
75%, 100% { opacity: 0; }
}

@keyframes imp02-fade-04 {
0%, 70% { opacity: 0; }
75%, 95% { opacity: 1; }
100% { opacity: 0; }
}

.imp02__content {
grid-row: 3;
position: relative;
z-index: 2;
width: 92%;
max-width: 760px;
margin: 0 auto;
padding: 36px 0 30px 0;
}

.imp02__eyebrow {
margin: 0 0 18px;
font-family: "hoefler-text", Georgia, serif;
font-size: 8px;
line-height: 1.2;
text-transform: uppercase;
display: none;
}

.imp02__title {
margin: 0;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: 17px;
line-height: 1.2;
font-feature-settings: "palt" 1;
}

.imp02__text {
margin-top: 21px;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: 15px;
line-height: 1.6;
}

.imp02__text p {
margin: 0 0 1.1em;
font-weight: 500;
}

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

.imp02__link {
display: inline-flex;
align-items: center;
margin-top: 27px;
padding: 0 0 6px;
border-bottom: 1px solid currentColor;
font-family: "hoefler-text", Georgia, serif;
font-size: 17px;
line-height: 1.25;
text-decoration: none;
transition: opacity .3s ease;
}

.imp02__link:hover,
.imp02__link:focus-visible {
color: inherit;
opacity: .6;
}

.imp02__credit {
grid-row: 2;
width: 92%;
max-width: 1100px;
margin: 10px auto 0;
font-family: "hoefler-text", Georgia, serif;
font-size: 11px;
line-height: 1.5;
color: #666;
text-align: left;
}

.imp02__credit a {
color: inherit;
text-decoration: underline;
}

.imp02__credit a:hover {
color: #555;
}

@media (prefers-reduced-motion: reduce) {
.imp02__art { animation: none; opacity: 0; }
.imp02__art--01 { opacity: 1; }
.imp02__link { transition: none; }
}


/* 西洋美術史導入：.imp02 を共用し、5枚のみ40秒フェード
------------------------------------------------------------------------------------------- */
.imp02--art-history .imp02__art {
animation-name: imp02-history-fade;
animation-duration: 40s;
}

.imp02--art-history .imp02__art--01 { animation-delay: 0s; }
.imp02--art-history .imp02__art--02 { animation-delay: -32s; }
.imp02--art-history .imp02__art--03 { animation-delay: -24s; }
.imp02--art-history .imp02__art--04 { animation-delay: -16s; }
.imp02--art-history .imp02__art--05 { animation-delay: -8s; }

@keyframes imp02-history-fade {
0%, 16% { opacity: 1; }
20%, 96% { opacity: 0; }
100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
.imp02--art-history .imp02__art { animation: none; opacity: 0; }
.imp02--art-history .imp02__art--01 { opacity: 1; }
}


/* img03｜キュビスム・フォーヴィスム（SP）
------------------------------------------------------------------------------------------- */
.img03,
.img03 *,
.img03 *::before,
.img03 *::after {
box-sizing: border-box;
}

.img03 {
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 52px;
padding: 0 0 0 0;
}

.img03__panel {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
}

.img03__visual {
grid-row: 1;
position: relative;
width: 100%;
height: clamp(340px, 112vw, 580px);
overflow: hidden;
isolation: isolate;
background: #77736c;
}

.img03__art {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
animation-duration: 32s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.img03__art--01 { animation-name: img03-fade-01; }
.img03__art--02 { animation-name: img03-fade-02; }
.img03__art--03 { animation-name: img03-fade-03; }
.img03__art--04 { animation-name: img03-fade-04; }

@keyframes img03-fade-01 {
0%, 20% { opacity: 1; }
25%, 95% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes img03-fade-02 {
0%, 20% { opacity: 0; }
25%, 45% { opacity: 1; }
50%, 100% { opacity: 0; }
}

@keyframes img03-fade-03 {
0%, 45% { opacity: 0; }
50%, 70% { opacity: 1; }
75%, 100% { opacity: 0; }
}

@keyframes img03-fade-04 {
0%, 70% { opacity: 0; }
75%, 95% { opacity: 1; }
100% { opacity: 0; }
}

.img03__credit {
grid-row: 2;
width: 92%;
margin: 10px auto 0;
font-family: "hoefler-text", Georgia, serif;
font-size: 11px;
line-height: 1.5;
color: #666;
text-align: left;
}

.img03__credit a {
color: inherit;
text-decoration: underline;
}

.img03__credit a:hover {
color: #333;
}

.img03__content {
grid-row: 3;
position: relative;
width: 92%;
max-width: 760px;
margin: 0 auto;
padding: 36px 0 0;
}

.img03__eyebrow {
margin: 0 0 18px;
font-family: "hoefler-text", Georgia, serif;
font-size: 12px;
line-height: 1.2;
}

.img03__title {
margin: 0;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-feature-settings: "palt" 1;
font-weight: 500;
font-size: 17px;
line-height: 1.2;
}

.img03__text {
margin-top: 21px;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: 15px;
line-height: 1.6;
}

.img03__text p {
margin: 0 0 1.1em;
font-weight: 500;
}

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

.img03__link {
display: inline-flex;
margin-top: 27px;
padding: 0 0 6px;
border-bottom: 1px solid currentColor;
font-family: "hoefler-text", Georgia, serif;
font-size: 17px;
line-height: 1.25;
color: inherit;
text-decoration: none;
transition: opacity .3s ease;
}

.img03__link:hover,
.img03__link:focus-visible {
color: inherit;
opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
.img03__art { animation: none; opacity: 0; }
.img03__art--01 { opacity: 1; }
.img03__link { transition: none; }
}


/* vid01｜Marcel Duchamp / MoMA映像（SP）
------------------------------------------------------------------------------------------- */
.vid01,
.vid01 *,
.vid01 *::before,
.vid01 *::after {
box-sizing: border-box;
}

.vid01 {
width: 92%;
margin: 0 auto;
padding: 0 0 0 0;
}

.vid01__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #111;
}

.vid01__frame iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}

.vid01__credit {
width: 92%;
margin: 10px auto 0;
font-family: "hoefler-text", Georgia, serif;
font-size: 11px;
line-height: 1.5;
color: #666;
text-align: left;
}

.vid01__credit a {
color: inherit;
text-decoration: underline;
}

.vid01__credit a:hover {
color: #333;
}

.vid01__content {
width: 92%;
max-width: 760px;
margin: 0 auto;
padding: 36px 0 0;
}

.vid01__eyebrow {
margin: 0 0 18px;
font-family: "hoefler-text", Georgia, serif;
font-size: 12px;
line-height: 1.2;
}

.vid01__title {
margin: 0;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: 21px;
line-height: 1.2;
font-feature-settings: "palt" 1;
}

.vid01__text {
margin-top: 21px;
font-family: YakuHanJPs, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: 15px;
line-height: 1.6;
}

.vid01__text p {
margin: 0 0 1.1em;
font-weight: 500;
}

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

.vid01__link {
display: inline-flex;
align-items: center;
margin-top: 27px;
padding: 0 0 6px;
border-bottom: 1px solid currentColor;
font-family: "hoefler-text", Georgia, serif;
font-size: 17px;
line-height: 1.25;
color: inherit;
text-decoration: none;
transition: opacity .3s ease;
}

.vid01__link:hover,
.vid01__link:focus-visible {
color: inherit;
opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
.vid01__link { transition: none; }
}












/* Art History｜Closing
------------------------------------------------------------------------------------------- */
.al-history-ending {
padding: 90px 0 110px;
text-align: center;
}

.al-history-ending__action {
text-align: center;
}

.al-history-ending__button {
display: inline-block;
padding: 16px 32px;
border: 1px solid currentColor;
color: inherit;
font-family: "hoefler-text", Georgia, serif;
font-size: 18px;
line-height: 1.2;
text-decoration: none;
transition: opacity .3s ease;
}

.al-history-ending__button:hover {
color: inherit;
opacity: .5;
}







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


.home-library {
padding-top: 40px;
margin: 0 auto;
width: 100%;
}



.home-section__title {
font-family: "hoefler-text", sans-serif;
font-weight: 400;
font-style: normal;

font-size: 30px;
line-height: 1.08;
letter-spacing: -.025em;
}





/* Impressionism 3 cards PC */
.al-impressionism__card {
width: 100%;
margin: 0;
min-width: 0;
}


.al-impressionism {
padding: 50px 0 0px;
width: 94%;
margin: 0 auto;
}

.al-impressionism__heading {
margin-bottom: 40px;
}

.al-impressionism__title {
font-size: clamp(30px, 2.35vw, 36px);
}

.al-impressionism__subtitle {
font-size: 13px;
width: 50%;
margin: 15px auto;
text-align: left;
}

.al-impressionism__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2.1vw, 34px);
}

.al-impressionism__link {
aspect-ratio: .743;
}

.al-impressionism__top {
top: 30px;
left: 10px;
right: 10px;
}

.al-impressionism__artist {
font-size: clamp(16px, 1.46vw, 23px);

font-family: "minion-pro-display", serif;
font-weight: 400;
font-style: normal;
}

.al-impressionism__desc {
font-size: clamp(11px, .88vw, 12px);
font-weight: 600;
}

.al-impressionism__more {
bottom: 30px;
font-size: clamp(13px, 1.05vw, 15px);
}


/* 印象派・1874年ビジュアル PC
------------------------------------------------------------------------------------------- */
.imp02 {
position: relative;
width: 100%;
grid-template-rows: max(760px, min(820px, 88vh)) auto;
min-height: 0;
height: auto;
max-height: none;
overflow: visible;
isolation: isolate;
}

.imp02__visual {
grid-row: 1;
grid-column: 1;
position: relative;
inset: auto;
width: 100%;
height: 100%;
}

.imp02__art--01,
.imp02__art--04 {
object-position: center 48%;
}

.imp02__art--02,
.imp02__art--03 {
object-position: center 40%;
}

.imp02__visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.1));
opacity: 0.5;
}

.imp02__content {
grid-row: 1;
grid-column: 1;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
width: 92%;
max-width: 1400px;
min-height: 100%;
margin: 0 auto;
padding: 86px 0 88px;
color: #fff;
}

.imp02__content-inner {
max-width: 625px;
}

.imp02__eyebrow {
margin-bottom: 22px;
font-size: 13px;
display: block;
}

.imp02__title {
font-size: 31px;
line-height: 1.2;
}

.imp02__text {
max-width: 480px;
margin-top: 30px;
font-size: 15px;
line-height: 1.6;
}

.imp02__link {
margin-top: 36px;
font-size: 18px;
}

.imp02__credit {
grid-row: 2;
grid-column: 1;
max-width: none;
margin-top: 10px;
margin-bottom: 24px;
font-size: 12px;
text-align: center;
}


/* img03｜キュビスム・フォーヴィスム（PC 2列）
------------------------------------------------------------------------------------------- */
.img03 {
width: 94%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.7vw, 28px);
margin: 0 auto;
padding: 0;
}

.img03__panel {
position: relative;
grid-template-rows: clamp(680px, 57vw, 800px) auto;
isolation: isolate;
}

.img03__visual {
grid-row: 1;
grid-column: 1;
height: 100%;
}

.img03__visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right, rgba(0,0,0,.58), rgba(0,0,0,.12));
}

.img03__content {
grid-row: 1;
grid-column: 1;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
width: 86%;
max-width: none;
min-height: 100%;
margin: 0 auto;
padding: 52px 0 60px;
color: #fff;
}

.img03__content-inner {
max-width: 470px;
}

.img03__eyebrow {
margin-bottom: 18px;
font-size: 13px;
}

.img03__title {
font-size: clamp(23px, 2.1vw, 30px);
line-height: 1.2;
}

.img03__text {
max-width: 430px;
margin-top: 26px;
font-size: 14px;
line-height: 1.65;
}

.img03__link {
margin-top: 28px;
font-size: 17px;
}

.img03__credit {
grid-row: 2;
grid-column: 1;
width: 94%;
margin: 10px auto 0;
font-size: 12px;
line-height: 1.55;
text-align: left;
}


/* vid01｜映像（PC）
------------------------------------------------------------------------------------------- */
.vid01 {
width: 94%;
margin: 0 auto;
padding-bottom: 0;
}

.vid01__credit {
width: 92%;
margin: 10px auto 0;
text-align: center;

font-family: "hoefler-text", Georgia, serif;
font-size: 12px;
line-height: 1.5;
color: #666;
}

.vid01__content {
padding-top: 58px;
}

.vid01__eyebrow {
margin-bottom: 22px;
font-size: 13px;
}

.vid01__title {
font-size: 31px;
}

.vid01__text {
margin-top: 30px;
font-size: 15px;
}

.vid01__link {
margin-top: 36px;
font-size: 18px;
}












.al-history-ending {
padding: 120px 0 150px;
}

}/* PC 終了 */