block that opens every sub page (archive.html,
archive-ranking.html). Same two lines as .section__head, set larger: the
display face at 80.5 instead of 60 and the Japanese line at 25 instead of
20. 10vw keeps the longest one ("PICK UP NEWS") on a single line down to
320px. Pages that put .section__head on the same element get its 99px
lead-out cancelled here; the space below is the breadcrumb's own. */
.page-head {
padding-top: 99px;
margin-bottom: 0;
text-align: center;
}
.page-head .section__en { font-size: clamp(24px, 10vw, 80.5px); }
.page-head .section__ja { margin-top: 30px; font-size: 25px; }
/* --- Band title -----------------------------------------------------------
1070 x 50 label in --c-band over the block it names. Used by the ranking
bands (archive-ranking.html) and by the shop system blocks
(single-shop.html), which add a 25px mark in front of the label.
Pages set their own margins. */
.band-title {
display: flex;
align-items: center;
gap: 10px;
height: 50px;
padding-inline: 20px;
background: var(--c-band);
font-size: 18px;
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-wide);
}
.band-title__icon { flex: none; width: 25px; height: 25px; }
/* Screen-reader-only text. Used where the screen gives a page no visible
heading but the document still needs one. .screen-reader-text is the same
thing under the name WordPress uses in the markup it prints (pagination). */
.sr-only,
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Hero ---------------------------------------------------------------- */
/* fv.mp4 is 1920x1080; at 1366 wide that is the 768px band the screen draws. */
.hero {
aspect-ratio: 16 / 9;
background: var(--c-ink);
}
.hero__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Pick up news -------------------------------------------------------- */
.news-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-lg);
}
.news-card { display: block; aspect-ratio: 520 / 372; }
.news-card .ph { width: 100%; height: 100%; }
/* PICK UP slider (front-page.php; the client's 2026-09-28 request replaced
the two news cards). A native scroll strip: swipe / trackpad / scroll-snap
work without script; rain_footer_scripts() adds the pager and autoplay.
Two banners across the 1070 column, as the news cards were; on a phone
78% wide with the next one showing at the screen edge.
The banners are the shops' 550 x 300 information images (dark veil, white
logo and the 2px gold frame burnt in). .frame lands on the same pixels at
that ratio and redraws the frame where the phone crop cuts it off. */
.pickup__track {
position: relative; /* the slides' offsetLeft is measured from here */
display: flex;
gap: var(--gap-lg);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Room for the card shadow (0 5 10), which the scroller would clip. */
padding-block: 6px 16px;
margin-block: -6px -16px;
}
.pickup__track::-webkit-scrollbar { display: none; }
.pickup__slide {
flex: 0 0 calc((100% - var(--gap-lg)) / 2);
scroll-snap-align: start;
}
.pickup-card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 550 / 300;
background: var(--c-ink);
color: var(--c-white);
-webkit-user-drag: none;
}
.pickup-card .ph { width: 100%; height: 100%; }
.pickup-card .ph > img { -webkit-user-drag: none; }
/* 「最新情報を見る ›」 on a dark fade along the bottom, inside the burnt-in
frame. The logo sits in the middle of every banner, clear of it. */
.pickup-card__more {
position: absolute;
z-index: 2;
left: 2px;
right: 2px;
bottom: 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 30px 22px 16px 24px;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: var(--ls-wide);
}
.pickup-card__arrow {
box-sizing: content-box;
flex: none;
padding: 9px 11px;
border: 1px solid #cfbc79;
border-radius: 50%;
color: #cfbc79;
/* #chevron points left. */
rotate: 180deg;
}
.pickup__pager {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin-top: 30px;
}
.pickup__pager[hidden] { display: none; }
.pickup__arrow { display: grid; place-items: center; width: 12px; height: 21px; }
.pickup__dots { display: flex; align-items: center; gap: 10px; }
/* The dot is 8px (the current one 22px); 8px of padding around it makes it
easy to tap without widening the row. */
.pickup__dot {
display: block;
padding: 8px;
margin: -8px;
}
.pickup__dot::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
background: rgba(180, 129, 50, .3);
transition: width .3s ease, background-color .3s ease;
}
.pickup__dot.is-active::before { width: 22px; background: #b48132; }
/* --- Group ranking ------------------------------------------------------- */
.tabs {
display: grid;
/* --tabs: the number of tabs actually shown (template/group-ranking.php
drops the rankings nobody is entered in). */
grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
height: 80px;
margin-bottom: 99px;
}
.tab {
position: relative;
display: grid;
place-items: center;
padding-inline: 8px;
font-size: 18px;
font-weight: 700;
letter-spacing: var(--ls-wide);
text-align: center;
}
/* 1px gold rule between two adjacent inactive tabs (the active tab's own
edge serves as the divider on its side). */
.tab:not(.is-active) + .tab:not(.is-active)::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background: var(--grad-gold);
}
.tab.is-active {
background: var(--grad-gold);
color: var(--c-paper);
}
.tab[role="tab"]:not(.is-active) { cursor: pointer; }
.rank-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--gap-sm);
}
.rank-card {
--frame-w: 1px;
--frame-grad: var(--grad-gold-hairline);
padding: 1px 1px 13px;
background: var(--c-ink);
color: var(--c-light);
text-align: center;
}
.rank-card__media {
position: relative;
aspect-ratio: 196 / 250;
}
.rank-card__media .ph { width: 100%; height: 100%; }
/* From the 1st to the 5th the ranking shows the dummy image instead of the
photo (template/group-ranking.php; .is-ranking-hidden on the section). */
.rank-card__dummy,
.is-ranking-hidden .rank-card__photo { display: none; }
.is-ranking-hidden .rank-card__dummy { display: grid; } /* .ph's own display */
/* The whole card links to the cast page (template/group-ranking.php). */
.rank-card__link { display: block; color: inherit; text-decoration: none; }
.rank-card:has(> a.rank-card__link:hover) { opacity: .85; }
/* White rank ribbon, overhanging the card's left edge by 6px with a 6x4 fold
tucked above it. */
.rank-badge {
position: absolute;
/* Above .frame::after (3) — the card's gold hairline otherwise runs straight
across the ribbon where it overhangs the left edge. */
z-index: 4;
left: -7px;
bottom: 10px;
/* Fixed-width ribbon with centred numerals, as drawn (100px, 110px for the
two-digit rank) — not content-driven. */
width: 100px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-white);
box-shadow: var(--shadow-badge);
font-family: var(--font-display);
color: var(--c-ink);
letter-spacing: var(--ls-display);
line-height: 1;
}
.rank-badge::before {
content: "";
position: absolute;
left: 0;
top: -4px;
width: 6px;
height: 4px;
background: var(--c-white);
/* Taper the tail: the top-left corner is cut away so the fold recedes into
the card edge instead of reading as a square nub. */
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rank-badge--wide { width: 110px; }
.rank-badge__pre { font-size: 25px; }
.rank-badge__num { font-size: 35px; }
.rank-card__shop {
margin-top: 15px;
font-size: 14px;
font-weight: 500;
line-height: .8;
letter-spacing: var(--ls-wide);
}
.rank-card__name {
margin-top: 10px;
font-size: 23px;
font-weight: 700;
line-height: .95;
letter-spacing: var(--ls-wide);
}
/* --- Shop ranking -------------------------------------------------------- */
/* The artwork carries the 2px gold frame and the darkening overlay (mean
luminance 6-19), so only the rank, the shop name and the logo go on top.
The card is a size container: every value below is a share of the card
width, so the whole composition keeps the design's proportions from a
1070px No.1 card down to a 343px phone. px values are the fallback for
engines without container query units. */
.shop-rank { display: grid; gap: var(--gap-lg); }
.shop-rank__row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); }
.shop-rank__row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); }
.shop-card {
display: block;
position: relative;
container-type: inline-size;
overflow: hidden;
background: var(--c-ink);
color: var(--c-light);
aspect-ratio: 1070 / 250;
}
.shop-card > .ph {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
}
/* Each logo is centred in a 300x300 canvas with a different amount of padding,
so --logo-h is sized to land the artwork itself at the drawn size and
--logo-x/y place its centre. Sizing off the card HEIGHT (every shop card is
250px tall in the design) keeps one value correct for all card widths. */
.shop-card__logo {
position: absolute;
z-index: 2;
top: var(--logo-y, 50%);
left: var(--logo-x, 50%);
translate: -50% -50%;
width: auto;
height: var(--logo-h);
}
.shop-card__body {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end; /* the block sits low in the card, as drawn */
align-items: flex-start;
padding: 0 39px 31px;
padding: 0 3.645cqw 2.897cqw;
}
.shop-card__rank {
font-family: var(--font-display);
line-height: 1;
letter-spacing: var(--ls-display);
}
.shop-card__rank .pre { font-size: var(--fs-display-m); font-size: 5.607cqw; }
.shop-card__rank .num { font-size: var(--fs-display-xl); font-size: 7.523cqw; }
.shop-card__name {
font-family: var(--font-display);
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-display);
font-size: var(--fs-display-s);
font-size: 3.738cqw;
}
/* "GRAN-TOKYO-" sets GRAN at 25px (N tracked wider) and the city at 20px. */
.shop-card__name .n { letter-spacing: .15em; }
.shop-card__name .city { font-size: 20px; font-size: 5.952cqw; letter-spacing: var(--ls-display); }
/* No.2 / No.3 — half width */
.shop-card--md { aspect-ratio: 520 / 250; }
.shop-card--md .shop-card__body { padding: 0 39px 16px; padding: 0 7.5cqw 3.077cqw; }
.shop-card--md .shop-card__rank .pre { font-size: 50px; font-size: 9.615cqw; }
.shop-card--md .shop-card__rank .num { font-size: var(--fs-display-l); font-size: 13.462cqw; }
.shop-card--md .shop-card__name { font-size: 30px; font-size: 5.769cqw; }
/* No.4 / No.5 / No.6 — third width, logo centred above the text */
.shop-card--sm { aspect-ratio: 336 / 250; }
.shop-card--sm .shop-card__body { padding: 0 39px 29px; padding: 0 11.607cqw 8.631cqw; }
.shop-card--sm .shop-card__rank .pre { font-size: 40px; font-size: 11.905cqw; }
.shop-card--sm .shop-card__rank .num { font-size: 60px; font-size: 17.857cqw; }
.shop-card--sm .shop-card__name { font-size: var(--fs-display-xs); font-size: 7.44cqw; }
/* --- Shop lineup ---------------------------------------------------------
A slider: every shop is a .lineup__slide stacked in the same grid cell (so
the block is as tall as the tallest slide and nothing jumps), and the
active one fades in over the others. The pager sits in the bottom-right
corner of the whole block, i.e. under the detail column, as drawn. */
.lineup { position: relative; }
.lineup__slides { display: grid; }
.lineup__slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(0, 550fr) minmax(0, 452fr);
gap: 68px;
align-items: stretch;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease, visibility 0s linear .6s;
}
.lineup__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity .6s ease;
}
@media (prefers-reduced-motion: reduce) {
.lineup__slide, .lineup__slide.is-active { transition: none; }
}
.lineup__visual {
display: block;
width: 100%;
aspect-ratio: 550 / 450;
background: var(--c-ink);
}
.lineup__visual .ph { width: 100%; height: 100%; }
.lineup__detail {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-start;
padding-block: 33px 0;
text-align: center;
}
/* The logo box keeps the drawn 85px height for every shop, so the name
below never moves; each logo gets its own size (rain_shop_logo()) and sits
centred in it. */
.lineup__logo {
display: grid;
place-items: center;
height: 85px;
margin-bottom: 42px;
flex: none;
}
.lineup__logo img { display: block; max-width: 100%; }
.lineup__name {
font-family: var(--font-display);
/* "ROMEO&JULIET" has no break opportunity, so it has to scale rather than
wrap on narrow screens. */
font-size: clamp(24px, 6.2vw, var(--fs-display-s));
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-display);
}
.lineup__icon { width: min(290px, 100%); height: auto; margin-block: 22px 38px; }
.lineup__lead {
width: 100%;
max-width: 354px;
font-size: 16px;
font-weight: 500;
line-height: 26px;
letter-spacing: var(--ls-wide);
}
.lineup__pager {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
}
.lineup__arrow { display: grid; place-items: center; width: 12px; height: 21px; }
.lineup__count {
font-family: var(--font-display);
font-size: 16px;
line-height: 1;
min-width: 60px;
}
.lineup__count .sep { font-size: 20px; }
.lineup__pager[hidden] { display: none; }
/* --- Recruit ------------------------------------------------------------- */
/* recruit.jpg already carries the gold frame, the four corner flourishes and
the darkening overlay, so only the label is drawn on top. */
.recruit {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
aspect-ratio: 1070 / 300;
background: var(--c-ink);
color: var(--c-light);
}
.recruit__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.recruit__label {
position: relative;
z-index: 2;
font-size: 40px;
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-wide);
text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
/* --- Special feature ----------------------------------------------------- */
.feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-lg);
}
.feature-card {
display: block;
aspect-ratio: 520 / 250;
background: var(--c-ink);
}
.feature-card .ph { width: 100%; height: 100%; }
/* --- Footer -------------------------------------------------------------- */
.footer { padding-top: 225px; padding-bottom: 92px; text-align: center; }
.footer__mark {
position: relative;
display: grid;
place-items: center;
padding-block: 79px;
}
.footer__mark .ph {
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: 194px;
height: 195px;
background: none;
/* rain-logo.png already carries the 4% watermark alpha from the Zeplin
layer, so no extra opacity here — it would multiply down to nothing. */
}
.footer__mark .ph::before { content: none; }
.footer__mark .ph > img { position: static; height: auto; object-fit: contain; }
.footer__wordmark {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: clamp(26px, 6vw, var(--fs-display-m));
font-weight: 400;
line-height: .6;
letter-spacing: var(--ls-display);
}
.footer__nav {
margin-top: 69px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px 48px;
font-family: var(--font-display);
font-size: 16px;
line-height: .6;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.footer__copy {
margin-top: 96px;
font-family: var(--font-display);
font-size: 12px;
line-height: 1;
letter-spacing: var(--ls-wide);
}
/* --- Responsive ---------------------------------------------------------- */
/* The ranking holds exactly 10 cards, which only divides evenly into 5 or 2
columns — a 3- or 4-up grid strands No.10 on a row of its own, so the grid
goes straight from 5 to 2. */
@media (max-width: 1100px) {
.page-head { padding-top: 72px; }
:root { --section-gap: 110px; }
.section__head { margin-bottom: 64px; }
.tabs { margin-bottom: 64px; }
/* Stacked slides all take the tallest one's height; start-aligned rows keep
that spare height out of the photo row (it would widen the photo past
the container through its aspect-ratio). */
.lineup__slide {
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: 40px;
}
.lineup__detail { padding-block: 0; }
.lineup__pager { position: static; margin-top: 32px; justify-content: flex-end; }
}
@media (max-width: 820px) {
.gnav { padding: 0 14px 0 26px; }
.gnav__list { gap: 26px; }
.rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 2 x 2 tabs. A 1px gap over a gold backdrop draws the rules between cells,
so every tab reads as a cell instead of the active one alone. */
.tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
height: auto;
gap: 1px;
background: var(--grad-gold);
}
.tab {
min-height: 60px;
background: var(--c-paper);
font-size: clamp(11px, 3.4vw, 16px);
letter-spacing: .06em;
}
.tab.is-active { background: var(--grad-gold); }
.tab:not(.is-active) + .tab:not(.is-active)::before { display: none; }
.recruit__label { font-size: clamp(16px, 3.6vw, 40px); }
}
@media (max-width: 620px) {
:root { --header-h: 66px; }
.site-header { padding: 16px 16px 0; gap: 10px; }
.gnav {
height: 44px;
padding: 0 7px 0 14px;
border-radius: 22px;
}
.gnav__list {
gap: clamp(8px, 2.4vw, 26px);
font-size: clamp(9px, 2.5vw, 12px);
letter-spacing: .06em;
}
.gnav__recruit {
width: clamp(76px, 24vw, 120px);
height: 30px;
border-radius: 15px;
font-size: clamp(9px, 2.5vw, 12px);
letter-spacing: .06em;
}
.page-head { padding-top: 48px; }
.page-head .section__ja { margin-top: 20px; font-size: 18px; }
.band-title { height: 44px; gap: 8px; padding-inline: 16px; font-size: 15px; }
.band-title__icon { width: 20px; height: 20px; }
.breadcrumb { font-size: 13px; }
.back { height: 64px; font-size: 16px; }
.back__arrow { right: clamp(24px, 12vw, 70px); }
:root { --section-gap: 80px; --gap-lg: 16px; --gap-sm: 12px; }
.container { width: min(var(--container), 100% - 32px); }
/* One banner and the edge of the next. The strip runs on to the screen's
right edge (the container's 16px gutter), so the next banner is cut by
the screen, not by the column. */
.pickup__track { margin-right: -16px; padding-right: 16px; }
.pickup__slide { flex-basis: 78%; }
/* Taller than the artwork so the banner still has presence at phone
width: the middle of the image, which crops the burnt-in frame off the
sides, so .frame draws it again (on the same pixels top and bottom). */
.pickup-card { aspect-ratio: 5 / 4; }
.pickup-card__more { padding: 22px 12px 10px 14px; font-size: 12px; }
.pickup-card__arrow { padding: 6px 8px; width: 6px; height: 10px; }
.pickup__arrow { display: none; }
.pickup__pager { margin-top: 22px; }
.news-grid,
.feature-grid,
.shop-rank__row--2,
.shop-rank__row--3 { grid-template-columns: minmax(0, 1fr); }
/* Stacked into one column, every shop card takes the No.2 / No.3 ratio so
the rows are all the same height. The artwork is cover-cropped to fit,
which eats part of its baked-in gold frame (the sides on No.1, the top and
bottom on No.4-6), so the 2px frame is redrawn in CSS. */
.shop-card,
.shop-card--md,
.shop-card--sm { aspect-ratio: 520 / 250; }
/* With every card on the No.2 / No.3 shape, they all take that card's
composition too: logo right-of-centre and vertically centred, and the
No.2 / No.3 type scale — otherwise No.1 ends up with the smallest
lettering of the six and the No.4-6 logo lands on top of the rank. */
.shop-card .shop-card__logo { top: 50%; left: 73.5%; }
.shop-card .shop-card__body { padding: 0 7.5cqw 3.077cqw; }
.shop-card .shop-card__rank .pre { font-size: 9.615cqw; }
.shop-card .shop-card__rank .num { font-size: 13.462cqw; }
.shop-card .shop-card__name { font-size: 5.769cqw; }
.shop-card .shop-card__name .city { font-size: 3.846cqw; }
.shop-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
padding: 2px;
background: var(--grad-gold-cream);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
/* Keep the ribbon at the design's ~50% of the card width. */
.rank-badge { width: 84px; height: 30px; }
.rank-badge--wide { width: 94px; }
.rank-badge__pre { font-size: 21px; }
.rank-badge__num { font-size: 30px; }
.rank-card__shop { margin-top: 12px; font-size: 12px; }
.rank-card__name { margin-top: 8px; font-size: 19px; }
/* The footer sits outside .container, so it needs its own gutter. */
.footer { padding-top: 120px; padding-inline: 16px; }
.footer__nav {
margin-top: 40px;
gap: 10px clamp(10px, 3.5vw, 24px);
font-size: clamp(11px, 3.2vw, 16px);
}
.footer__copy { margin-top: 48px; font-size: clamp(10px, 2.8vw, 12px); }
}
/* Narrower than 340 the pill can no longer share a line with the mark, so it
drops to a full-width row of its own. js/viewport.js pins anything under
390 to 390, so this only comes into play with scripting off. */
@media (max-width: 340px) {
/* 16 top + 50 mark + 12 row gap + 44 pill */
:root { --header-h: 122px; }
.site-header { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; }
.gnav { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) {
a.news-card, a.feature-card, a.recruit, a.pickup-card,
.back, .gnav__recruit { transition: opacity .25s ease; }
a.news-card:hover, a.feature-card:hover, a.recruit:hover, a.pickup-card:hover,
.back:hover, .gnav__recruit:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. PICK UP NEWS 一覧（archive.php・archive-pick-up-news.php / body.tpl-archive・tpl-archive-pick-up-news） ======================= */
/* ===========================================================================
RAIN GROUP — PICK UP NEWS archive
Built from the Zeplin screen "news" (1366 wide, content ends at y 1683).
Layered on top of tokens.css + style.css: the site header, the shop chip,
the breadcrumb, the back link, the card frame and the image slot are all
shared components in style.css — what is left here is this page's own
grid and spacing.
========================================================================= */
/* --- Page head ------------------------------------------------------------
.page-head itself is shared (style.css) — archive-ranking.html opens the
same way. Only the space under it is this page's. */
:where(.tpl-archive, .tpl-archive-pick-up-news) .breadcrumb { margin-top: 100px; }
/* --- News list -----------------------------------------------------------
Two 520-wide columns, 30 apart; the drawn 49 row gap is set at 46 because
the headline's line box runs 3px past its ink. The thumbnails are the TOP
page's news-1/news-2 and already carry the 2px gold frame, so no .frame
here either (see images/README.md). */
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-list {
margin-top: 46px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 46px var(--gap-lg);
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item { display: block; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__link { display: block; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__body {
margin-top: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* The chip is flush with the card edge but the date and the headline are
drawn 10px in on every one of the four cards. Reproduced as measured; set
--meta-indent to 0 to flush them up with the chip. */
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__body { --meta-indent: 10px; }
/* archive-pick-up-news.php: one chip per shop category, wrapping when a post
belongs to several shops (group-wide news). */
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__shops {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__date {
margin-top: 10px;
padding-left: var(--meta-indent);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-wide);
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__title {
margin-top: 6px;
padding-left: var(--meta-indent);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
letter-spacing: var(--ls-wide);
}
/* --- Pagination ------------------------------------------------------------
Not on the screen (it draws four cards). the_posts_pagination() only prints
it past posts_per_page; set in the pager's type — Aviano numerals with the
shared chevron, as the TOP shop lineup's "01 / 06". */
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination { margin-top: 80px; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 18px;
line-height: 1;
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination .page-numbers {
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination .page-numbers.current {
background: var(--grad-gold);
color: var(--c-paper);
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination .is-next { rotate: 180deg; }
/* rain_pagination(): the arrow on the first / last page stays, dimmed. */
:where(.tpl-archive, .tpl-archive-pick-up-news) .pagination .is-disabled { opacity: .25; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-empty {
margin-top: 46px;
font-size: 16px;
font-weight: 500;
letter-spacing: var(--ls-wide);
}
/* --- Back to top --------------------------------------------------------- */
:where(.tpl-archive, .tpl-archive-pick-up-news) .back { margin-top: 146px; }
/* Nothing below the button on this screen — the space under it is the TOP
footer's own 225px lead-in (.footer in style.css). */
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the TOP sheet; the header's own steps live
in style.css with the component. */
@media (max-width: 1100px) {
:where(.tpl-archive, .tpl-archive-pick-up-news) .breadcrumb { margin-top: 72px; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .back { margin-top: 110px; }
}
@media (max-width: 620px) {
:where(.tpl-archive, .tpl-archive-pick-up-news) .breadcrumb { margin-top: 48px; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-list {
margin-top: 32px;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__body { margin-top: 20px; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__link { transition: opacity .25s ease; }
:where(.tpl-archive, .tpl-archive-pick-up-news) .news-item__link:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. PICK UP NEWS 記事（single.php・single-pick-up-news.php / body.tpl-single・tpl-single-pick-up-news） ======================= */
/* ===========================================================================
RAIN GROUP — PICK UP NEWS article
Built from the Zeplin screen "news_" (1366 wide).
The site header, the shop chip, the breadcrumb, the back link and the image
slot are shared components in style.css; this sheet is the article head's
band and the body prose.
The screen carries a note from the designer at y 3157 —
「※現行サイトと形は一緒でOKです」 — over an empty 800 x 2000 box at y 646.
The box is the article body and the note says its typography may follow the
current site, so nothing below the head is specified in Zeplin: the prose
rules here are this project's, built on the tokens the rest of the pages
already use.
========================================================================= */
/* --- Article head --------------------------------------------------------
1366 x 465 band from y 0, i.e. it runs *under* the fixed bar, so this page
gives back the padding style.css reserves for it and pads the band instead.
Three numbers drive the band, all measured from the screen:
--head-top 0 → 175 chip top
--head-meta 175 → 387 chip, date, headline, breadcrumb
--head-bottom 387 → 465 breadcrumb to the band's edge
The visual is 520 x 371 from y 175, so it runs 81px past the band on
purpose. It is left in the flow and the band is painted as a fixed-height
background instead, which keeps the overhang without any absolute
positioning: the head's own height is 175 + the image. */
:where(.tpl-single, .tpl-single-pick-up-news) .site-header ~ main { padding-top: 0; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head {
--head-top: 175px;
--head-meta: 212px;
--head-bottom: 78px;
padding-top: var(--head-top);
background: linear-gradient(var(--c-band), var(--c-band)) no-repeat top /
100% calc(var(--head-top) + var(--head-meta) + var(--head-bottom));
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__inner {
display: grid;
/* The news grid: two 520 columns 30 apart. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-lg);
align-items: start;
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Holds the breadcrumb on its drawn line even though the copy above it is
shorter than the column; a headline that wraps pushes it down. */
min-height: var(--head-meta);
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__date {
margin-top: 29px;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__title {
margin-top: 5px;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head .breadcrumb { margin-top: auto; }
/* single-pick-up-news.php: same chip row as the archive cards. */
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__shops {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 520 x 371 with a 2px gold border and a 0 5 10 drop in the source file. The
frame is already burnt into news-1.jpg, so only the drop is drawn here —
the same call as the news cards (see images/README.md). */
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__visual .ph { aspect-ratio: 520 / 371; }
/* --- Article body --------------------------------------------------------
800 centred, per the box at x 283 — and that box is all the screen says
about the body. The supplied hs.jpg was the whole thing as artwork (800 x
6400, copy included); in WordPress that artwork is an image block in the
post, so the column below holds real content. */
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body {
width: min(800px, 100% - 48px);
/* The visual ends at 546 and the box starts at 646. */
margin: 100px auto 0;
}
/* The body is the block editor's content (single.php), dynamic since
2026-09-17. Nothing about its type is drawn, so these are this project's
defaults on the shared tokens: 16px / 2, 10% tracking like the rest of the
Japanese copy. The global reset zeroes p/h margins; the flow spacing comes
back here. Images keep the size set in the editor, capped at the column —
except on gravure posts (tag "グラビア"), where every image block fills the
800 column at full size whatever the editor set (rain_single_image_block()
in functions.php strips the editor's width and size). The same type is
used for fixed pages that fall back to index.php. */
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body {
font-size: 16px;
font-weight: 500;
line-height: 2;
letter-spacing: var(--ls-wide);
overflow-wrap: anywhere;
}
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body > * + * { margin-top: 1.5em; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body > :is(h2, h3, h4) { margin-top: 2.5em; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body h2 { font-size: 24px; font-weight: 700; line-height: 1.5; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body h3 { font-size: 20px; font-weight: 700; line-height: 1.5; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body h4 { font-size: 18px; font-weight: 700; line-height: 1.5; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body ul { list-style: disc; padding-left: 1.5em; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body ol { list-style: decimal; padding-left: 1.5em; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body a { text-decoration: underline; text-underline-offset: .2em; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body img { height: auto; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body--gravure .wp-block-image img { width: 100%; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body--gravure .wp-block-image { margin-inline: 0; }
:where(.tpl-single, .tpl-single-pick-up-news, .tpl-index) .entry-body figcaption { margin-top: .5em; font-size: 13px; line-height: 1.6; }
/* --- Back to top --------------------------------------------------------- */
:where(.tpl-single, .tpl-single-pick-up-news) .back { margin-top: 146px; }
/* Nothing below the button on this screen either — the space under it is the
TOP footer's own 225px lead-in (.footer in style.css). */
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the rest of the project. The head keeps its
two columns down to 620; below that it stacks and the band, having nothing
left to overhang, simply fills the block. */
@media (max-width: 1100px) {
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head { --head-top: 140px; --head-meta: 196px; --head-bottom: 60px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body { margin-top: 80px; }
:where(.tpl-single, .tpl-single-pick-up-news) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__title { font-size: 22px; }
}
@media (max-width: 620px) {
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head {
--head-top: 104px;
padding-bottom: 40px;
/* Stacked: the visual no longer runs past the band, so it covers the
whole block. */
background: var(--c-band);
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__inner {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__meta { min-height: 0; }
/* On one column the trail reads better above the article than buried
between the headline and the picture. */
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head .breadcrumb { order: -1; margin: 0 0 28px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__date { margin-top: 18px; font-size: 15px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-head__title { margin-top: 8px; font-size: 20px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body { margin-top: 48px; font-size: 15px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body h2 { font-size: 20px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body h3 { font-size: 18px; }
:where(.tpl-single, .tpl-single-pick-up-news) .entry-body h4 { font-size: 16px; }
:where(.tpl-single, .tpl-single-pick-up-news) .back { margin-top: 80px; }
}
/* #endregion */
/* #region 3. RANKING（page-ranking.php / body.tpl-page-ranking） ========================= */
/* ===========================================================================
RAIN GROUP — RANKING
Built from the Zeplin screen "ranking" (1366 wide, content ends at y 4088).
Three blocks, all assembled from components the other sheets already own:
the page head and the breadcrumb (style.css), the TOP page's GROUP RANKING
and SHOP RANKING sections, and — new on this screen — a six-shop logo tab
bar with one labelled ranking band per list.
========================================================================= */
/* --- Page head ----------------------------------------------------------- */
:where(.tpl-page-ranking) .breadcrumb { margin-top: 100px; }
/* --- Section rhythm -------------------------------------------------------
The TOP page gives every heading a 99px lead-out and the tab bar another
99; this screen halves both to 49/50 throughout. Scoped to .section so the
centred .page-head keeps its own spacing.
The head is set at 51 rather than the drawn 50 because the Japanese line's
box starts 1.3px above its ink — the same line-box slack archive.css takes
out of its 49px row gap. */
:where(.tpl-page-ranking) .section .section__head { margin-bottom: 51px; }
:where(.tpl-page-ranking) .section .tabs { margin-bottom: 49px; }
:where(.tpl-page-ranking) .section .tabs--shop { margin-bottom: 50px; }
/* The first section follows the breadcrumb, not another section, so it skips
the 150px section gap: 434 (heading) − 389 (breadcrumb box) = 45. */
:where(.tpl-page-ranking) .section--first { padding-top: 45px; }
/* --- Shop tab bar ---------------------------------------------------------
Six 178 x 80 cells, the shop's logo centred in each. Static like the tab
bars above it: the selected shop carries the white logo, the rest the dark
one (images/logo/*_logo_{wh,br}.png).
Those files are 300 x 300 with the mark centred and a different amount of
air around each, so the width that puts the *mark* at its drawn size is
set per tab as --logo-w = 300 x drawn width / inked width. That canvas is
taller than the 80px cell once scaled, so the logo is taken out of the
flow and centred — the air around the mark must not set the bar's height.
*/
/* Always six cells wide, so a month with fewer shops entered keeps the
design's cell width and the tabs sit from the left. */
:where(.tpl-page-ranking) .tabs--shop { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Both logos are printed; the active tab shows the white one. */
:where(.tpl-page-ranking) .tabs--shop .tab.is-active .tab__logo--off,
:where(.tpl-page-ranking) .tabs--shop .tab:not(.is-active) .tab__logo--on { display: none; }
:where(.tpl-page-ranking) .tabs--shop .tab { overflow: hidden; }
:where(.tpl-page-ranking) .tab__logo {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: var(--logo-w);
max-width: 100%;
height: auto;
}
/* The bar is closed off on the right — this one is drawn with a rule at its
outer edge, unlike the four-up bars. */
:where(.tpl-page-ranking) .tabs--shop .tab:last-child::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background: var(--grad-gold);
}
/* --- Ranking band ---------------------------------------------------------
.band-title (style.css) over the grid it names. 100 between two bands, 29
from a band to its own grid. The drawn inset is 21px against the shared
component's 20 — 1px, smoothed the same way the sheet smooths the rest. */
:where(.tpl-page-ranking) .rank-block + .rank-block { margin-top: 100px; }
:where(.tpl-page-ranking) .rank-block .rank-grid { margin-top: 29px; }
/* --- Back to top --------------------------------------------------------- */
:where(.tpl-page-ranking) .back { margin-top: 146px; }
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the other sheets. The grids, the tab bar's
2x2 fallback and the shop cards' phone layout all come from style.css; what
changes here is this page's own vertical spacing and the logo bar, which
goes 3x2 at the same width the text tabs go 2x2. */
@media (max-width: 1100px) {
:where(.tpl-page-ranking) .breadcrumb { margin-top: 72px; }
:where(.tpl-page-ranking) .section .section__head { margin-bottom: 40px; }
:where(.tpl-page-ranking) .section .tabs,
:where(.tpl-page-ranking) .section .tabs--shop { margin-bottom: 40px; }
:where(.tpl-page-ranking) .rank-block + .rank-block { margin-top: 72px; }
:where(.tpl-page-ranking) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
/* style.css re-cuts the text tabs as a 2 x 2 block whose 1px gap over a gold
backdrop draws the rules; the logo bar takes the same treatment at 3 x 2,
which also retires the right-hand rule above. */
:where(.tpl-page-ranking) .tabs--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.tpl-page-ranking) .tabs--shop .tab { min-height: 80px; }
:where(.tpl-page-ranking) .tabs--shop .tab:last-child::after { content: none; }
}
@media (max-width: 620px) {
:where(.tpl-page-ranking) .breadcrumb { margin-top: 48px; }
:where(.tpl-page-ranking) .section--first { padding-top: 32px; }
:where(.tpl-page-ranking) .section .section__head { margin-bottom: 32px; }
:where(.tpl-page-ranking) .section .tabs,
:where(.tpl-page-ranking) .section .tabs--shop { margin-bottom: 32px; }
:where(.tpl-page-ranking) .tabs--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.tpl-page-ranking) .tabs--shop .tab { min-height: 64px; }
:where(.tpl-page-ranking) .tab__logo { width: min(var(--logo-w), 62%); }
:where(.tpl-page-ranking) .rank-block .rank-grid { margin-top: 20px; }
:where(.tpl-page-ranking) .rank-block + .rank-block { margin-top: 56px; }
:where(.tpl-page-ranking) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-page-ranking) .shop-card { transition: opacity .25s ease; }
:where(.tpl-page-ranking) .shop-card:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. SHOP LINEUP（archive-shop.php / body.tpl-archive-shop） ======================= */
/* ===========================================================================
RAIN GROUP — SHOP LINEUP
Built from the Zeplin screen "shop" (1366 wide, content ends at y 2385).
Six rows, each a 500 x 300 photo beside a 575 x 300 white panel. The page
head, the breadcrumb and the back link are shared components (style.css);
what lives here is the row, the panel's typography and the social buttons.
========================================================================= */
:root {
/* Social button. #b98c33 is a flat gold, not the leaf gradient. */
--c-sns: #b98c33;
}
/* --- Page head ------------------------------------------------------------
Identical to archive.html: 99 above the title, 100 down to the breadcrumb,
46 from there to the first row (the 61px drawn gap less the 15px the
breadcrumb's line box adds under its ink). */
:where(.tpl-archive-shop) .breadcrumb { margin-top: 100px; }
/* --- Shop list ------------------------------------------------------------
The drawn row is 500 + 575 = 1075 wide with the panel's 2px border tucked
under the photo's, i.e. 1073 across. Split as fr so the pair always meets
flush and the pitch stays 330 (300 + 30). */
:where(.tpl-archive-shop) .shop-list {
margin-top: 46px;
display: grid;
gap: var(--gap-lg);
/* For the row's minimum height below (100cqi = the list's width). */
container-type: inline-size;
}
/* The row is at least the drawn 300 (the photo's 500:300) and otherwise the
panel's height: a long address that wraps (GRAN-SAPPORO-) makes the panel
taller, and the photo (no aspect-ratio here, so it stretches to the row
and stays in its column) follows it instead of leaving a step under it.
The stacked layout below 1100 gives it back its 500:300.
object-fit: cover in .ph keeps the crop centred;
the crop cuts the frame baked into the photo's sides, so the photo box also
draws .frame, which sits on exactly the baked frame's pixels when nothing
is cropped. */
:where(.tpl-archive-shop) .shop-item {
display: grid;
grid-template-columns: minmax(0, 500fr) minmax(0, 573fr);
grid-template-rows: minmax(calc(100cqi * 500 / 1073 * 300 / 500), auto);
}
/* The card link: an empty anchor over the whole row (photo + panel), above
the .frame borders (z-index 3). The SNS buttons are lifted over it so they
stay their own links. */
:where(.tpl-archive-shop) .shop-item { position: relative; }
:where(.tpl-archive-shop) .shop-item__link {
position: absolute;
inset: 0;
z-index: 4;
}
:where(.tpl-archive-shop) .shop-item__link:focus-visible {
outline: 2px solid var(--c-sns);
outline-offset: 4px;
}
/* White panel, 2px gold-cream frame inside the edge + the card shadow. The
photo boxes carry their frame in the artwork (the supplied files are exactly
500 x 300, so nothing is ever cropped off), so only this one draws one — and
.frame's defaults (2px, --grad-gold-cream) are already what the screen asks
for. Both boxes take the shadow. */
:where(.tpl-archive-shop) .shop-item__detail {
/* 40 to the shop name's ink, 30 in from the panel's edges, 33 under the
social row. */
padding: 40px 30px 33px;
background: var(--c-white);
}
:where(.tpl-archive-shop) .shop-item__name {
font-family: var(--font-display);
font-size: 35px;
font-weight: 400;
/* Same leading trim as .section__en: the line box becomes the cap height so
the 40px above is measured to the ink, not to the box. */
line-height: 1;
margin-block: -.15em -.2667em;
letter-spacing: var(--ls-display);
}
/* --- Address block --------------------------------------------------------
Drawn as one text layer padded out with ideographic spaces
（住所 … / 営業時間 … / 定休日 …）, i.e. a two-column
table 7 characters wide. Set as a so the label and the value stay
separate strings; --label-w is those 7 characters including their tracking.
Line pitch is the drawn 40px. */
:where(.tpl-archive-shop) .shop-info {
--label-w: 7.7em;
/* Addresses are ACF input now and can be any length, so they stay inside
the panel's 30px gutter and wrap (the static build borrowed 28px of the
gutter to keep the six drawn addresses on one line — a wrapped one then
ran into the frame). */
margin: 19px 0 0;
display: grid;
grid-template-columns: var(--label-w) minmax(0, 1fr);
font-size: 16px;
font-weight: 500;
line-height: 40px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-archive-shop) .shop-info dt,
:where(.tpl-archive-shop) .shop-info dd { margin: 0; }
/* Addresses mix CJK with latin runs ("TM-26ビル"); break inside one rather
than let it hang out of the panel. */
:where(.tpl-archive-shop) .shop-info dd { overflow-wrap: anywhere; }
/* --- Social buttons -------------------------------------------------------
Four Ø50 gold discs, 20 apart, the mark centred in white. The marks are
redrawn as SVG (see the block in the markup) because Zeplin has
them flattened. */
:where(.tpl-archive-shop) .sns {
margin-top: 18px;
display: flex;
gap: 20px;
}
:where(.tpl-archive-shop) .sns__link {
position: relative;
z-index: 5;
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--c-sns);
color: var(--c-white);
}
:where(.tpl-archive-shop) .sns__icon { display: block; }
/* --- Back to top --------------------------------------------------------- */
:where(.tpl-archive-shop) .back { margin-top: 146px; }
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the other sheets. The pair splits at 1100:
below that the panel is too narrow for the address to stay on one line, and
a wrapped address would drag the photo's height up with it. */
@media (max-width: 1100px) {
:where(.tpl-archive-shop) .breadcrumb { margin-top: 72px; }
/* Between SP and PC the cards go two up, each one stacked (photo over
panel). The panels stretch so both cards in a row end level. */
:where(.tpl-archive-shop) .shop-list {
margin-top: 36px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px 30px;
}
:where(.tpl-archive-shop) .shop-item {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
:where(.tpl-archive-shop) .shop-item__photo { aspect-ratio: 500 / 300; }
:where(.tpl-archive-shop) .shop-item__detail { padding: 32px 30px 30px; }
/* Half-width cards: the name shrinks with the card so the widest one
(ROMEO&JULIET, ~10 x the font size across) stays inside the panel.
100cqi is the list's width (.shop-list is the size container). */
:where(.tpl-archive-shop) .shop-item__name {
font-size: clamp(20px, calc(((100cqi - 30px) / 2 - 60px) / 10.5), 35px);
}
:where(.tpl-archive-shop) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
/* The label column goes above the value: in a half-width card (and at
375px) seven characters of label leave too little for an address. */
:where(.tpl-archive-shop) .shop-info {
display: block;
font-size: 14px;
line-height: 1.7;
}
:where(.tpl-archive-shop) .shop-info dt {
margin-top: 12px;
font-size: 12px;
color: rgba(17, 17, 17, .6);
}
:where(.tpl-archive-shop) .shop-info dt:first-of-type { margin-top: 0; }
}
@media (max-width: 620px) {
:where(.tpl-archive-shop) .breadcrumb { margin-top: 48px; }
:where(.tpl-archive-shop) .shop-list {
margin-top: 32px;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
:where(.tpl-archive-shop) .shop-item__detail { padding: 24px 20px 24px; }
:where(.tpl-archive-shop) .shop-item__name { font-size: clamp(22px, 6.4vw, 35px); }
:where(.tpl-archive-shop) .sns { margin-top: 20px; gap: clamp(10px, 4vw, 20px); }
:where(.tpl-archive-shop) .sns__link { width: 44px; height: 44px; }
:where(.tpl-archive-shop) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-archive-shop) .sns__link { transition: opacity .25s ease; }
:where(.tpl-archive-shop) .sns__link:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. SHOP（店舗ページ）（single-shop.php / body.tpl-single-shop） ======================= */
/* ===========================================================================
RAIN GROUP — SHOP（店舗ページ）
Built from the Zeplin screen "shop_" (1366 wide, content ends at y 4530).
Three sections on the shared .section / .section__head rhythm, then the
system blocks. The ranking grid, the card, the rank ribbon, the tab bar,
the band label, the breadcrumb and the back link are all shared components
(tokens.css + style.css); this sheet is the hero, the staff variant of the
card, the two-column shop info and the system copy.
========================================================================= */
/* --- Hero ----------------------------------------------------------------
1366 x 465 full bleed: the shop photo, dark, over black, running under the
fixed bar, so the page gives back the padding style.css reserves for it.
The photo is the shop's ACF「ヘッダー画像」(1070 x 250, the same file as the
TOP shop-ranking banner). It already carries the dark veil and a 2px gold
frame in the artwork, so no opacity here. Cover scales it ~1.86x (the frame
becomes ~3.7px on the top and bottom edges), so the image is scaled 3% past
the box to push the frame out of view — the band is a full-bleed photo, not
a card.
Without a header image the page falls back to the 500 x 300 featured image,
which is not darkened: that one gets the design's 50% over black. */
:where(.tpl-single-shop) .site-header ~ main { padding-top: 0; }
:where(.tpl-single-shop) .shop-hero {
position: relative;
display: grid;
place-items: center;
/* The name sits in the band's middle, clear of the fixed bar over it. */
padding-top: var(--header-h);
height: clamp(200px, 34.04vw, 465px);
background: #000;
}
:where(.tpl-single-shop) .shop-hero .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
:where(.tpl-single-shop) .shop-hero .ph > img { scale: 1.03; }
:where(.tpl-single-shop) .shop-hero__photo--dim > img { opacity: .5; }
/* The shop's own name over the photo: the display face in white (the shops
set their names in mixed case — Re:STAR — so it is not upper-cased), with
a soft shadow for the brighter photos. */
:where(.tpl-single-shop) .shop-hero__title {
position: relative;
z-index: 1;
padding-inline: 24px;
font-family: var(--font-display);
font-size: clamp(24px, 5.6vw, 64px);
font-weight: 400;
line-height: 1.15;
letter-spacing: var(--ls-display);
text-align: center;
text-wrap: balance;
color: var(--c-white);
text-shadow: 0 2px 20px rgba(0, 0, 0, .75);
}
/* --- Page rhythm ----------------------------------------------------------
This screen runs its sections 99 apart, not the TOP sheet's 150, and gives
each heading the same 51 lead-out as archive-ranking.html (the drawn 50,
plus the 1.3px the Japanese line's box starts above its ink). */
:where(.tpl-single-shop) .breadcrumb { margin-top: 64px; }
:where(.tpl-single-shop) .section { padding-top: 99px; }
:where(.tpl-single-shop) .section .section__head { margin-bottom: 51px; }
:where(.tpl-single-shop) .section .tabs { margin-bottom: 49px; }
/* The first section follows the breadcrumb, not another section. */
:where(.tpl-single-shop) .section--first { padding-top: 46px; }
/* --- Ranking tabs ---------------------------------------------------------
Two 536-wide cells instead of four. The inactive one is filled here — on
the other screens it is left on the page colour. */
:where(.tpl-single-shop) .tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Sales only (no nominations entered yet): one full-width tab. */
:where(.tpl-single-shop) .tabs--1 { grid-template-columns: minmax(0, 1fr); }
:where(.tpl-single-shop) .tabs--2 .tab:not(.is-active) { background: var(--c-band); }
/* --- Staff card -----------------------------------------------------------
.rank-card without the ribbon and without the shop line: the name sits 19
under the image and the card closes 20 below it (312 against the ranking
card's 323). */
:where(.tpl-single-shop) .staff-card { padding-bottom: 20px; }
:where(.tpl-single-shop) .staff-card .rank-card__name { margin-top: 19px; }
:where(.tpl-single-shop) .staff-card__link { display: block; color: inherit; text-decoration: none; }
:where(.tpl-single-shop) .staff-card:has(.staff-card__link:hover) { opacity: .85; }
/* --- Shop info ------------------------------------------------------------
550 photo + 49 + the text column, the text centred against the photo. The
photo carries its frame in the artwork, so only the shadow is added. */
:where(.tpl-single-shop) .info {
display: grid;
grid-template-columns: minmax(0, 550fr) minmax(0, 471fr);
gap: 49px;
align-items: center;
}
:where(.tpl-single-shop) .info__photo { aspect-ratio: 550 / 300; }
:where(.tpl-single-shop) .info__name {
font-family: var(--font-display);
font-size: 40px;
font-weight: 400;
/* Same leading trim as .section__en — the box top becomes the ink top. */
line-height: 1;
margin-block: -.15em -.2667em;
letter-spacing: var(--ls-display);
}
:where(.tpl-single-shop) .info__meta {
margin-top: 28px;
/* The screen centres the block on its *ink* (77 above the name, 68 under the
last line); CSS would centre the box, which is 6px taller because of the
last line's half-leading. Trimming it puts the ink where it is drawn. */
margin-bottom: -6px;
font-size: 16px;
font-weight: 500;
line-height: 35px;
letter-spacing: var(--ls-wide);
white-space: pre-line;
}
:where(.tpl-single-shop) .info__meta a { text-decoration: underline; text-underline-offset: .2em; }
/* --- Shop system ----------------------------------------------------------
A 25px bold lead, a note, then three .band-title bars each over its own
copy. The copy is set as one per drawn paragraph: the blank line
between two groups is the 30px line box the next
's margin restores. */
:where(.tpl-single-shop) .shop-system { margin-top: 52px; }
:where(.tpl-single-shop) .shop-system__title {
font-size: 25px;
font-weight: 700;
line-height: 35px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single-shop) .shop-system__note,
:where(.tpl-single-shop) .shop-system__text {
font-size: 16px;
font-weight: 500;
line-height: 30px;
letter-spacing: var(--ls-wide);
/* The screen sets each block as one text layer with hard breaks. */
white-space: pre-line;
}
/* The drawn gaps are measured ink-to-ink: 50 from a body's last line down to
the next bar, 30 from a bar down to the first line under it. The margins
below are those minus the ~7px of half-leading the 30px line box adds
above and below the ink. */
:where(.tpl-single-shop) .shop-system__note { margin-top: 16px; }
:where(.tpl-single-shop) .shop-system .band-title { margin-top: 43px; }
:where(.tpl-single-shop) .shop-system__text { margin-top: 23px; }
/* Two paragraphs in the same block are one blank line apart. */
:where(.tpl-single-shop) .shop-system__text + .shop-system__text { margin-top: 30px; }
:where(.tpl-single-shop) .shop-map {
margin-top: 42px;
aspect-ratio: 1070 / 300;
background: #000;
}
:where(.tpl-single-shop) .shop-map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* --- Back to top --------------------------------------------------------- */
:where(.tpl-single-shop) .back { margin-top: 146px; }
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the other sheets. The ranking grid, the
card and the 2x2 tab fallback all come from style.css. */
@media (max-width: 1100px) {
:where(.tpl-single-shop) .breadcrumb { margin-top: 48px; }
:where(.tpl-single-shop) .section { padding-top: 72px; }
:where(.tpl-single-shop) .section--first { padding-top: 36px; }
:where(.tpl-single-shop) .section .section__head { margin-bottom: 40px; }
:where(.tpl-single-shop) .section .tabs { margin-bottom: 40px; }
:where(.tpl-single-shop) .info { gap: 32px; }
:where(.tpl-single-shop) .shop-system { margin-top: 40px; }
:where(.tpl-single-shop) .shop-system .band-title { margin-top: 36px; }
:where(.tpl-single-shop) .shop-map { margin-top: 32px; }
:where(.tpl-single-shop) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
/* style.css turns .tabs into a 2 x 2 block here; with two tabs that is one
row of two, so only the fill has to follow. */
:where(.tpl-single-shop) .tabs--2 .tab:not(.is-active) { background: var(--c-paper); }
:where(.tpl-single-shop) .tabs--1 { grid-template-columns: minmax(0, 1fr); }
/* The text column no longer has room beside a 550 photo. */
:where(.tpl-single-shop) .info { grid-template-columns: minmax(0, 1fr); gap: 24px; }
:where(.tpl-single-shop) .info__photo { aspect-ratio: 550 / 300; }
}
@media (max-width: 620px) {
:where(.tpl-single-shop) .breadcrumb { margin-top: 32px; }
:where(.tpl-single-shop) .section { padding-top: 56px; }
:where(.tpl-single-shop) .section--first { padding-top: 28px; }
:where(.tpl-single-shop) .section .section__head { margin-bottom: 32px; }
:where(.tpl-single-shop) .section .tabs { margin-bottom: 32px; }
:where(.tpl-single-shop) .staff-card { padding-bottom: 16px; }
:where(.tpl-single-shop) .staff-card .rank-card__name { margin-top: 14px; }
:where(.tpl-single-shop) .info__name { font-size: clamp(24px, 7vw, 40px); }
:where(.tpl-single-shop) .info__meta { margin-top: 16px; font-size: 14px; line-height: 28px; }
:where(.tpl-single-shop) .shop-system__title { font-size: 20px; line-height: 1.6; }
:where(.tpl-single-shop) .shop-system__note,
:where(.tpl-single-shop) .shop-system__text { font-size: 14px; line-height: 26px; }
:where(.tpl-single-shop) .shop-system__text + .shop-system__text { margin-top: 26px; }
:where(.tpl-single-shop) .shop-map { aspect-ratio: 4 / 3; }
:where(.tpl-single-shop) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-single-shop) .staff-card { transition: opacity .25s ease; }
.rank-card:has(> a.rank-card__link) { transition: opacity .25s ease; }
}
/* #endregion */
/* #region 3. CAST（キャスト詳細）（single-cast.php / body.tpl-single-cast） ======================= */
/* ===========================================================================
RAIN GROUP — CAST（キャスト詳細）
Zeplin has no screen for this page. The content follows the current site
(three photos, the name, SNS, PROFILE) and the shape follows single.php:
the same 465px band under the bar, with the photo column starting at the
article visual's y 175 and running past the band's bottom edge.
The chip, the breadcrumb, the band label and the back link are the shared
components; this sheet is the head, the photo carousel and the two blocks.
========================================================================= */
:where(.tpl-single-cast) main {
--head-top: 175px;
--head-meta: 212px;
--head-bottom: 78px;
}
:where(.tpl-single-cast) .site-header ~ main { padding-top: 0; }
/* --- Head ----------------------------------------------------------------
Only the left column lives in the band; the right one is left empty for
the photos, which .cast-body pulls up into it. */
:where(.tpl-single-cast) .cast-head {
padding-block: var(--head-top) var(--head-bottom);
background: var(--c-band);
}
:where(.tpl-single-cast) .cast-head__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: var(--head-meta);
}
:where(.tpl-single-cast) .cast-head__inner > * { max-width: calc((100% - var(--gap-lg)) / 2); }
:where(.tpl-single-cast) .cast-head__name {
margin-top: 26px;
font-size: 40px;
font-weight: 700;
line-height: 1.3;
letter-spacing: var(--ls-wide);
}
/* The romanised name in the heading face, gold like .section__en. */
:where(.tpl-single-cast) .cast-head__en {
margin-top: 12px;
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-display);
text-transform: uppercase;
color: #b48132;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
:where(.tpl-single-cast) .cast-head__en {
background: var(--grad-gold-v);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
:where(.tpl-single-cast) .cast-head .breadcrumb { margin-top: auto; padding-top: 24px; }
/* --- Body ----------------------------------------------------------------
Two 520 columns 30 apart, as the article head. The photos take the right
one and rise into the band by its meta + bottom rows, so their top meets
the chip's line. */
:where(.tpl-single-cast) .cast-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-lg);
align-items: start;
}
:where(.tpl-single-cast) .cast-photos {
grid-column: 2;
grid-row: 1;
margin-top: calc(-1 * (var(--head-meta) + var(--head-bottom)));
}
:where(.tpl-single-cast) .cast-detail {
grid-column: 1;
grid-row: 1;
padding-top: 60px;
}
/* --- Photos --------------------------------------------------------------
466 x 700 each. The files carry no frame (unlike the card artwork), so the
2px gold frame is drawn here. One scroll-snap strip: swipe or scroll works
without script, the arrows are wired in rain_footer_scripts(). */
:where(.tpl-single-cast) .cast-photos__frame {
aspect-ratio: 466 / 700;
background: var(--c-ink);
}
:where(.tpl-single-cast) .cast-photos__track {
display: flex;
height: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
:where(.tpl-single-cast) .cast-photos__track::-webkit-scrollbar { display: none; }
:where(.tpl-single-cast) .cast-photos__slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
:where(.tpl-single-cast) .cast-photos__slide .ph { width: 100%; height: 100%; }
/* No photo and no featured image: rain_noimage() fills the frame. */
:where(.tpl-single-cast) .cast-photos__noimage { height: 100%; }
/* Mouse drag (rain_footer_scripts() adds these). Snapping is off while
dragging so the strip follows the pointer 1:1. */
:where(.tpl-single-cast) .cast-photos__track.is-draggable { cursor: grab; }
:where(.tpl-single-cast) .cast-photos__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
/* Same arrows and count as the TOP shop lineup pager. */
:where(.tpl-single-cast) .cast-photos__pager {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: 20px;
}
:where(.tpl-single-cast) .cast-photos__arrow {
display: grid;
place-items: center;
width: 32px;
height: 32px;
}
:where(.tpl-single-cast) .cast-photos__arrow--next svg { rotate: 180deg; }
:where(.tpl-single-cast) .cast-photos__count {
min-width: 60px;
font-family: var(--font-display);
font-size: 16px;
line-height: 1;
text-align: center;
}
:where(.tpl-single-cast) .cast-photos__count .sep { font-size: 20px; }
/* --- SNS / PROFILE -------------------------------------------------------
The shop page's band label over each block, 30 down to its body and 50
from a body to the next label. The buttons are archive-shop.php's Ø50
gold discs; the profile is its label / value
. */
:where(.tpl-single-cast) .cast-detail .band-title + * { margin-top: 30px; }
:where(.tpl-single-cast) .cast-detail * + .band-title { margin-top: 50px; }
:where(.tpl-single-cast) .cast-sns {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-inline: 20px;
}
:where(.tpl-single-cast) .cast-sns__link {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--c-sns);
color: var(--c-white);
}
:where(.tpl-single-cast) .cast-sns__icon { display: block; }
:where(.tpl-single-cast) .cast-profile {
display: grid;
grid-template-columns: 6em minmax(0, 1fr);
margin: 0;
padding-inline: 20px;
font-size: 16px;
font-weight: 500;
line-height: 40px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single-cast) .cast-profile dt,
:where(.tpl-single-cast) .cast-profile dd { margin: 0; }
:where(.tpl-single-cast) .cast-profile dd { overflow-wrap: anywhere; }
/* --- Back ---------------------------------------------------------------- */
:where(.tpl-single-cast) .back { margin-top: 146px; }
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the other sheets. Two columns hold down to
620; below that the head, the photos and the blocks stack, with the
breadcrumb moved to the top as on single.php. */
@media (max-width: 1100px) {
:where(.tpl-single-cast) main { --head-top: 140px; --head-meta: 196px; --head-bottom: 60px; }
:where(.tpl-single-cast) .cast-head__name { font-size: 34px; }
:where(.tpl-single-cast) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
:where(.tpl-single-cast) .cast-head__name { font-size: 28px; }
:where(.tpl-single-cast) .cast-detail { padding-top: 40px; }
:where(.tpl-single-cast) .cast-sns { gap: 14px; padding-inline: 16px; }
:where(.tpl-single-cast) .cast-sns__link { width: 44px; height: 44px; }
:where(.tpl-single-cast) .cast-profile { padding-inline: 16px; font-size: 15px; line-height: 34px; }
}
@media (max-width: 620px) {
:where(.tpl-single-cast) main { --head-top: 104px; }
:where(.tpl-single-cast) .cast-head { padding-bottom: 40px; }
:where(.tpl-single-cast) .cast-head__inner { min-height: 0; }
:where(.tpl-single-cast) .cast-head__inner > * { max-width: none; }
:where(.tpl-single-cast) .cast-head .breadcrumb { order: -1; margin: 0 0 28px; padding-top: 0; }
:where(.tpl-single-cast) .cast-head__name { margin-top: 18px; font-size: 26px; }
:where(.tpl-single-cast) .cast-head__en { margin-top: 10px; font-size: 16px; }
:where(.tpl-single-cast) .cast-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
:where(.tpl-single-cast) .cast-photos { grid-column: 1; margin-top: 32px; }
:where(.tpl-single-cast) .cast-detail { grid-column: 1; grid-row: 2; padding-top: 48px; }
:where(.tpl-single-cast) .cast-detail * + .band-title { margin-top: 40px; }
:where(.tpl-single-cast) .cast-detail .band-title + * { margin-top: 24px; }
:where(.tpl-single-cast) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-single-cast) .cast-photos__track { scroll-behavior: smooth; }
:where(.tpl-single-cast) .cast-sns__link { transition: opacity .25s ease; }
:where(.tpl-single-cast) .cast-sns__link:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. SPECIAL FEATURE（特集）（single-special-feature.php / body.tpl-single-special-feature） ======================= */
/* ===========================================================================
No Zeplin screen. The content is the current site's /adtrack/ and
/godzilla/ pages, set in the local sub page frame: .page-head, breadcrumb,
the page's blocks, then .back. The feature (parent) page lists its
entries; an entry page shows the visual and its members
(template/special-feature.php, shared by every feature).
One spacing and type system for both pages, taken from the PICK UP NEWS
archive and the shared scale — no values of their own:
--sf-flow breadcrumb → first block, and block → block (46, as the
news list's row gap; 32 on phones)
--sf-pad inside the lead panel and the entry cards (40 / 20)
--sf-gap inside a panel, heading → content (30 = --gap-lg / 16)
type display face at --fs-display-s (40) / -xs (25) only;
Japanese copy 16 / 500 / 35 (the shop info text) and the
14px UI size of the chip and breadcrumb.
========================================================================= */
:where(.tpl-single-special-feature) {
--sf-flow: 46px;
--sf-pad: 40px;
--sf-gap: var(--gap-lg);
}
:where(.tpl-single-special-feature) .breadcrumb { margin-top: 100px; }
:where(.tpl-single-special-feature) .back { margin-top: 146px; }
:where(.tpl-single-special-feature) :is(.feature-lead, .feature-list, .feature-entry, .feature-entry > * + *) { margin-top: var(--sf-flow); }
/* --- Lead (feature page) ---------------------------------------------------
The feature's body text on a --c-band panel inside a 1px gold hairline.
Its heading is the display face in gold leaf between two short gold rules
ending in the band mark (the ✦ of .band-title). Heading and paragraphs
are all --sf-gap apart. */
:where(.tpl-single-special-feature) .feature-lead {
container-type: inline-size;
padding: var(--sf-pad);
background: var(--c-band);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 35px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single-special-feature) .feature-lead > * + * { margin-top: var(--sf-gap); }
/* Japanese copy: no ー/っ/。 at a line start, and no one-character last line
after the editor's
breaks ("…必見で / す。" at 768). */
:where(.tpl-single-special-feature) .feature-lead p {
line-break: strict;
text-wrap: pretty;
}
:where(.tpl-single-special-feature) .feature-lead h2 {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-family: var(--font-display);
font-size: var(--fs-display-xs);
font-weight: 400;
line-height: 1.2;
letter-spacing: var(--ls-display);
text-wrap: balance;
color: #b48132;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
:where(.tpl-single-special-feature) .feature-lead h2 {
background: var(--grad-gold-v);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
:where(.tpl-single-special-feature) .feature-lead h2::before,
:where(.tpl-single-special-feature) .feature-lead h2::after {
content: "";
flex: none;
width: 60px;
height: 11px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b48132' d='M12 0c0 6.63 5.37 12 12 12-6.63 0-12 5.37-12 12 0-6.63-5.37-12-12-12C6.63 12 12 6.63 12 0z'/%3E%3C/svg%3E") right center / 11px 11px no-repeat,
var(--grad-gold-hairline) left center / calc(100% - 17px) 1px no-repeat;
}
:where(.tpl-single-special-feature) .feature-lead h2::after { scale: -1 1; }
/* A wrapped heading's box stays as wide as the panel, so the rules would sit
at the panel edges, far from the words. Drop them once the heading
(≈660px at 25px, the current site's longest) plus both rules (2 × 80)
no longer fits on one line. Measured on the panel, not the viewport. */
@container (max-width: 819px) {
:where(.tpl-single-special-feature) .feature-lead h2::before,
:where(.tpl-single-special-feature) .feature-lead h2::after { display: none; }
}
/* Likewise the editor's
lines (longest ≈ 680px at 16px): once they no
longer fit, the copy reflows as ordinary left-aligned paragraphs rather
than breaking each centred line a second time. */
@container (max-width: 699px) {
:where(.tpl-single-special-feature) .feature-lead p { text-align: left; }
:where(.tpl-single-special-feature) .feature-lead br { display: none; }
}
/* --- Entry list (feature page) ---------------------------------------------
One dark card per entry, with the 2px gold-cream frame of the shop cards.
The head reads "#5 [LATEST] ─── VIEW MORE ›" on one line, centred on the
number; the image keeps its own ratio (the truck artwork runs 2.3:1 to
3.9:1) and zooms a little on hover. */
:where(.tpl-single-special-feature) .feature-list {
display: grid;
gap: var(--sf-flow);
}
/* The year above a card (ACF feature_year, the GODZILLA signs): display
face in gold leaf with the gold hairline running on to the card's edge,
the rule of .feature-list__rule. */
:where(.tpl-single-special-feature) .feature-list__year {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-family: var(--font-display);
font-size: var(--fs-display-xs);
line-height: 1;
letter-spacing: var(--ls-display);
color: #b48132;
}
:where(.tpl-single-special-feature) .feature-list__year::after {
content: "";
flex: 1;
height: 1px;
background: var(--grad-gold-hairline);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
:where(.tpl-single-special-feature) .feature-list__year {
background: var(--grad-gold-v) left top / auto 1em no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
:where(.tpl-single-special-feature) .feature-list__link {
display: block;
padding: var(--sf-pad);
background: var(--c-ink);
color: var(--c-light);
text-decoration: none;
}
:where(.tpl-single-special-feature) .feature-list__head {
display: flex;
align-items: center;
gap: 20px;
}
:where(.tpl-single-special-feature) .feature-list__title {
flex: none;
font-family: var(--font-display);
font-size: var(--fs-display-s);
line-height: 1;
letter-spacing: var(--ls-display);
color: #cfbc79;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
:where(.tpl-single-special-feature) .feature-list__title {
background: var(--grad-gold-v);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
:where(.tpl-single-special-feature) .feature-list__latest {
flex: none;
color: var(--c-ink);
font-family: var(--font-display);
text-transform: uppercase;
}
:where(.tpl-single-special-feature) .feature-list__rule {
flex: 1;
height: 1px;
background: var(--grad-gold-hairline);
}
:where(.tpl-single-special-feature) .feature-list__more {
flex: none;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 14px;
line-height: 1;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
:where(.tpl-single-special-feature) .feature-list__more svg { rotate: 180deg; transition: translate .25s ease; }
:where(.tpl-single-special-feature) :is(.feature-list__image, .feature-list__noimage) { margin-top: var(--sf-gap); }
:where(.tpl-single-special-feature) .feature-list__image { overflow: hidden; }
:where(.tpl-single-special-feature) .feature-list__image img {
display: block;
width: 100%;
height: auto;
transition: scale .6s ease;
}
:where(.tpl-single-special-feature) .feature-list__link:hover .feature-list__image img { scale: 1.03; }
:where(.tpl-single-special-feature) .feature-list__link:hover .feature-list__more svg { translate: 4px 0; }
:where(.tpl-single-special-feature) .feature-list__noimage { aspect-ratio: 1273 / 563; }
/* Portrait artwork (the GODZILLA signs, 0.24–0.39 wide per unit of height)
would run past 4000px at full width, so it goes four to a row, each in a
1:3 box on the card's ink, shown whole. The narrow cards keep only
"#13 [LATEST]" of the head; the whole card is still the link. */
:where(.tpl-single-special-feature) .feature-list--portrait {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-lg);
}
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__link { padding: 20px; }
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__head { flex-wrap: wrap; gap: 8px 12px; }
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__title { font-size: var(--fs-display-xs); }
:where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__rule, .feature-list__more) { display: none; }
:where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__image, .feature-list__noimage) { margin-top: 20px; aspect-ratio: 1 / 3; }
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__image img { height: 100%; object-fit: contain; }
/* --- Entry visual ----------------------------------------------------------*/
:where(.tpl-single-special-feature) .feature-visual img { display: block; width: 100%; height: auto; }
/* Portrait artwork: the sign on the left at 380, the members beside it as
on the current site, held in view while the tall sign scrolls past. */
:where(.tpl-single-special-feature) .feature-entry--portrait {
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
gap: 60px;
align-items: start;
}
:where(.tpl-single-special-feature) .feature-entry--portrait > * + * { margin-top: 0; }
:where(.tpl-single-special-feature) .feature-entry--portrait .feature-members {
position: sticky;
top: calc(var(--header-h) + var(--sf-flow));
}
/* --- Members ---------------------------------------------------------------
Up to seven round portraits in a centred row that wraps. The current
site's portraits are square exports with the circle already cut, so the
circle here is the crop, with a 1px gold-cream ring painted the same way
as .chip (two backgrounds, because .frame's mask is square). */
:where(.tpl-single-special-feature) .feature-members {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sf-flow) var(--sf-gap);
list-style: none;
}
:where(.tpl-single-special-feature) .feature-member { width: 160px; text-align: center; }
:where(.tpl-single-special-feature) .feature-member__link { display: block; color: inherit; text-decoration: none; }
:where(.tpl-single-special-feature) a.feature-member__link:hover { opacity: .85; }
:where(.tpl-single-special-feature) .feature-member__photo {
position: relative;
aspect-ratio: 1;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid transparent;
border-radius: 50%;
background: linear-gradient(var(--c-band), var(--c-band)) padding-box,
var(--grad-gold-cream) border-box;
box-shadow: var(--shadow-card);
}
/* Pinned to the ring's inside edge: a grid item's height: 100% does not
resolve against the aspect-ratio height, so a portrait photo (the cast
thumbnails are 160 × 222) stayed tall and its own 50% radius became an
ellipse cutting across the circle. The circle is the parent's clip only. */
:where(.tpl-single-special-feature) .feature-member__photo img:not(.feature-member__noimage) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
:where(.tpl-single-special-feature) .feature-member__noimage { width: 40%; height: auto; opacity: .22; }
:where(.tpl-single-special-feature) .feature-member__num {
margin-top: 20px;
font-family: var(--font-display);
font-size: var(--fs-display-xs);
line-height: 1;
letter-spacing: var(--ls-display);
}
:where(.tpl-single-special-feature) .feature-member__name {
margin-top: 10px;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--ls-wide);
}
@media (max-width: 1100px) {
:where(.tpl-single-special-feature) .breadcrumb { margin-top: 72px; }
:where(.tpl-single-special-feature) .back { margin-top: 110px; }
:where(.tpl-single-special-feature) .feature-entry--portrait { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 620px) {
:where(.tpl-single-special-feature) {
--sf-flow: 32px;
--sf-pad: 20px;
--sf-gap: 16px;
}
:where(.tpl-single-special-feature) .breadcrumb { margin-top: 48px; }
:where(.tpl-single-special-feature) .back { margin-top: 80px; }
:where(.tpl-single-special-feature) .feature-lead { font-size: 14px; line-height: 28px; }
:where(.tpl-single-special-feature) .feature-lead h2 { font-size: 18px; }
:where(.tpl-single-special-feature) .feature-list__head { gap: 12px; }
:where(.tpl-single-special-feature) .feature-list__title { font-size: var(--fs-display-xs); }
:where(.tpl-single-special-feature) .feature-list__latest { height: 22px; padding-inline: 10px; font-size: 11px; }
:where(.tpl-single-special-feature) .feature-list__more { gap: 8px; font-size: 11px; }
:where(.tpl-single-special-feature) .feature-member { width: calc((100% - 2 * var(--sf-gap)) / 3); }
/* Two across on a phone, up to four on a small tablet. */
:where(.tpl-single-special-feature) .feature-list--portrait { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__link { padding: 12px; }
:where(.tpl-single-special-feature) .feature-list--portrait .feature-list__title { font-size: 18px; }
:where(.tpl-single-special-feature) .feature-list__year { gap: 8px; margin-bottom: 8px; font-size: 18px; }
:where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__image, .feature-list__noimage) { margin-top: 12px; }
/* Stacked: the sign centred at phone width, the members after it. */
:where(.tpl-single-special-feature) .feature-entry--portrait { display: block; }
:where(.tpl-single-special-feature) .feature-entry--portrait .feature-visual { width: min(100%, 280px); margin-inline: auto; }
:where(.tpl-single-special-feature) .feature-entry--portrait > * + * { margin-top: var(--sf-flow); }
:where(.tpl-single-special-feature) .feature-entry--portrait .feature-members { position: static; }
:where(.tpl-single-special-feature) .feature-member__num { margin-top: 12px; font-size: 18px; }
:where(.tpl-single-special-feature) .feature-member__name { margin-top: 6px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
:where(.tpl-single-special-feature) .feature-list__image img,
:where(.tpl-single-special-feature) .feature-list__more svg { transition: none; }
}
/* #endregion */
/* #region 3. 404 / 受け皿（404.php / body.tpl-404、index.php / body.tpl-index） ======================= */
/* ===========================================================================
No Zeplin screen. Both open like every sub page: .page-head, breadcrumb,
the page's own block, then .back — spacing borrowed from the PICK UP NEWS
archive (breadcrumb 100 / 72 / 48 under the head, back 146 / 110 / 80).
404.php … a short note and the four sections of the global nav.
index.php … the fallback for fixed pages without a template (there is no
page.php). Page titles are Japanese, so the head is a plain
heading rather than the Aviano display line; the body reuses
the article body type (.entry-body, SINGLE above).
========================================================================= */
:where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 100px; }
:where(.tpl-404, .tpl-index) .back { margin-top: 146px; }
:where(.tpl-404) .notfound {
margin-top: 46px;
text-align: center;
}
:where(.tpl-404) .notfound__lead {
font-size: 16px;
font-weight: 500;
line-height: 2;
letter-spacing: var(--ls-wide);
}
:where(.tpl-404) .notfound__links {
margin-top: 46px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 40px;
}
:where(.tpl-404) .notfound__links a {
font-family: var(--font-display);
font-size: 20px;
letter-spacing: var(--ls-display);
text-transform: uppercase;
color: #b48132; /* the flat gold .section__en falls back to */
text-decoration: underline;
text-underline-offset: .3em;
}
:where(.tpl-index) .page-head__title {
font-size: clamp(24px, 4vw, 40px);
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--ls-wide);
}
:where(.tpl-index) .entry-body {
width: min(800px, 100%);
margin: 46px auto 0;
}
:where(.tpl-index) .index-list {
width: min(800px, 100%);
margin: 46px auto 0;
font-size: 16px;
font-weight: 500;
line-height: 2;
letter-spacing: var(--ls-wide);
}
:where(.tpl-index) .index-list a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1100px) {
:where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 72px; }
:where(.tpl-404, .tpl-index) .back { margin-top: 110px; }
}
@media (max-width: 620px) {
:where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 48px; }
:where(.tpl-404, .tpl-index) .back { margin-top: 80px; }
:where(.tpl-404) .notfound { text-align: left; }
:where(.tpl-404) .notfound__lead { font-size: 14px; }
:where(.tpl-404) .notfound__links { justify-content: flex-start; gap: 12px 28px; }
:where(.tpl-404) .notfound__links a { font-size: 16px; }
}
/* #endregion */
per drawn paragraph: the blank line between two groups is the 30px line box the next
's margin restores. */ :where(.tpl-single-shop) .shop-system { margin-top: 52px; } :where(.tpl-single-shop) .shop-system__title { font-size: 25px; font-weight: 700; line-height: 35px; letter-spacing: var(--ls-wide); } :where(.tpl-single-shop) .shop-system__note, :where(.tpl-single-shop) .shop-system__text { font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: var(--ls-wide); /* The screen sets each block as one text layer with hard breaks. */ white-space: pre-line; } /* The drawn gaps are measured ink-to-ink: 50 from a body's last line down to the next bar, 30 from a bar down to the first line under it. The margins below are those minus the ~7px of half-leading the 30px line box adds above and below the ink. */ :where(.tpl-single-shop) .shop-system__note { margin-top: 16px; } :where(.tpl-single-shop) .shop-system .band-title { margin-top: 43px; } :where(.tpl-single-shop) .shop-system__text { margin-top: 23px; } /* Two paragraphs in the same block are one blank line apart. */ :where(.tpl-single-shop) .shop-system__text + .shop-system__text { margin-top: 30px; } :where(.tpl-single-shop) .shop-map { margin-top: 42px; aspect-ratio: 1070 / 300; background: #000; } :where(.tpl-single-shop) .shop-map iframe { display: block; width: 100%; height: 100%; border: 0; } /* --- Back to top --------------------------------------------------------- */ :where(.tpl-single-shop) .back { margin-top: 146px; } /* --- Responsive --------------------------------------------------------- Same 1100 / 820 / 620 breaks as the other sheets. The ranking grid, the card and the 2x2 tab fallback all come from style.css. */ @media (max-width: 1100px) { :where(.tpl-single-shop) .breadcrumb { margin-top: 48px; } :where(.tpl-single-shop) .section { padding-top: 72px; } :where(.tpl-single-shop) .section--first { padding-top: 36px; } :where(.tpl-single-shop) .section .section__head { margin-bottom: 40px; } :where(.tpl-single-shop) .section .tabs { margin-bottom: 40px; } :where(.tpl-single-shop) .info { gap: 32px; } :where(.tpl-single-shop) .shop-system { margin-top: 40px; } :where(.tpl-single-shop) .shop-system .band-title { margin-top: 36px; } :where(.tpl-single-shop) .shop-map { margin-top: 32px; } :where(.tpl-single-shop) .back { margin-top: 110px; } } @media (max-width: 820px) { /* style.css turns .tabs into a 2 x 2 block here; with two tabs that is one row of two, so only the fill has to follow. */ :where(.tpl-single-shop) .tabs--2 .tab:not(.is-active) { background: var(--c-paper); } :where(.tpl-single-shop) .tabs--1 { grid-template-columns: minmax(0, 1fr); } /* The text column no longer has room beside a 550 photo. */ :where(.tpl-single-shop) .info { grid-template-columns: minmax(0, 1fr); gap: 24px; } :where(.tpl-single-shop) .info__photo { aspect-ratio: 550 / 300; } } @media (max-width: 620px) { :where(.tpl-single-shop) .breadcrumb { margin-top: 32px; } :where(.tpl-single-shop) .section { padding-top: 56px; } :where(.tpl-single-shop) .section--first { padding-top: 28px; } :where(.tpl-single-shop) .section .section__head { margin-bottom: 32px; } :where(.tpl-single-shop) .section .tabs { margin-bottom: 32px; } :where(.tpl-single-shop) .staff-card { padding-bottom: 16px; } :where(.tpl-single-shop) .staff-card .rank-card__name { margin-top: 14px; } :where(.tpl-single-shop) .info__name { font-size: clamp(24px, 7vw, 40px); } :where(.tpl-single-shop) .info__meta { margin-top: 16px; font-size: 14px; line-height: 28px; } :where(.tpl-single-shop) .shop-system__title { font-size: 20px; line-height: 1.6; } :where(.tpl-single-shop) .shop-system__note, :where(.tpl-single-shop) .shop-system__text { font-size: 14px; line-height: 26px; } :where(.tpl-single-shop) .shop-system__text + .shop-system__text { margin-top: 26px; } :where(.tpl-single-shop) .shop-map { aspect-ratio: 4 / 3; } :where(.tpl-single-shop) .back { margin-top: 80px; } } @media (prefers-reduced-motion: no-preference) { :where(.tpl-single-shop) .staff-card { transition: opacity .25s ease; } .rank-card:has(> a.rank-card__link) { transition: opacity .25s ease; } } /* #endregion */ /* #region 3. CAST（キャスト詳細）（single-cast.php / body.tpl-single-cast） ======================= */ /* =========================================================================== RAIN GROUP — CAST（キャスト詳細） Zeplin has no screen for this page. The content follows the current site (three photos, the name, SNS, PROFILE) and the shape follows single.php: the same 465px band under the bar, with the photo column starting at the article visual's y 175 and running past the band's bottom edge. The chip, the breadcrumb, the band label and the back link are the shared components; this sheet is the head, the photo carousel and the two blocks. ========================================================================= */ :where(.tpl-single-cast) main { --head-top: 175px; --head-meta: 212px; --head-bottom: 78px; } :where(.tpl-single-cast) .site-header ~ main { padding-top: 0; } /* --- Head ---------------------------------------------------------------- Only the left column lives in the band; the right one is left empty for the photos, which .cast-body pulls up into it. */ :where(.tpl-single-cast) .cast-head { padding-block: var(--head-top) var(--head-bottom); background: var(--c-band); } :where(.tpl-single-cast) .cast-head__inner { display: flex; flex-direction: column; align-items: flex-start; min-height: var(--head-meta); } :where(.tpl-single-cast) .cast-head__inner > * { max-width: calc((100% - var(--gap-lg)) / 2); } :where(.tpl-single-cast) .cast-head__name { margin-top: 26px; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-wide); } /* The romanised name in the heading face, gold like .section__en. */ :where(.tpl-single-cast) .cast-head__en { margin-top: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase; color: #b48132; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { :where(.tpl-single-cast) .cast-head__en { background: var(--grad-gold-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } :where(.tpl-single-cast) .cast-head .breadcrumb { margin-top: auto; padding-top: 24px; } /* --- Body ---------------------------------------------------------------- Two 520 columns 30 apart, as the article head. The photos take the right one and rise into the band by its meta + bottom rows, so their top meets the chip's line. */ :where(.tpl-single-cast) .cast-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); align-items: start; } :where(.tpl-single-cast) .cast-photos { grid-column: 2; grid-row: 1; margin-top: calc(-1 * (var(--head-meta) + var(--head-bottom))); } :where(.tpl-single-cast) .cast-detail { grid-column: 1; grid-row: 1; padding-top: 60px; } /* --- Photos -------------------------------------------------------------- 466 x 700 each. The files carry no frame (unlike the card artwork), so the 2px gold frame is drawn here. One scroll-snap strip: swipe or scroll works without script, the arrows are wired in rain_footer_scripts(). */ :where(.tpl-single-cast) .cast-photos__frame { aspect-ratio: 466 / 700; background: var(--c-ink); } :where(.tpl-single-cast) .cast-photos__track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } :where(.tpl-single-cast) .cast-photos__track::-webkit-scrollbar { display: none; } :where(.tpl-single-cast) .cast-photos__slide { flex: 0 0 100%; scroll-snap-align: start; } :where(.tpl-single-cast) .cast-photos__slide .ph { width: 100%; height: 100%; } /* No photo and no featured image: rain_noimage() fills the frame. */ :where(.tpl-single-cast) .cast-photos__noimage { height: 100%; } /* Mouse drag (rain_footer_scripts() adds these). Snapping is off while dragging so the strip follows the pointer 1:1. */ :where(.tpl-single-cast) .cast-photos__track.is-draggable { cursor: grab; } :where(.tpl-single-cast) .cast-photos__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } /* Same arrows and count as the TOP shop lineup pager. */ :where(.tpl-single-cast) .cast-photos__pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; } :where(.tpl-single-cast) .cast-photos__arrow { display: grid; place-items: center; width: 32px; height: 32px; } :where(.tpl-single-cast) .cast-photos__arrow--next svg { rotate: 180deg; } :where(.tpl-single-cast) .cast-photos__count { min-width: 60px; font-family: var(--font-display); font-size: 16px; line-height: 1; text-align: center; } :where(.tpl-single-cast) .cast-photos__count .sep { font-size: 20px; } /* --- SNS / PROFILE ------------------------------------------------------- The shop page's band label over each block, 30 down to its body and 50 from a body to the next label. The buttons are archive-shop.php's Ø50 gold discs; the profile is its label / value
- . */
:where(.tpl-single-cast) .cast-detail .band-title + * { margin-top: 30px; }
:where(.tpl-single-cast) .cast-detail * + .band-title { margin-top: 50px; }
:where(.tpl-single-cast) .cast-sns {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding-inline: 20px;
}
:where(.tpl-single-cast) .cast-sns__link {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--c-sns);
color: var(--c-white);
}
:where(.tpl-single-cast) .cast-sns__icon { display: block; }
:where(.tpl-single-cast) .cast-profile {
display: grid;
grid-template-columns: 6em minmax(0, 1fr);
margin: 0;
padding-inline: 20px;
font-size: 16px;
font-weight: 500;
line-height: 40px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single-cast) .cast-profile dt,
:where(.tpl-single-cast) .cast-profile dd { margin: 0; }
:where(.tpl-single-cast) .cast-profile dd { overflow-wrap: anywhere; }
/* --- Back ---------------------------------------------------------------- */
:where(.tpl-single-cast) .back { margin-top: 146px; }
/* --- Responsive ---------------------------------------------------------
Same 1100 / 820 / 620 breaks as the other sheets. Two columns hold down to
620; below that the head, the photos and the blocks stack, with the
breadcrumb moved to the top as on single.php. */
@media (max-width: 1100px) {
:where(.tpl-single-cast) main { --head-top: 140px; --head-meta: 196px; --head-bottom: 60px; }
:where(.tpl-single-cast) .cast-head__name { font-size: 34px; }
:where(.tpl-single-cast) .back { margin-top: 110px; }
}
@media (max-width: 820px) {
:where(.tpl-single-cast) .cast-head__name { font-size: 28px; }
:where(.tpl-single-cast) .cast-detail { padding-top: 40px; }
:where(.tpl-single-cast) .cast-sns { gap: 14px; padding-inline: 16px; }
:where(.tpl-single-cast) .cast-sns__link { width: 44px; height: 44px; }
:where(.tpl-single-cast) .cast-profile { padding-inline: 16px; font-size: 15px; line-height: 34px; }
}
@media (max-width: 620px) {
:where(.tpl-single-cast) main { --head-top: 104px; }
:where(.tpl-single-cast) .cast-head { padding-bottom: 40px; }
:where(.tpl-single-cast) .cast-head__inner { min-height: 0; }
:where(.tpl-single-cast) .cast-head__inner > * { max-width: none; }
:where(.tpl-single-cast) .cast-head .breadcrumb { order: -1; margin: 0 0 28px; padding-top: 0; }
:where(.tpl-single-cast) .cast-head__name { margin-top: 18px; font-size: 26px; }
:where(.tpl-single-cast) .cast-head__en { margin-top: 10px; font-size: 16px; }
:where(.tpl-single-cast) .cast-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
:where(.tpl-single-cast) .cast-photos { grid-column: 1; margin-top: 32px; }
:where(.tpl-single-cast) .cast-detail { grid-column: 1; grid-row: 2; padding-top: 48px; }
:where(.tpl-single-cast) .cast-detail * + .band-title { margin-top: 40px; }
:where(.tpl-single-cast) .cast-detail .band-title + * { margin-top: 24px; }
:where(.tpl-single-cast) .back { margin-top: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.tpl-single-cast) .cast-photos__track { scroll-behavior: smooth; }
:where(.tpl-single-cast) .cast-sns__link { transition: opacity .25s ease; }
:where(.tpl-single-cast) .cast-sns__link:hover { opacity: .85; }
}
/* #endregion */
/* #region 3. SPECIAL FEATURE（特集）（single-special-feature.php / body.tpl-single-special-feature） ======================= */
/* ===========================================================================
No Zeplin screen. The content is the current site's /adtrack/ and
/godzilla/ pages, set in the local sub page frame: .page-head, breadcrumb,
the page's blocks, then .back. The feature (parent) page lists its
entries; an entry page shows the visual and its members
(template/special-feature.php, shared by every feature).
One spacing and type system for both pages, taken from the PICK UP NEWS
archive and the shared scale — no values of their own:
--sf-flow breadcrumb → first block, and block → block (46, as the
news list's row gap; 32 on phones)
--sf-pad inside the lead panel and the entry cards (40 / 20)
--sf-gap inside a panel, heading → content (30 = --gap-lg / 16)
type display face at --fs-display-s (40) / -xs (25) only;
Japanese copy 16 / 500 / 35 (the shop info text) and the
14px UI size of the chip and breadcrumb.
========================================================================= */
:where(.tpl-single-special-feature) {
--sf-flow: 46px;
--sf-pad: 40px;
--sf-gap: var(--gap-lg);
}
:where(.tpl-single-special-feature) .breadcrumb { margin-top: 100px; }
:where(.tpl-single-special-feature) .back { margin-top: 146px; }
:where(.tpl-single-special-feature) :is(.feature-lead, .feature-list, .feature-entry, .feature-entry > * + *) { margin-top: var(--sf-flow); }
/* --- Lead (feature page) ---------------------------------------------------
The feature's body text on a --c-band panel inside a 1px gold hairline.
Its heading is the display face in gold leaf between two short gold rules
ending in the band mark (the ✦ of .band-title). Heading and paragraphs
are all --sf-gap apart. */
:where(.tpl-single-special-feature) .feature-lead {
container-type: inline-size;
padding: var(--sf-pad);
background: var(--c-band);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 35px;
letter-spacing: var(--ls-wide);
}
:where(.tpl-single-special-feature) .feature-lead > * + * { margin-top: var(--sf-gap); }
/* Japanese copy: no ー/っ/。 at a line start, and no one-character last line
after the editor's
breaks ("…必見で / す。" at 768). */ :where(.tpl-single-special-feature) .feature-lead p { line-break: strict; text-wrap: pretty; } :where(.tpl-single-special-feature) .feature-lead h2 { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: var(--font-display); font-size: var(--fs-display-xs); font-weight: 400; line-height: 1.2; letter-spacing: var(--ls-display); text-wrap: balance; color: #b48132; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { :where(.tpl-single-special-feature) .feature-lead h2 { background: var(--grad-gold-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } :where(.tpl-single-special-feature) .feature-lead h2::before, :where(.tpl-single-special-feature) .feature-lead h2::after { content: ""; flex: none; width: 60px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b48132' d='M12 0c0 6.63 5.37 12 12 12-6.63 0-12 5.37-12 12 0-6.63-5.37-12-12-12C6.63 12 12 6.63 12 0z'/%3E%3C/svg%3E") right center / 11px 11px no-repeat, var(--grad-gold-hairline) left center / calc(100% - 17px) 1px no-repeat; } :where(.tpl-single-special-feature) .feature-lead h2::after { scale: -1 1; } /* A wrapped heading's box stays as wide as the panel, so the rules would sit at the panel edges, far from the words. Drop them once the heading (≈660px at 25px, the current site's longest) plus both rules (2 × 80) no longer fits on one line. Measured on the panel, not the viewport. */ @container (max-width: 819px) { :where(.tpl-single-special-feature) .feature-lead h2::before, :where(.tpl-single-special-feature) .feature-lead h2::after { display: none; } } /* Likewise the editor's
lines (longest ≈ 680px at 16px): once they no longer fit, the copy reflows as ordinary left-aligned paragraphs rather than breaking each centred line a second time. */ @container (max-width: 699px) { :where(.tpl-single-special-feature) .feature-lead p { text-align: left; } :where(.tpl-single-special-feature) .feature-lead br { display: none; } } /* --- Entry list (feature page) --------------------------------------------- One dark card per entry, with the 2px gold-cream frame of the shop cards. The head reads "#5 [LATEST] ─── VIEW MORE ›" on one line, centred on the number; the image keeps its own ratio (the truck artwork runs 2.3:1 to 3.9:1) and zooms a little on hover. */ :where(.tpl-single-special-feature) .feature-list { display: grid; gap: var(--sf-flow); } /* The year above a card (ACF feature_year, the GODZILLA signs): display face in gold leaf with the gold hairline running on to the card's edge, the rule of .feature-list__rule. */ :where(.tpl-single-special-feature) .feature-list__year { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--font-display); font-size: var(--fs-display-xs); line-height: 1; letter-spacing: var(--ls-display); color: #b48132; } :where(.tpl-single-special-feature) .feature-list__year::after { content: ""; flex: 1; height: 1px; background: var(--grad-gold-hairline); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { :where(.tpl-single-special-feature) .feature-list__year { background: var(--grad-gold-v) left top / auto 1em no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } :where(.tpl-single-special-feature) .feature-list__link { display: block; padding: var(--sf-pad); background: var(--c-ink); color: var(--c-light); text-decoration: none; } :where(.tpl-single-special-feature) .feature-list__head { display: flex; align-items: center; gap: 20px; } :where(.tpl-single-special-feature) .feature-list__title { flex: none; font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 1; letter-spacing: var(--ls-display); color: #cfbc79; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { :where(.tpl-single-special-feature) .feature-list__title { background: var(--grad-gold-v); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } :where(.tpl-single-special-feature) .feature-list__latest { flex: none; color: var(--c-ink); font-family: var(--font-display); text-transform: uppercase; } :where(.tpl-single-special-feature) .feature-list__rule { flex: 1; height: 1px; background: var(--grad-gold-hairline); } :where(.tpl-single-special-feature) .feature-list__more { flex: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; line-height: 1; letter-spacing: var(--ls-wide); text-transform: uppercase; } :where(.tpl-single-special-feature) .feature-list__more svg { rotate: 180deg; transition: translate .25s ease; } :where(.tpl-single-special-feature) :is(.feature-list__image, .feature-list__noimage) { margin-top: var(--sf-gap); } :where(.tpl-single-special-feature) .feature-list__image { overflow: hidden; } :where(.tpl-single-special-feature) .feature-list__image img { display: block; width: 100%; height: auto; transition: scale .6s ease; } :where(.tpl-single-special-feature) .feature-list__link:hover .feature-list__image img { scale: 1.03; } :where(.tpl-single-special-feature) .feature-list__link:hover .feature-list__more svg { translate: 4px 0; } :where(.tpl-single-special-feature) .feature-list__noimage { aspect-ratio: 1273 / 563; } /* Portrait artwork (the GODZILLA signs, 0.24–0.39 wide per unit of height) would run past 4000px at full width, so it goes four to a row, each in a 1:3 box on the card's ink, shown whole. The narrow cards keep only "#13 [LATEST]" of the head; the whole card is still the link. */ :where(.tpl-single-special-feature) .feature-list--portrait { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-lg); } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__link { padding: 20px; } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__head { flex-wrap: wrap; gap: 8px 12px; } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__title { font-size: var(--fs-display-xs); } :where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__rule, .feature-list__more) { display: none; } :where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__image, .feature-list__noimage) { margin-top: 20px; aspect-ratio: 1 / 3; } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__image img { height: 100%; object-fit: contain; } /* --- Entry visual ----------------------------------------------------------*/ :where(.tpl-single-special-feature) .feature-visual img { display: block; width: 100%; height: auto; } /* Portrait artwork: the sign on the left at 380, the members beside it as on the current site, held in view while the tall sign scrolls past. */ :where(.tpl-single-special-feature) .feature-entry--portrait { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 60px; align-items: start; } :where(.tpl-single-special-feature) .feature-entry--portrait > * + * { margin-top: 0; } :where(.tpl-single-special-feature) .feature-entry--portrait .feature-members { position: sticky; top: calc(var(--header-h) + var(--sf-flow)); } /* --- Members --------------------------------------------------------------- Up to seven round portraits in a centred row that wraps. The current site's portraits are square exports with the circle already cut, so the circle here is the crop, with a 1px gold-cream ring painted the same way as .chip (two backgrounds, because .frame's mask is square). */ :where(.tpl-single-special-feature) .feature-members { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-flow) var(--sf-gap); list-style: none; } :where(.tpl-single-special-feature) .feature-member { width: 160px; text-align: center; } :where(.tpl-single-special-feature) .feature-member__link { display: block; color: inherit; text-decoration: none; } :where(.tpl-single-special-feature) a.feature-member__link:hover { opacity: .85; } :where(.tpl-single-special-feature) .feature-member__photo { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 50%; background: linear-gradient(var(--c-band), var(--c-band)) padding-box, var(--grad-gold-cream) border-box; box-shadow: var(--shadow-card); } /* Pinned to the ring's inside edge: a grid item's height: 100% does not resolve against the aspect-ratio height, so a portrait photo (the cast thumbnails are 160 × 222) stayed tall and its own 50% radius became an ellipse cutting across the circle. The circle is the parent's clip only. */ :where(.tpl-single-special-feature) .feature-member__photo img:not(.feature-member__noimage) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } :where(.tpl-single-special-feature) .feature-member__noimage { width: 40%; height: auto; opacity: .22; } :where(.tpl-single-special-feature) .feature-member__num { margin-top: 20px; font-family: var(--font-display); font-size: var(--fs-display-xs); line-height: 1; letter-spacing: var(--ls-display); } :where(.tpl-single-special-feature) .feature-member__name { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-wide); } @media (max-width: 1100px) { :where(.tpl-single-special-feature) .breadcrumb { margin-top: 72px; } :where(.tpl-single-special-feature) .back { margin-top: 110px; } :where(.tpl-single-special-feature) .feature-entry--portrait { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; } } @media (max-width: 620px) { :where(.tpl-single-special-feature) { --sf-flow: 32px; --sf-pad: 20px; --sf-gap: 16px; } :where(.tpl-single-special-feature) .breadcrumb { margin-top: 48px; } :where(.tpl-single-special-feature) .back { margin-top: 80px; } :where(.tpl-single-special-feature) .feature-lead { font-size: 14px; line-height: 28px; } :where(.tpl-single-special-feature) .feature-lead h2 { font-size: 18px; } :where(.tpl-single-special-feature) .feature-list__head { gap: 12px; } :where(.tpl-single-special-feature) .feature-list__title { font-size: var(--fs-display-xs); } :where(.tpl-single-special-feature) .feature-list__latest { height: 22px; padding-inline: 10px; font-size: 11px; } :where(.tpl-single-special-feature) .feature-list__more { gap: 8px; font-size: 11px; } :where(.tpl-single-special-feature) .feature-member { width: calc((100% - 2 * var(--sf-gap)) / 3); } /* Two across on a phone, up to four on a small tablet. */ :where(.tpl-single-special-feature) .feature-list--portrait { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__link { padding: 12px; } :where(.tpl-single-special-feature) .feature-list--portrait .feature-list__title { font-size: 18px; } :where(.tpl-single-special-feature) .feature-list__year { gap: 8px; margin-bottom: 8px; font-size: 18px; } :where(.tpl-single-special-feature) .feature-list--portrait :is(.feature-list__image, .feature-list__noimage) { margin-top: 12px; } /* Stacked: the sign centred at phone width, the members after it. */ :where(.tpl-single-special-feature) .feature-entry--portrait { display: block; } :where(.tpl-single-special-feature) .feature-entry--portrait .feature-visual { width: min(100%, 280px); margin-inline: auto; } :where(.tpl-single-special-feature) .feature-entry--portrait > * + * { margin-top: var(--sf-flow); } :where(.tpl-single-special-feature) .feature-entry--portrait .feature-members { position: static; } :where(.tpl-single-special-feature) .feature-member__num { margin-top: 12px; font-size: 18px; } :where(.tpl-single-special-feature) .feature-member__name { margin-top: 6px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { :where(.tpl-single-special-feature) .feature-list__image img, :where(.tpl-single-special-feature) .feature-list__more svg { transition: none; } } /* #endregion */ /* #region 3. 404 / 受け皿（404.php / body.tpl-404、index.php / body.tpl-index） ======================= */ /* =========================================================================== No Zeplin screen. Both open like every sub page: .page-head, breadcrumb, the page's own block, then .back — spacing borrowed from the PICK UP NEWS archive (breadcrumb 100 / 72 / 48 under the head, back 146 / 110 / 80). 404.php … a short note and the four sections of the global nav. index.php … the fallback for fixed pages without a template (there is no page.php). Page titles are Japanese, so the head is a plain heading rather than the Aviano display line; the body reuses the article body type (.entry-body, SINGLE above). ========================================================================= */ :where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 100px; } :where(.tpl-404, .tpl-index) .back { margin-top: 146px; } :where(.tpl-404) .notfound { margin-top: 46px; text-align: center; } :where(.tpl-404) .notfound__lead { font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: var(--ls-wide); } :where(.tpl-404) .notfound__links { margin-top: 46px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; } :where(.tpl-404) .notfound__links a { font-family: var(--font-display); font-size: 20px; letter-spacing: var(--ls-display); text-transform: uppercase; color: #b48132; /* the flat gold .section__en falls back to */ text-decoration: underline; text-underline-offset: .3em; } :where(.tpl-index) .page-head__title { font-size: clamp(24px, 4vw, 40px); font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-wide); } :where(.tpl-index) .entry-body { width: min(800px, 100%); margin: 46px auto 0; } :where(.tpl-index) .index-list { width: min(800px, 100%); margin: 46px auto 0; font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: var(--ls-wide); } :where(.tpl-index) .index-list a { text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 1100px) { :where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 72px; } :where(.tpl-404, .tpl-index) .back { margin-top: 110px; } } @media (max-width: 620px) { :where(.tpl-404, .tpl-index) .breadcrumb { margin-top: 48px; } :where(.tpl-404, .tpl-index) .back { margin-top: 80px; } :where(.tpl-404) .notfound { text-align: left; } :where(.tpl-404) .notfound__lead { font-size: 14px; } :where(.tpl-404) .notfound__links { justify-content: flex-start; gap: 12px 28px; } :where(.tpl-404) .notfound__links a { font-size: 16px; } } /* #endregion */