/* ART LIBRARY | Homepage image viewer
Source: approved PC + refined SP hero prototype.
Only .al-hero and .al-hero-next are styled; site header/footer untouched.
Mobile first: base = smartphone, min-width:768px = PC.
*/
.al-hero {
--al-hero-border: #deddd9;
--al-hero-quiet: #333;
--al-hero-serif: "hoefler-text", "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
--al-hero-jp-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
--al-hero-ease: cubic-bezier(.24,.58,.2,1);
width: 94%;
margin: 0 auto;
}

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

.al-hero a {
color: inherit;
text-decoration: none;
}

.al-hero button {
font: inherit;
color: inherit;
}

.al-hero a:focus-visible,
.al-hero button:focus-visible {
outline: 2px solid #666;
outline-offset: 5px;
}

.al-hero img {
border: 0;
}

.al-hero-next {
box-sizing: border-box;
}





.al-hero {
position:relative;
margin:0 auto;
height:min(calc(100vh - var(--al-hero-offset, 100px)), 850px);
height:min(calc(100svh - var(--al-hero-offset, 100px)), 850px);
min-height:0;
max-height:850px;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding: 0 0 5px 0;
}

.al-hero__left {
display:contents;
}

.al-hero__lead {
display:flex;
flex-direction:column;
order:0;
gap:0;
}

.al-hero__statement {
font:500 10px/1.5 var(--al-hero-jp-serif);
margin:0;
}

/* One uninterrupted, uncropped painting becomes the main visual. */
.al-hero__right {
order:1;
width:100%;
min-width:0;
flex:1 1 0;
height:auto;
min-height:0;
max-height:none;
margin-top:12px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.al-hero__art-stage {
position:relative;
height:100%;
width:100%;
}

.al-hero__art {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0;
margin:0;
opacity:0;
visibility:hidden;
transition:opacity 1.35s ease,visibility 0s 1.35s;
pointer-events:none;
}

.al-hero__art.is-active {
opacity:1;
visibility:visible;
transition:opacity 1.35s ease,visibility 0s 0s;
pointer-events:auto;
}

.al-hero__art-link {
width:100%;
height:auto;
flex:1 1 0;
min-height:0;
max-height:none;
display:flex;
align-items:flex-end;
justify-content:center;
}

.al-hero__art img {
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;

}

.al-hero__caption {
display:flex;
width:100%;
min-height:18px;
margin-top:8px;
flex-shrink:0;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap;
gap:0 10px;
font:500 11px/1.5 var(--al-hero-serif);
}

.al-hero__caption em {
font-style:italic;
}

.al-hero__caption span:last-child {
white-space:nowrap;
}




/* Title, Japanese name and one clear route into the artist page. */
.al-hero__copy-stage {
order:2;
position:relative;
display:grid;
width:100%;
height:auto;
margin: 24px 0 0 0;
flex-shrink:0;
}


.al-hero__copy {
position:relative;
grid-area:1 / 1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
padding:0;
opacity:0;
visibility:hidden;
transform:none;
pointer-events:none;
transition:opacity .3s var(--al-hero-ease),visibility 0s .3s;
}


.al-hero__copy.is-active {
opacity:1;
visibility:visible;
transform:none;
pointer-events:auto;
transition:opacity 1.15s var(--al-hero-ease),visibility 0s 0s;
}

.al-hero__period {
display:none;
color:var(--al-hero-quiet);
font:500 11px/1.5 var(--al-hero-serif);
text-transform:uppercase;
margin:0 0 25px;
}



.al-hero__name {
display:flex;
flex-wrap:nowrap;
gap:.2em;
letter-spacing:-.025em;
margin:0;
max-width:670px;


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

font-size: 30px;
}




.al-hero__name span {
display:block;
}

.al-hero__jp {
font:500 9px/1.65 var(--al-hero-jp-serif);
margin:0 0 0 0;
}

.al-hero__description {
display:block;
font:500 11px/1.5 var(--al-hero-jp-serif);
margin:11px 0 0;
max-width:385px;
}

.al-hero__link {
margin:13px 0 13px 0;
border-bottom:1px solid #343331;
padding-bottom:3px;
display:inline-flex;
align-items:center;
gap:19px;
font:500 12px/1.2 var(--al-hero-serif);
letter-spacing:-.015em;
transition:gap .25s ease;
}

.al-hero__link::after {
content:none;
font:300 12px/1 sans-serif;
}

.al-hero__link:hover {
gap:43px;
}

/* 同じクレジットをPCでは作家情報側に、SPでは画像直下に表示 */
.al-hero__credit-copy {
display:none;
}

/* Quiet navigation: count and dynamic slide indicators; horizontal swipe on artwork. */
.al-hero__controls {
order:3;
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:12px;
margin-top:10px;
flex-shrink:0;
padding:7px 0 0 0;
}

.al-hero__count {
font:400 13px/1 var(--al-hero-serif);
white-space:nowrap;
min-width:auto;
font-variant-numeric:tabular-nums;
}

.al-hero__count-separator {
padding:0 5px;
}

.al-hero__segments {
display:flex;
align-items:center;
gap:5px;
flex:0 0 145px;
max-width:145px;
margin-left:auto;
}

.al-hero__segment {
position:relative;
flex:1;
height:34px;
padding:0;
background:transparent;
border:0;
cursor:pointer;
touch-action:manipulation;
}

.al-hero__segment::before {
content:"";
position:absolute;
top:16px;
left:0;
right:0;
height:1px;
background:#dbd9d4;
}

.al-hero__segment::after {
content:"";
position:absolute;
top:16px;
left:0;
width:100%;
height:1px;
background:#3e3c38;
transform:scaleX(0);
transform-origin:left;
transition:transform .45s ease;
}

.al-hero__segment.is-done::after,
.al-hero__segment.is-active::after {
transform:scaleX(1);
}

.al-hero__segment:hover::before {
background:#777;
}

.al-hero__arrows {
display:none;
gap:16px;
align-items:center;
margin-left:auto;
}

.al-hero__arrow {
border:0;
background:none;
width:30px;
height:35px;
padding:0;
cursor:pointer;
font:300 26px/1 var(--al-hero-serif);
}

.al-hero__arrow:hover {
color:#898782;
}

.al-hero-next {
max-width:1600px;
margin:0 auto;
padding:0 24px;
}





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




.al-hero {
max-width:1600px;
height:min(calc(100vh - var(--al-hero-offset, 0px)), 890px);
height:min(calc(100svh - var(--al-hero-offset, 0px)), 890px);
max-height:890px;
min-height:0;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
align-items:center;
gap:28px;
padding:60px 35px 15px 35px;

width: 94%;
margin: 0 auto;
}



.al-hero__left {
min-width:0;
display:flex;
flex-direction:column;
justify-content:space-between;
align-self:stretch;
padding:18px 0 16px;
}



.al-hero__lead {
order:0;
gap:14px;
}


.al-hero__statement {
font:500 12px/1.5 var(--al-hero-jp-serif);
margin:0;
}

.al-hero__right {
order:0;
width:auto;
height:min(775px, calc(100svh - var(--al-hero-offset, 0px) - 75px));
min-height:0;
max-height:none;
margin-top:0;
}

.al-hero__art {
gap:0;
}

.al-hero__art-link {
width:100%;
height:100%;
max-height:none;
align-items:center;
}

.al-hero__art img {
box-shadow:0 3px 18px rgba(0,0,0,.055);
}

.al-hero__caption {
display:none;
}

.al-hero__copy-stage {
order:0;
display:block;
height:420px;
margin-top:0;
}

.al-hero__copy {
position:absolute;
inset:0;
justify-content:center;
padding:0;
transform:none;
}

.al-hero__period {
display:block;
}

.al-hero__name {
display:block;

letter-spacing:-.025em;

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

font-size: 70px;
line-height: 1.0;
}

.al-hero__jp {
font:500 13px/1.9 var(--al-hero-jp-serif);
margin:27px 0 0;
}

.al-hero__description {
display:block;
font:500 12px/1.5 var(--al-hero-jp-serif);
margin:11px 0 0 0;
max-width:385px;
}

.al-hero__credit-copy {
display:block;
max-width:480px;
margin:clamp(10px, 1.4vw, 22px) 0 0;
font:400 12px/1.6 var(--al-hero-serif);
color:#777;
}

.al-hero__credit-copy em {
font-style:italic;
}

.al-hero__link {
margin-top:33px;
padding-bottom:3px;
gap:34px;
font:500 17px/1.3 var(--al-hero-serif);
}

.al-hero__link::after {
font:300 13px/1 sans-serif;
}

.al-hero__controls {
order:0;
flex-wrap:wrap;
gap:16px;
margin-top:0;
border-top:0;
padding-top:22px;
}

.al-hero__count {
font:400 14px/1 var(--al-hero-serif);
min-width:58px;
}

.al-hero__segments {
flex:1;
max-width:250px;
margin-left:0;
gap:5px;
}

.al-hero__segment {
height:22px;
touch-action:auto;
}

.al-hero__segment::before,
.al-hero__segment::after {
top:10px;
}

.al-hero__arrows {
display:flex;
}

.al-hero-next {
padding:0 clamp(34px,7.1vw,116px);
}




}/*PC 終了*/






@media (prefers-reduced-motion:reduce) {
.al-hero__copy,
.al-hero__art,
.al-hero__segment::after {
transition-duration:0s!important;
}
}