. .c_jusyo2 sets its own 14px line-height and 30px rhythm with no paragraph rules, so the
's default ~1em margins would pull the award list
apart. Done in CSS rather than stripping the tag in PHP: a rule cannot break on
attributes, nested markup or multiple paragraphs. */
.c_jusyo2 p{
margin: 0;
}
/* --- Work detail: space below an embedded video ---
style2.css gives .movie-wrap no bottom margin, because on the static site the
video was the last thing on 78 of the 82 pages that had one. The four pages that
did put something after it had a spacing utility added by hand — mb20, mb30, mbL
and mbLL, i.e. 20-32px. This template can always follow a video with another
video or with the gallery, so the spacing belongs on the element rather than
being remembered per page. 30px is .mb30 from the same scale and the median of
what the designer actually chose. */
.movie-wrap{
margin-bottom: 30px;
}
/* --- Work detail: gallery column layouts (1 / 2 / 3 columns) ---
The block keeps its original .introphoto_wrapper / .introphoto classes so the
image rules in style2.css still apply. Only the layout changes: style2.css
lays it out as a 2-up flex row inside the narrow column, whereas the spec puts
it full width below the two-column area with a 1/2/3 column choice.
gap and margin repeat style2.css's own values rather than inventing new ones. */
.intro_gallery{
display: grid;
gap: 20px;
margin: 0 0 30px;
align-items: start;
}
.intro_gallery--1{ grid-template-columns: 1fr; }
.intro_gallery--2{ grid-template-columns: repeat(2, 1fr); }
.intro_gallery--3{ grid-template-columns: repeat(3, 1fr); }
.intro_gallery img{
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width:1024px){
.intro_gallery--3{ grid-template-columns: repeat(2, 1fr); }
}
/* --- Screen-reader only --- */
.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;
}
/* ---------------------------------------------------------------------------
ポスター背景色 — WORKS 一覧 (/works/) only.
Tiles are letterboxed onto the work's own gradient so a row reads as one band
instead of a ragged edge. Thumbnails here range from h/w 0.18 (wide banner) to
1.32 (portrait poster), so without this the grid steps up and down badly.
Height is equalised PER ROW by flexbox: style2.css pins every tile to
`align-self: flex-start` to stop exactly this stretching, so that is what the
override below undoes. Each tile then matches the tallest tile in its own row —
no fixed ratio to maintain, and nothing is ever cropped.
--------------------------------------------------------------------------- */
.workslist_wrapper {
align-items: stretch;
}
.workslist {
align-self: stretch;
}
/* The anchor has to fill the stretched tile, otherwise it collapses to the image
height and the gradient shows below rather than around. style2.css removes
`height: 100%` here for the un-stretched layout; it is required for this one. */
.workslist a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.workslist img {
width: 100%;
height: auto;
flex: 0 0 auto;
}
/* ---------------------------------------------------------------------------
Tile frame — every WORKS category (MOVIE, TV, OTHER).
The frame belongs to the tile, so it encloses the gradient and the letterbox
band as well as the poster. .img-responsive img draws it around the image
alone, which on a letterboxed tile frames the poster and leaves the rest of
the tile unframed — that rule is switched off for these tiles below, and left
alone everywhere else (single-work.php still uses it).
An inset outline, not a border: outlines are painted after descendants, so
this frame sits ON TOP of the poster instead of beside it. A border would sit
outside the anchor's overflow clip, and fading it on hover would then expose
the page behind the tile — a white ring on every work with no ポスター背景色.
It also costs no layout, so the column width calc stays exact.
--------------------------------------------------------------------------- */
.workslist {
outline: 1px solid #666;
outline-offset: -1px;
box-shadow: 3px 4px 10px -1px rgba(0, 0, 0, 0.3);
transition: outline-color 0.5s ease;
}
/* The frame used to disappear on hover for free: it was on the , so
scale(1.2) carried it past the anchor's overflow clip. Painted on the tile it
is static, so the fade has to be asked for. The zoomed thumbnail covers the
tile by then, so what shows through is the image. */
.workslist:hover {
outline-color: transparent;
}
.workslist img {
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ---------------------------------------------------------------------------
Fixed tile height — MOVIE only (/works/ and /works/movie/).
Without this each row is only as tall as its own tallest thumbnail, so the
grid steps between rows: MOVIE thumbnails run from h/w 0.18 (wide banner) to
1.41 (portrait poster). 723x1024 is the ratio the production /works/ and
/works/movie/ pages already settle on — 44 of their 55 posters are that shape
(~5:7, i.e. 1:root2) — so it is the tile shape here too. A ratio rather than a
px height because the tile width is a percentage of .mainarea, so a px value
would only be right at one viewport width.
Scoped to body.work-cat-movie: /works/tv/ and /works/other/ share the frame
above but keep the per-row height behaviour.
--------------------------------------------------------------------------- */
.work-cat-movie .workslist {
aspect-ratio: 723 / 1024;
}
/* Letterboxed, never cropped: a 723x1024 poster fills the tile exactly and
everything shorter is centred on the tile's own background. */
.work-cat-movie .workslist img {
height: 100%;
object-fit: contain;
}