経由で明朝になり、書体まで崩れた。
誌面には「印刷されたページ」と「全面写真の図版」の両方があるのが
普通なので、写真主役の3つは図版のまま白ヌキで通す。
混在が問題だったのはガラス面・暗い盤・シール・クロームという
4つの素材が同格で争っていたことであって、紙と写真は争わない。 */
/* マステの位置 */
.tape--e1 { left: 40px; top: -15px; width: 112px; height: 28px; transform: rotate(-5deg); }
.tape--r1 { right: -20px; top: 30px; width: 104px; height: 27px; transform: rotate(32deg); }
@media (max-width: 767px) {
.event-sheet .event-list > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.tape--r1 { right: -12px; top: 22px; width: 82px; height: 22px; }
}
/* ===================== 紙にした後の破綻の修正 =====================
1) 03 は「写真1.25fr / コピー0.75fr」の割りに紙のpaddingが入って
文字幅が約250pxまで落ち、見出しが語中で折れた（自然/に距/離が縮）。
列の比を入れ替え、この節だけ見出しを一段落とす。
2) 写真が角丸のカードのままで、紙の言語と噛み合っていなかった。
白フチのプリントに揃える。 */
/* --- 写真をプリントに揃える ---
下の余白はキャプションが白フチの上に乗る分を確保する。
8px だと文字が紙の外（パステルの地）へ落ちて読めなくなる。 */
.request-photo,
.play-photo {
padding: 7px 7px 24px;
border-radius: 0;
background: var(--paper-photo);
box-shadow: var(--shadow-photo);
overflow: visible;
}
.request-photo img,
.play-photo img { border-radius: 0; }
.request-photo::after,
.play-photo::after { display: none; }
/* キャプションは写真の外・白フチの下に手書きで置く */
.request-photo figcaption {
position: static;
right: auto;
bottom: auto;
margin: 11px 3px 0;
color: var(--print-accent);
font-family: var(--font-hand);
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.3;
text-align: left;
}
/* コンテナ幅の22%だと TOGETHER が面から出て切れる */
/* 狭い紙では面の余白を詰める */
.play-copy .sheet__face,
.request-copy .sheet__face {
padding-inline: clamp(16px, 2vw, 26px);
}
/* ===================== SPでの紙の調整 =====================
1) 柱が2行に折れて丸囲みの番号と衝突していた
2) 網掛けの点が11pxの明朝を潰して読めなくなっていた */
@media (max-width: 767px) {
/* 12.5pxの明朝の下に点を敷くと必ず沈む。網点は文字が大きい
PCだけに残し、SPは平網＋左の罫にする（誌面のリードの別作法） */
.lead-ami {
padding: 7px 0 7px 12px;
border-left: 3px solid var(--print-accent);
background-image: none;
background-color: rgba(37, 25, 63, 0.055);
color: var(--print-ink);
font-size: 12.5px;
font-weight: 700;
}
/* 見出しの下限が高すぎて「あの頃聴いていた曲を、」が
2行に割れ、「を、」が孤立していた */
.paper-h { font-size: clamp(1.72rem, 7.4vw, 2.1rem); }
.sheet__face { padding: 22px 16px 38px; }
.ink-button { font-size: 11px; padding: 9px 13px 10px; }
}
/* ===================== セクションの枠を外す =====================
紙が角丸のパステルカードの中に入っていて、消したかった
「同じカードの連続」が枠として残っていた。
地は机の面として連続させ、縁を持つのは紙・写真・シールだけにする。
（実測: 画面に出ている角丸は 999px=錠剤 / 50%=丸囲み数字 /
2px=紙 の3系統に絞られる） */
.scene,
.information-section,
.final-night {
margin-inline: 0;
border-inline: 0;
border-radius: 0;
box-shadow: none;
}
/* 地が続くので、内側の余白でリズムを作る */
.scene__in,
.price-zone__in,
.event-zone__in,
.play-layout {
padding-inline: clamp(18px, 4.5vw, 64px);
}
@media (max-width: 767px) {
.scene,
.information-section,
.final-night { margin-inline: 0; border-radius: 0; }
}
/* ===================== 表紙の情報帯を紙にする =====================
コラージュ画像は制作物なので触らない。その下の情報帯だけが
暗い紫のグラデーションで、旧いガラス期の言語が1箇所だけ
残っていた。画像を「紙に貼った図版」として受ける形にする。 */
.cover__stage { background: var(--paper); }
.cover__visual {
padding: clamp(8px, 1.2vw, 12px) clamp(8px, 1.2vw, 12px) 0;
background: var(--paper-photo);
}
.cover__info {
border-top: 0;
padding: clamp(16px, 2.4vw, 24px) var(--gutter) clamp(20px, 3vw, 28px);
background-color: var(--paper);
background-image:
radial-gradient(circle at 30% 30%, rgba(37, 25, 63, 0.05) 0.7px, transparent 0.8px),
var(--grain-fine);
background-size: 4px 4px, 140px 140px;
}
@media (min-width: 900px) {
/* PCでは画像の上に重ねるので紙の地は敷かない */
.cover__info { padding: 0; background: none; }
}
/* ===================== 机の上の実物 =====================
FVのコラージュは1枚のJPEGなので、その中の物は個別に動かせない。
別個体の透過素材を「印刷面の上に置かれた実物」として画面の縁から
差し込む。焼き込まれた物とは別個体なので二重にならない。
外側(.desk__obj)がスクロール視差、内側(span)が浮遊。
同じ transform を1要素で2つのアニメーションに奪い合わせない。 */
.desk {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
/* 浮遊。周期を互いに素に近い値にして揃わないようにする */
@keyframes desk-float-a {
0%, 100% { transform: rotate(-8deg) translateY(0); }
50% { transform: rotate(-5.6deg) translateY(-11px); }
}
@keyframes desk-float-b {
0%, 100% { transform: rotate(6deg) translateY(0); }
50% { transform: rotate(3.4deg) translateY(-14px); }
}
@keyframes desk-float-c {
0%, 100% { transform: rotate(11deg) translateY(0); }
50% { transform: rotate(8.2deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
.y2k-sticker--play,
.replay-deck.is-playing .replay-deck__top b,
.plan-main::after,
.motion-ready .cover.is-scene-in .cover__keyvisual {
animation: none;
}
}
/* ===================== セクションに置く実物 =====================
FVのコラージュには物が飽和しているので、CDとガラケーは
それが無いセクションへ回す。外側が位置と視差、内側が浮遊。 */
.obj { position: absolute; z-index: 4; pointer-events: none; }
.obj > span { display: block; }
.obj img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 12px 20px rgba(37, 25, 63, 0.34));
}
@keyframes obj-float-a {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-13px); }
}
.motion-ready .obj { opacity: 0; }
.motion-ready .is-scene-in .obj {
opacity: 1;
transition: opacity 420ms var(--ease-out) 340ms;
}
@media (max-width: 767px) {
.obj img { filter: drop-shadow(0 7px 12px rgba(37, 25, 63, 0.3)); }
}
/* .scene-photo の overflow:hidden が白フチの下のキャプションを
切っていた。プリントは外に出す。 */
.request-photo,
.play-photo {
display: block;
overflow: visible;
}
.request-photo figcaption {
position: static !important;
display: block;
right: auto !important;
bottom: auto !important;
z-index: auto;
}
/* プリントに変えたので、旧い min-height と height:100% の画像を解く。
キャプションを流し込みに戻したため、この2つが残ると
白フチの下に空の帯ができてキャプションが切れる。 */
.request-photo,
.play-photo {
min-height: 0 !important;
height: auto;
}
.request-photo img,
.play-photo img {
height: auto;
aspect-ratio: 3 / 2;
}
/* 白フチのプリントの中で画像を scale すると、フチの外へ溢れて
キャプションを覆う（実測 箱348px に対して描画407px）。
プリントは「物」なので、中身を拡大せず紙ごと動かす。 */
@media (min-width: 1024px) and (pointer: fine) {
.request-photo img,
.play-photo img {
transform: none;
transition: none;
}
.request-photo { transform: translate3d(0, calc(var(--scene-y-reverse, 0px) * 0.6), 0) rotate(3deg); }
}
/* ===================== 指摘への対応 =====================
1) 紙の柱の丸囲み番号を外す（右上の「1」）。柱の文言だけで足りる
2) 02 から紫を抜き、暗さを緩め、日本語見出しを主役に据える
（巨大英字を外したので、大きい文字はこの見出しになる）
3) 02 の退場が縮んで薄くなる動きが不自然だったので弱める */
/* --- 1) 丸囲み番号を外す --- */
/* --- 2) 02 KARAOKE：紫を抜く / 明るくする / 文字を大きく --- */
.scene--karaoke { background: #141210; }
/* 覆いを浅くして写真を明るく通す。紫は混ぜない */
.karaoke-photo::after {
background:
linear-gradient(90deg, rgba(16, 14, 12, 0.72), rgba(16, 14, 12, 0.2) 56%, rgba(16, 14, 12, 0.06)),
linear-gradient(180deg, transparent 0 54%, rgba(16, 14, 12, 0.6));
}
.scene--karaoke .scene-title {
max-width: 16em;
font-size: clamp(2.4rem, 5.2vw, 4.4rem);
line-height: 1.18;
letter-spacing: -0.05em;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62);
}
.scene--karaoke .scene-text {
max-width: 30em;
margin-top: 20px;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.9;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.scene--karaoke .scene-label { color: rgba(255, 255, 255, 0.82); }
/* --- 3) 退場の動きを弱める --- */
.scene--karaoke .scene__pin {
transform: none;
opacity: 1;
}
/* 01：写真の下に160pxの空きが出ていた。プリントを紙の高さに
合わせて伸ばし、右の列を写真が持つようにする。
キャプションは流し込みのままなので、画像側を伸縮させる。 */
@media (min-width: 1024px) {
.request-layout { align-items: stretch; }
.request-copy.sheet { align-self: start; }
.request-photo {
align-self: stretch;
display: flex;
flex-direction: column;
}
.request-photo img {
flex: 1 1 auto;
min-height: 0;
height: auto;
aspect-ratio: auto;
object-fit: cover;
}
}
/* ===================== 柱（セクション表記）=====================
紙は「曲リクエスト ─ ASOBIBAR Y2K NIGHT」、写真は「02 KARAOKE & TALK」と
形式が割れていて、番号も紙側だけ消えていた。
番号 / 和名 / 英名 の1形式に統一する。和名はフッターのナビと揃えた。
地の明暗が違うので、色だけ currentColor 経由で切り替える。 */
.scene-label {
display: flex;
align-items: center;
gap: 0.7em;
margin: 0 0 clamp(14px, 2vw, 20px);
font-size: 11px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
.scene-label b {
flex-shrink: 0;
color: var(--magenta-bright);
font-size: 2.5em;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.scene-label i {
flex-shrink: 0;
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.45;
}
.scene-label span {
flex-shrink: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font-size: 2.5em;
font-weight: 900;
letter-spacing: 0.04em;
}
.scene-label em {
font-family: var(--font-mincho);
font-size: 0.95em;
font-style: normal;
font-weight: 700;
letter-spacing: 0.2em;
opacity: 0.66;
white-space: nowrap;
}
/* 紙の上：墨で組み、下に罫を引く */
.sheet .scene-label {
padding-bottom: 9px;
border-bottom: 1px solid rgba(37, 25, 63, 0.3);
color: var(--print-sub);
}
.sheet .scene-label span { display: inline; color: var(--print-ink); }
.sheet .scene-label b { color: var(--print-accent); }
/* 写真の上：白ヌキ */
.scene--karaoke .scene-label,
.scene--new-memory .scene-label,
.final-night .scene-label { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 767px) {
.scene-label { flex-wrap: wrap; gap: 0.5em 0.6em; font-size: 10px; }
.scene-label i { width: 18px; }
.scene-label em { letter-spacing: 0.14em; }
}
/* ===================== 01 と 03 を同じ構成に =====================
2カラムの指定が min-width:1024px からだったので、900〜1023px の
帯域で1カラムに落ち、右側が空いて写真が紙の下へ回っていた。
横並びの下限を 880px まで下げる。
03 は写真が左・紙が右だったので、01 と同じ「紙が左・写真が右」に
並べ替えた（HTML側も同順にしたので読み上げ順も見出しが先になる）。 */
@media (min-width: 880px) {
.request-layout,
.play-layout {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: stretch;
gap: clamp(34px, 5vw, 72px);
}
.request-copy.sheet,
.play-copy.sheet { align-self: start; }
/* プリントは列いっぱいに伸ばす。中の画像を拡大せず紙ごと動かす */
.request-photo,
.play-photo {
align-self: stretch;
display: flex;
flex-direction: column;
min-height: 0;
}
.request-photo img,
.play-photo img {
flex: 1 1 auto;
min-height: 340px;
height: auto;
aspect-ratio: auto;
object-fit: cover;
}
}
/* --- 3) 金額 --- */
/* --- 4) CTA。暗い墨ベタをやめる --- */
.ink-button {
border-color: var(--magenta);
background: var(--magenta);
color: #fff;
box-shadow: 0 3px 0 #9c1550;
}
.ink-button i { color: #ffd7ea; }
.ink-button:active { transform: rotate(-0.8deg) translateY(2px); box-shadow: 0 1px 0 #9c1550; }
/* --- 1) 積む配置では紙を重ねない --- */
/* 積む配置で紙が788pxまで広がる一方、中身は狭い段組みのままで
右半分が空いていた。紙の幅を中身に合わせて、余りは机として見せる。 */
/* ===================== 04 と 06 の修正 =====================
04: .scene__pin が946pxのセクション内で600pxまで潰れ、
左右に地の紫が帯として出ていた。
セクション側の place-items: center が pin を grid item として
中央に縮めていたのが原因。pin は常に全幅で敷く。
06: 値が左に寄って右側が大きく空いていた。
目次のリーダー罫で項目と値をつないで埋める。 */
.scene__pin {
width: 100%;
justify-self: stretch;
align-self: stretch;
}
.scene--new-memory,
.final-night {
display: block;
place-items: initial;
}
/* --- 06 リーダー罫 --- */
.event-sheet .event-list > div {
display: grid;
grid-template-columns: 108px auto minmax(0, 1fr);
align-items: baseline;
gap: 0 14px;
}
.event-sheet .event-list dd { order: 3; justify-self: end; text-align: right; }
.event-sheet .event-list > div::after {
order: 2;
align-self: center;
height: 1px;
margin: 0 4px;
background: repeating-linear-gradient(90deg, rgba(35, 24, 21, 0.42) 0 2px, transparent 2px 6px);
content: "";
}
@media (max-width: 767px) {
.event-sheet .event-list > div {
grid-template-columns: 84px minmax(0, 1fr);
gap: 6px 10px;
}
.event-sheet .event-list dd { order: 2; justify-self: start; text-align: left; }
.event-sheet .event-list > div::after { display: none; }
}
/* ===================== 05 を 01・03 と同じ構成に =====================
2枚の紙を重ねるコラージュは、幅が変わるたびに紙が細って
写真が本文へ食い込む事故が続いた。紙が左・写真が右の
2カラムに揃える。 */
.price-zone { position: relative; }
/* 箔シールは紙の右上角にまたがらせる */
.price-foil {
position: absolute;
right: clamp(10px, 3vw, 48px);
/* セクションの上端で帯（Y2K NIGHT）が切れていた */
top: clamp(26px, 4vw, 54px);
z-index: 4;
transform: rotate(8deg);
}
@media (max-width: 879px) {
.price-foil { right: 6px; top: 14px; transform: rotate(7deg) scale(0.86); }
}
/* ===================== 左右の余白を1つに揃える =====================
実測で 43 / 82 / 93 / 38 / 0 と5段階にばらけていた。
セクションごとに padding を足していった結果なので、
中身を包む要素に同じ値を1回だけ与える形にする。 */
:root { --pad-x: clamp(18px, 4.5vw, 64px); }
.scene__in,
.play-layout,
.price-zone__in,
.event-zone__in,
.karaoke-copy,
.memory-copy,
.final-night__content {
padding-inline: var(--pad-x);
}
/* セクション側に足されていた分を打ち消す */
.information-section { padding-inline: 0; }
.price-zone__in,
.event-zone__in { width: min(var(--content-max), 100%); margin-inline: auto; }
.event-sheet { width: 100%; }
/* 02 は右に22%のpaddingで余白を作っていた。
余白ではなく本文の最大幅で決める */
.karaoke-copy { padding-right: var(--pad-x); }
.scene--karaoke .scene-title { max-width: 15em; }
.scene--karaoke .scene-text { max-width: 27em; }
/* 04・07 は中身が全幅に接していた */
.memory-copy,
.final-night__content { width: min(var(--content-max), 100%); margin-inline: auto; }
/* ===================== 主従と文字サイズ =====================
実測: 見出しが 44.2 / 50 / 25.6 / 57.7 / 44.2 / 44.2 / 35.6 と割れ、
03 だけ 25.6px（列が狭かった頃の上限が残っていた）。
写真(438) が紙(373) より広く、主従も逆だった。 */
/* 紙を主、写真を従にする */
@media (min-width: 880px) {
.request-layout,
.play-layout {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
}
/* 768〜879pxの02はコピーが写真上に残る。最終段で明色を保証する。 */
@media (min-width: 768px) and (max-width: 879px) {
.scene--karaoke .scene-label--number-only {
color: rgba(255, 255, 255, 0.82);
}
.scene--karaoke .scene-label--number-only b,
.scene--karaoke .scene-title {
color: #ff4a94;
}
.scene--karaoke .scene-title {
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
}
.scene--karaoke .scene-text {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}
}
@media (min-width: 880px) {
.scene--request .request-copy .sheet__face {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.scene--request .request-copy .md {
width: min(48%, 560px);
pointer-events: auto;
}
}
@media (max-width: 879px) {
.scene--request {
min-height: 0;
overflow: hidden;
}
.scene--request .scene__in.request-layout {
display: grid;
grid-template-rows: auto auto;
min-height: 0;
padding: 0;
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
grid-row: 1;
width: 100%;
max-width: none;
height: clamp(430px, 112vw, 560px);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
clip-path: none;
overflow: hidden;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 52% 48%;
transform: none;
}
.scene--request .request-photo::after {
background:
linear-gradient(180deg, transparent 34%, rgba(10, 7, 14, 0.1) 48%, rgba(10, 7, 14, 0.9) 100%),
linear-gradient(90deg, rgba(10, 7, 14, 0.34), transparent 78%);
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
grid-row: 2;
width: 100%;
margin: 0;
padding: 22px 18px 54px;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
transform: none;
}
.scene--request .request-copy .sheet__face {
display: block;
padding: 0;
background: transparent;
box-shadow: none;
clip-path: none;
transform: none;
}
.scene--request .request-copy .md { margin: 0 auto; }
}
/* ===================== 01 / SONG PET =====================
MDの代わりに、平成初期の携帯育成ゲームを思わせる曲リクエスト端末。
固有ロゴや商品形状は使わず、卵形・モノクロ液晶・3ボタンだけを引用する。 */
.tama {
position: relative;
width: clamp(230px, 22vw, 306px);
aspect-ratio: 0.82;
margin: 0;
isolation: isolate;
filter: drop-shadow(0 18px 20px rgba(8, 4, 18, 0.38));
transform: rotate(4deg);
pointer-events: auto;
}
.tama__ring {
position: absolute;
z-index: 0;
top: -38px;
right: 30px;
width: 54px;
height: 54px;
border: 8px solid #b9c3d0;
border-radius: 50%;
background: transparent;
box-shadow:
inset 2px 2px 2px rgba(255, 255, 255, 0.85),
2px 3px 5px rgba(7, 4, 16, 0.38);
}
.tama__chain {
position: absolute;
z-index: 1;
top: -4px;
right: 45px;
display: grid;
gap: 1px;
}
.tama__chain i {
display: block;
width: 12px;
height: 18px;
border: 3px solid #aeb9c7;
border-radius: 50%;
transform: rotate(18deg);
}
.tama__body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 34px 34px;
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.88);
border-radius: 48% 48% 45% 45% / 54% 54% 46% 46%;
background:
radial-gradient(circle at 26% 17%, rgba(255,255,255,.92) 0 3%, transparent 4%),
radial-gradient(circle at 73% 24%, rgba(255,255,255,.62), transparent 19%),
linear-gradient(132deg, rgba(255,255,255,.38), transparent 28% 68%, rgba(255,255,255,.25)),
conic-gradient(from 220deg at 48% 54%, #f590c6, #f9b4d7, #8ee2e3, #c7b6f4, #ff9fc9, #f590c6);
box-shadow:
inset 0 0 0 5px rgba(203, 49, 126, 0.24),
inset 0 -18px 30px rgba(117, 30, 91, 0.2),
inset 0 12px 18px rgba(255, 255, 255, 0.35);
}
.tama__shine {
position: absolute;
top: 24px;
left: 28px;
width: 56px;
height: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.68);
filter: blur(1px);
transform: rotate(-28deg);
}
.tama__brand {
position: relative;
z-index: 2;
margin: 0 0 10px;
color: #8c275f;
font-family: var(--font-main);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.18em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}
.tama__screen {
position: relative;
z-index: 3;
display: grid;
grid-template-rows: auto 1fr auto auto;
width: 100%;
min-height: 148px;
padding: 10px 11px 11px;
border: 5px solid #d5dae1;
border-radius: 14px;
background:
repeating-linear-gradient(0deg, rgba(40, 53, 27, 0.045) 0 1px, transparent 1px 3px),
linear-gradient(155deg, #d7e2a5, #aebf77);
box-shadow:
inset 0 0 0 2px rgba(64, 74, 48, 0.5),
inset 0 3px 7px rgba(37, 48, 26, 0.28),
0 2px 0 rgba(255, 255, 255, 0.48);
color: #28351c;
font-family: var(--font-main);
}
.tama__screen-top {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 6px;
font-weight: 900;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.tama__status { letter-spacing: 0.09em; }
.tama.is-mode-on .tama__status { animation: tamaBlink 0.7s steps(1, end) infinite; }
@keyframes tamaBlink { 50% { opacity: 0.28; } }
.tama__pet {
align-self: center;
justify-self: center;
width: 72px;
height: 54px;
margin-top: 4px;
fill: #344326;
shape-rendering: crispEdges;
}
.tama__pet-cut { fill: #bdcc87; }
.tama__screen strong {
overflow: hidden;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.08em;
text-align: center;
white-space: nowrap;
}
.tama__bar {
position: relative;
height: 6px;
margin-top: 5px;
background: repeating-linear-gradient(90deg, rgba(48, 62, 33, 0.2) 0 5px, transparent 5px 7px);
}
.tama__bar i {
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, #344326 0 5px, transparent 5px 7px);
clip-path: inset(0 calc((1 - var(--deck, 0)) * 100%) 0 0);
}
.tama__keys {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
gap: 19px;
margin-top: 17px;
}
.tama__keys button {
display: grid;
place-items: center;
width: 27px;
height: 27px;
padding: 0;
border: 2px solid rgba(142, 43, 101, 0.38);
border-radius: 50%;
background: linear-gradient(180deg, #fff2f8, #e78aba);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.72),
0 3px 0 rgba(133, 40, 93, 0.38);
color: #7e2455;
font-size: 8px;
cursor: pointer;
}
.tama__keys button:active {
translate: 0 2px;
box-shadow: inset 0 1px 2px rgba(112, 31, 80, 0.25), 0 1px 0 rgba(133, 40, 93, 0.34);
}
.tama__body > small {
position: relative;
z-index: 3;
margin-top: 16px;
color: rgba(102, 29, 75, 0.76);
font-family: var(--font-main);
font-size: 6px;
font-weight: 900;
letter-spacing: 0.15em;
}
.tama__charm {
position: absolute;
z-index: 4;
right: -16px;
bottom: 34px;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.82);
border-radius: 50%;
background: conic-gradient(#76dbe5, #f59ccb, #ffe48f, #9d91ed, #76dbe5);
box-shadow: 0 5px 10px rgba(8, 4, 18, 0.28);
color: #fff;
font-family: var(--font-main);
font-size: 22px;
font-weight: 900;
text-shadow: 0 1px 2px rgba(71, 22, 60, 0.48);
transform: rotate(-9deg);
}
@media (min-width: 880px) {
.scene--request .request-copy .tama {
width: clamp(244px, 22vw, 306px);
margin-right: 0;
translate: 0 -30px;
transform: rotate(4deg);
}
}
@media (max-width: 879px) {
.scene--request .request-copy .tama {
width: clamp(218px, 64vw, 270px);
margin: 12px auto 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.tama.is-mode-on .tama__status { animation: none; }
}
/* ===================== SONG PET / 独立ミニ体験 =====================
01の説明から端末を切り離し、01→02の間で少しだけ触れる寄り道にする。
セクション番号は増やさず、ページ全体の進行を長く見せない。 */
.scene--request .request-copy .sheet__face {
grid-template-columns: minmax(0, 1fr);
}
.scene--request .request-copy__text {
width: min(100%, 760px);
}
.song-pet-break {
position: relative;
z-index: 2;
padding: clamp(30px, 4vw, 54px) var(--pad-x) clamp(48px, 7vw, 92px);
background: transparent;
}
.song-pet-break__in {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
align-items: center;
gap: clamp(34px, 7vw, 92px);
width: min(980px, 100%);
min-height: 430px;
margin: 0 auto;
padding: clamp(36px, 5vw, 62px) clamp(30px, 6vw, 76px);
color: var(--print-ink);
filter: drop-shadow(0 18px 24px rgba(70, 38, 83, 0.18));
isolation: isolate;
}
.song-pet-break__in::before {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(rgba(251, 247, 238, 0.97), rgba(251, 247, 238, 0.97)),
var(--grain-fine);
clip-path: polygon(0 2%, 7% 0, 15% 1.5%, 24% 0, 35% 1%, 46% 0, 58% 1.4%, 70% 0, 82% 1.2%, 92% 0, 100% 2%, 99% 97%, 91% 100%, 80% 98.5%, 69% 100%, 57% 98.6%, 45% 100%, 33% 98.4%, 21% 100%, 10% 98.5%, 0 100%);
content: "";
}
.song-pet-break__in::after {
position: absolute;
top: -14px;
left: clamp(28px, 8vw, 104px);
width: 112px;
height: 30px;
background: rgba(86, 216, 232, 0.62);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
content: "";
mix-blend-mode: multiply;
transform: rotate(-3deg);
}
.song-pet-break__copy {
min-width: 0;
}
.song-pet-break__eyebrow {
display: inline-block;
margin: 0 0 16px;
padding: 5px 12px 6px;
color: #fff;
background: var(--print-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
transform: rotate(-1.5deg);
}
.song-pet-break__copy h2 {
max-width: 10em;
margin: 0;
color: var(--print-accent);
font-family: var(--font-main);
font-size: clamp(2.15rem, 4.1vw, 3.75rem);
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.055em;
}
.song-pet-break__copy > p:last-child {
margin: clamp(16px, 2vw, 24px) 0 0;
color: var(--print-ink);
font-family: var(--font-main);
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 700;
line-height: 1.8;
}
.song-pet-break .tama {
justify-self: center;
width: clamp(255px, 24vw, 324px);
margin: 0;
transform: rotate(3deg);
}
.tama__keys button:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
box-shadow: 0 0 0 6px var(--print-accent);
}
.tama.is-dancing .tama__pet {
animation: tamaDance 0.34s steps(2, end) infinite;
transform-origin: 50% 88%;
}
.tama.is-complete .tama__screen {
box-shadow:
inset 0 0 0 2px rgba(64, 74, 48, 0.5),
inset 0 3px 7px rgba(37, 48, 26, 0.28),
0 0 0 3px rgba(255, 255, 255, 0.72),
0 0 18px rgba(222, 255, 153, 0.68);
}
.tama[data-pet-mood="dreamy"] .tama__pet { transform: rotate(-3deg); }
.tama[data-pet-mood="party"] .tama__pet { transform: scale(1.06); }
@keyframes tamaDance {
0% { transform: translate3d(-4px, 0, 0) rotate(-4deg); }
50% { transform: translate3d(4px, -3px, 0) rotate(4deg); }
100% { transform: translate3d(-4px, 0, 0) rotate(-4deg); }
}
@media (max-width: 879px) {
.song-pet-break {
padding: 18px 12px clamp(58px, 16vw, 82px);
}
.song-pet-break__in {
grid-template-columns: 1fr;
gap: 34px;
min-height: 0;
padding: 42px 22px 48px;
text-align: center;
}
.song-pet-break__in::after {
left: 50%;
transform: translateX(-50%) rotate(-3deg);
}
.song-pet-break__eyebrow { margin-bottom: 14px; }
.song-pet-break__copy h2 {
max-width: 11em;
margin-inline: auto;
font-size: clamp(2rem, 9.5vw, 2.65rem);
}
.song-pet-break__copy > p:last-child {
font-size: 14px;
line-height: 1.75;
}
.song-pet-break .tama {
width: min(76vw, 286px);
}
}
@media (prefers-reduced-motion: reduce) {
.tama.is-dancing .tama__pet { animation: none; }
}
@media (min-width: 880px) {
/* 旧コピー枠にはMDだけが残る。写真上の文章と左右で競合させない。 */
.scene--request .request-copy.sheet { pointer-events: none; }
.scene--request .request-copy .sheet__face {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.scene--request .request-copy .md {
width: min(48%, 560px);
pointer-events: auto;
}
}
@media (max-width: 879px) {
.scene--request {
min-height: 0;
overflow: hidden;
}
.scene--request .scene__in.request-layout {
display: grid;
grid-template-rows: auto auto;
min-height: 0;
padding: 0;
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
grid-row: 1;
width: 100%;
max-width: none;
height: clamp(430px, 112vw, 560px);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: #0e0b0d;
box-shadow: none;
clip-path: none;
overflow: hidden;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: 52% 48%;
transform: none;
}
.scene--request .request-photo::after {
position: absolute;
inset: 0;
z-index: 2;
display: block;
background:
linear-gradient(180deg, transparent 34%, rgba(10, 7, 14, 0.1) 48%, rgba(10, 7, 14, 0.9) 100%),
linear-gradient(90deg, rgba(10, 7, 14, 0.34), transparent 78%);
content: "";
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
grid-row: 2;
width: 100%;
margin: 0;
padding: 22px 18px 54px;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
transform: none;
}
.scene--request .request-copy :is(.sheet__fiber, .tape) { display: none; }
.scene--request .request-copy .sheet__face {
display: block;
padding: 0;
background: transparent;
box-shadow: none;
clip-path: none;
transform: none;
}
.scene--request .request-copy .md { margin: 0 auto; }
}
/* ===================== 01〜03 共通背景 =====================
各セクションで同じグラデーションを描き直すと、境界ごとに
開始色が戻って帯に見える。ラッパーへ1枚だけ敷いて連続させる。 */
.experience-zone {
position: relative;
isolation: isolate;
background:
radial-gradient(circle at 13% 6%, rgba(255, 244, 235, 0.6), transparent 26%),
radial-gradient(circle at 88% 42%, rgba(255, 225, 240, 0.72), transparent 30%),
radial-gradient(circle at 20% 88%, rgba(231, 218, 255, 0.66), transparent 28%),
linear-gradient(168deg, #c9bdf0 0%, #cdb6e4 46%, #e8a9c9 100%);
}
.experience-zone::before {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.86), transparent 78%);
content: "";
}
.experience-zone > * {
position: relative;
z-index: 1;
}
.experience-zone > .scene--request,
.experience-zone > .scene--karaoke,
.experience-zone > .info-zone {
background: transparent;
}
.experience-zone > .info-zone::before {
display: none;
}
/* 768〜879pxでは02の文字はまだ写真上に載るため、明色へ戻す。 */
@media (min-width: 768px) and (max-width: 879px) {
.scene--karaoke .scene-label--number-only {
color: rgba(255, 255, 255, 0.82);
}
.scene--karaoke .scene-label--number-only b,
.scene--karaoke .scene-title {
color: #ff4a94;
}
.scene--karaoke .scene-title {
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
}
.scene--karaoke .scene-text {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}
}
/* ===================== 02 / 余白・柱・シールの再整理 =====================
訴求軸ではない「歌う / KARAOKE & TALK」を外し、02だけを柱にする。
コピーは顔から離れた左下、シールは右上の余白へ固定する。 */
.scene--karaoke .karaoke-copy {
align-self: end;
width: 100%;
max-width: none;
padding: 0 clamp(28px, 4vw, 56px) clamp(52px, 5.5vw, 76px);
}
.scene--karaoke .scene-label--number-only {
gap: 12px;
margin-bottom: clamp(20px, 2.2vw, 28px);
font-size: clamp(19px, 1.8vw, 24px);
}
.scene--karaoke .scene-label--number-only b {
color: #ff4a94;
font-size: 1em;
letter-spacing: 0.03em;
}
.scene--karaoke .scene-label--number-only i {
width: clamp(34px, 4vw, 52px);
height: 2px;
background: #ff4a94;
opacity: 0.72;
}
.scene--karaoke .y2k-sticker--karaoke {
inset: clamp(18px, 2vw, 28px) clamp(12px, 2vw, 28px) auto auto;
width: clamp(220px, 20vw, 280px);
transform: rotate(4deg);
}
@media (max-width: 767px) {
.scene--karaoke .karaoke-copy {
padding: 28px 18px 54px;
}
.scene--karaoke .scene-label--number-only {
margin-bottom: 18px;
font-size: 18px;
}
.scene--karaoke .scene-label--number-only i {
width: 30px;
}
.scene--karaoke .y2k-sticker--karaoke {
inset: 18px 4px auto auto;
width: clamp(132px, 37vw, 148px);
transform: rotate(5deg);
}
}
/* 見出しの基準を1つに戻す */
.paper-h {
font-size: clamp(2.15rem, 5.6vw, 3.5rem);
line-height: 1.16;
/*
を固定すると幅が変わったとき「まる。」のような孤立が出る。
行数はブラウザに均等割りさせる */
text-wrap: balance;
}
/* 本文。11〜13pxは紙の上では小さすぎた */
.request-copy .scene-text,
.play-copy .scene-text {
font-size: clamp(14px, 1.55vw, 16.5px);
line-height: 1.95;
}
.paper-note { font-size: clamp(12px, 1.2vw, 13px); line-height: 1.85; }
.lead-ami { font-size: clamp(13px, 1.35vw, 14.5px); }
/* 07 は中身が中央寄せで左に183pxの空きが出ていた */
.final-night__content { margin-inline: 0; }
.final-night__content h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.2; }
.final-night__content > p { font-size: clamp(14px, 1.4vw, 16.5px); }
@media (max-width: 879px) {
.paper-h,
.play-copy .paper-h { font-size: clamp(1.72rem, 7.4vw, 2.2rem); }
}
/* 07 だけ margin-left: auto で右寄せになっていて、
左に183pxの空きが出ていた。他セクションと同じ左揃えにする。 */
.final-night__content .scene-label,
.final-night__content h2,
.final-night__content > p {
max-width: 24em;
margin-left: 0;
}
.final-night__content > p { max-width: 30em; }
.cta--final { margin: 32px auto 0 0; }
@keyframes purikura-flow {
from { transform: translate3d(0, 0, 0); }
/* 4組中の1組分だけ送る。次の同一組が同じ位置へ来るため、
画面高にかかわらずループの継ぎ目が露出しない。 */
to { transform: translate3d(0, -25%, 0); }
}
/* --- 縁のシール --- */
.seal { position: absolute; display: grid; place-items: center; }
.seal--heart {
right: clamp(10px, 3vw, 44px);
bottom: clamp(140px, 26vh, 250px);
width: clamp(28px, 3.2vw, 42px);
transform: rotate(-12deg);
}
.seal--heart svg { width: 100%; height: auto; fill: #ff4aa2; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #fff); }
/* SPは点数を減らす */
@media (max-width: 767px) {
.seal--heart { right: 8px; bottom: 96px; width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.obj, .obj > span { animation: none; }
.obj { opacity: 1; }
}
/* ===================== 05 PRICE ===================== */
.price-zone__in { position: relative; }
.price-main { margin-top: clamp(16px, 2.4vw, 30px); }
/* 情報は 100 の右へ。一瞬で読める順に積む */
.price-info { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }
.price-info .lead-ami { align-self: flex-start; }
@media (min-width: 1000px) {
/* 100 と情報を横に並べる。100が左45%、情報が右 */
.price-main {
display: grid;
grid-template-columns: minmax(0, auto) minmax(300px, 1fr);
align-items: end;
gap: clamp(24px, 4vw, 64px);
}
.price-info { padding-bottom: clamp(10px, 1.6vw, 24px); }
/* 写真は列ではなく、紙の角に貼るアクセントに落とす */
.price-photo {
position: absolute;
right: 0;
top: clamp(-18px, -1vw, -6px);
z-index: 3;
width: clamp(180px, 19vw, 260px);
transform: rotate(2.8deg);
}
.price-photo img { aspect-ratio: 4 / 3; }
.price-foil { right: clamp(200px, 22vw, 300px); top: clamp(-14px, -0.6vw, -4px); }
}
@media (max-width: 999px) {
/* SPは紙が縦積みなので、PC（+2.8deg）と逆に振ってリズムを作る */
.price-photo { width: min(300px, 70%); margin: 22px auto 0; transform: rotate(-3deg); }
.price-foil { right: 4px; top: 10px; transform: rotate(7deg) scale(0.86); }
}
/* 情報列は縦積みなので、ボタンが列幅いっぱいに伸びて帯に見えていた */
.price-info .ink-button { align-self: flex-start; }
@media (min-width: 880px) {
.scene--request { height: auto; }
.scene--request .scene__in {
position: relative;
top: auto;
display: grid;
align-content: normal;
min-height: 0;
}
/* 75-90% 写真が前へ。
.reveal-ready .request-photo[data-reveal].is-in (0,4,0) が
transform を上書きしていたので、同じ詳細度で書く。 */
.request-photo,
.reveal-ready .request-photo[data-reveal].is-in {
transform:
translate3d(0, calc(var(--scene-y-reverse, 0px) * 0.6), 0)
rotate(3deg)
scale(calc(1 + 0.035 * var(--s-photo, 0)));
/* 登場時の transform transition が残っていると、
スクラブした値がそのトランジションに食われて動かない。
実機でもスクラブが遅れるので切る。 */
transition: none;
}
}
/* どの幅でも通常スクロール。上下余白だけ同じ基準で整える。 */
@media (max-width: 879px) {
.scene--request { height: auto; }
.scene--request .scene__in { position: static; min-height: 0; }
}
.scene--request .scene__in {
padding-block: clamp(36px, 5vw, 64px);
}
@media (prefers-reduced-motion: reduce) {
.replay-deck__play,
.replay-deck__track p,
#experience .obj--disc,
.request-photo { transform: none; clip-path: none; opacity: 1; }
}
/* ===================== 型（タイプスケール）の統一 =====================
指摘:「セクション５の100がずっとでかいまま/デカすぎます」
「基本的なLPのフォントサイズに合わせてください」
「全体を通してフォントの文字サイズが気になります」
実測すると、見出しが 56 / 70.4 / 68 / 54.4px とセクションごとに
バラバラで、本文は 16.5px。見出しと本文の比が最大4.2倍あり、
100 は 416px（本文の25倍）だった。
一般的な日本語LPの比（見出し2.3倍前後）に寄せ、段を4つに絞る。
見出し 40px
数字（100）72px … ページ内で一番大きい数字。ただし図版ではない
金額 32px
本文 17px
注記 13px
ここが最終の基準。上流のセクション別指定は全部これで上書きする。 */
/* --- 見出し --- */
.paper-h,
.play-copy .paper-h,
.scene-title,
.scene--karaoke .scene-title,
.memory-copy .scene-title,
.final-night__content h2,
.info-heading h2 {
font-size: clamp(1.55rem, 3.1vw, 2.5rem);
}
/* --- 本文 --- */
.scene-text,
.request-copy .scene-text,
.play-copy .scene-text,
.scene--karaoke .scene-text {
font-size: clamp(15px, 1.3vw, 17px);
}
.lead-ami { font-size: clamp(13px, 1.15vw, 15px); }
.paper-note { font-size: clamp(12px, 1.05vw, 13px); }
/* --- 数字 --- */
.plan-prices dd,
.price-copy .plan-prices dd { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.event-date,
.event-sheet .event-date { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
/* 100 が図版でなくなったので、左に置く意味がなくなった。
「100分」→ 内訳 → 金額 → 注記 → CTA と縦に読ませる */
@media (min-width: 880px) {
.price-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(14px, 1.8vw, 22px);
}
.price-info { padding-bottom: 0; }
}
/* 07 だけ柱が 16.5px / ノンブルが 20.6px と、他セクション
（11px / 13.8px）より大きかった。写真の上なので別扱いに
していたが、統一の妨げになるので基準に戻す */
.final-night__content .scene-label { font-size: 11px; }
.final-night__content .scene-label b { font-size: 13.8px; }
.final-night__content .scene-label em { font-size: 10.5px; }
.final-night__content > p { font-size: clamp(15px, 1.3vw, 17px); }
/* ===================== 05 を 01・03 と同じ2カラムに =====================
100 を図版から数字に落としたため、紙が全幅のままだと右半分が
500pxほど空いた（実測 紙1050px に対して中身505px）。
「05の構成は01と一緒に」という指示どおり、
左＝コピーの紙 / 右＝写真 の2カラムに組み直す。 */
@media (min-width: 880px) {
.price-zone__in {
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
align-items: center;
gap: clamp(28px, 4vw, 64px);
}
/* 写真は角のアクセントではなく、右の列そのものに戻す */
.price-photo {
position: static;
z-index: 2;
width: auto;
margin: 0;
transform: rotate(2.8deg);
}
/* 箔シールは紙と写真の継ぎ目へ。03と同じ扱い */
.price-foil {
right: auto;
left: 39%;
top: clamp(-10px, -0.4vw, 0px);
}
}
/* ===================== 01–03 境界の最終調整 =====================
.scene の共通 margin-block からbodyの淡色背景が帯状に見えていた。
01と全幅写真の02は連続するシーンとして接続し、余分な帯を出さない。 */
.scene--request,
.scene--karaoke {
margin-block: 0;
}
/* ===================== セクション間の隙間を閉じる =====================
実測すると 02 以降すべての境界に約24pxの隙間があり、
body の地（linear-gradient の #eadbff）が薄紫の帯として出ていた。
暗い写真セクション（02・04）の下でとくに目立つ。
PCでは各セクションを突き合わせる。SPのカード表現はそのまま。 */
@media (min-width: 768px) {
.scene,
.information-section,
.final-night {
margin-top: 0;
margin-bottom: 0;
}
}
/* ===================== 05：写真を外して余白を整える =====================
右の列だった写真を外したので、2カラムのままだと右half が空く。
紙1枚を中央に置き、読む幅を本文として適正な範囲に収める。 */
@media (min-width: 880px) {
.price-zone__in {
display: block;
max-width: 760px;
}
/* 箔シールは紙の右上角に戻す */
.price-foil {
left: auto;
right: clamp(-8px, -0.4vw, 0px);
top: clamp(-12px, -0.8vw, -4px);
}
}
/* ===================== 01：写真を紙より控えめに =====================
実測 紙529px / 写真476px で、面積比は 0.94倍。
ほぼ互角で「紙が主、写真が従」の関係が出ていなかった。
列比を 53:47 → 60:40 にして、傾きも右へ少し強める。 */
@media (min-width: 880px) {
/* 60:40 でもまだ写真が強かったので、もう一段紙へ寄せる */
.scene--request .scene__in.request-layout {
grid-template-columns: minmax(0, 64%) minmax(0, 1fr);
}
.request-photo,
.reveal-ready .request-photo[data-reveal].is-in {
transform:
translate3d(0, calc(var(--scene-y-reverse, 0px) * 0.6), 0)
rotate(4deg)
scale(calc(1 + 0.035 * var(--s-photo, 0)));
transition: none;
}
}
/* 100 の数字ブロックを外したので、price-main は情報1列だけになった。
入れ子の箱を1つ減らし、要素間を一定のリズムで積む */
.price-main { display: block; margin-top: clamp(18px, 2.2vw, 28px); }
/* flex-start だと金額の表も注記も中身の幅までしか伸びず、
紙の右半分が空いて見えた。幅は紙に沿わせ、
「物」であるボタンだけ左に置く。 */
.price-info {
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(18px, 2.2vw, 26px);
padding-bottom: 0;
}
.price-info .lead-ami,
.price-info .ink-button { align-self: flex-start; }
.price-info .plan-prices { margin: 0; }
/* ===================== シールの影を外す =====================
支給素材は絵柄自体が白フチと光彩を持っている。そこへ
drop-shadow を掛けると、輪郭が柔らかいラスターなので
影が形に沿わず「薄い黒のもや」として全体に広がっていた。 */
.y2k-sticker { filter: none; }
/* ===================== 型：もう一段上げる =====================
40px は数字としては一般的なLPのレンジだが、この誌面では
小さく見える。紙の面が広く（500〜700px）、セクションが
1画面ずつあるため、40pxだと画面に占める割合が小さい。
56/70pxが「デカすぎ」、40pxが「小さい」だったので、
その間の 48px を基準にする。本文も1px上げて釣り合いを保つ。 */
.paper-h,
.play-copy .paper-h,
.scene-title,
.scene--karaoke .scene-title,
.final-night__content h2,
.info-heading h2 {
font-size: clamp(1.7rem, 3.5vw, 3rem);
}
.scene-text,
.request-copy .scene-text,
.play-copy .scene-text,
.scene--karaoke .scene-text,
.final-night__content > p {
font-size: clamp(15px, 1.4vw, 18px);
}
.y2k-sticker__surface img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 640 / 469;
}
/* ===================== 05 リードの網掛け =====================
実測: 文字 15px / 色 #2a2040 の真下に
rgba(37,25,63,.5) の点（半径1.05px）を敷いていた。
点と字画が同じ太さで干渉し、読みにくくなっていた。
コード内に「12.5pxの下に点を敷くと必ず沈む」と書いて
SPだけ平網に逃がしてあったが、PCでも同じことが起きていた。
全幅で平網＋左の罫に統一する。紫も同時に外す。 */
.lead-ami,
.price-info .lead-ami {
padding: 9px 14px 10px 13px;
border-left: 3px solid var(--print-accent);
background-image: none;
background-color: rgba(35, 24, 21, 0.055);
color: var(--print-ink);
font-size: clamp(13px, 1.15vw, 15px);
line-height: 1.65;
}
/* ===================== 05 シールの沈み =====================
山吹イエロー(#ffd233)は紙のクリーム(#fbf7ee)と明度が近く、
紙に乗った半分が沈んでいた（背景の藤色に乗った半分は読める）。
白フチは藤色との分離には効くが、クリームとの分離には効かない。
字そのものを一段深い琥珀に落とし、押し出しを濃い茶へ伸ばす。 */
.price-foil {
width: clamp(132px, 13vw, 168px);
}
/* ===================== 05 CTAをホバーで押し込む =====================
:active と同じ「押された状態」をホバーでも見せる。
box-shadow の 3px が土台なので、その分だけ沈めて影を1pxに
落とすと、実際に押し込まれたように見える。
タッチ環境では hover が張り付くので (hover: hover) で囲う。 */
@media (hover: hover) and (pointer: fine) {
.price-info .ink-button {
transition:
transform 120ms var(--ease-out),
box-shadow 120ms var(--ease-out);
}
.price-info .ink-button:hover {
/* rotate を書かないと基準の傾き(-0.8deg)が消えて
ホバーの瞬間だけ水平に戻ってしまう */
transform: rotate(-0.8deg) translateY(2px);
box-shadow: 0 1px 0 #9c1550;
}
.price-info .ink-button:hover i { color: #fff; }
}
/* ===================== 06 の下：記憶の壁 =====================
06 は情報が「表」で、ページ内で唯一 photography も動きも無い面
だった。読み終えるとそのまま07の暗い写真へ落ちる。
FVが「たくさん作れそう」に見えるのは断片の数なので、
ここも大きい絵1枚ではなく、断片を横に流して量で見せる。
04 のプリクラ帯と同じ仕組み（複製した組を translate で送る）。 */
.wall {
position: relative;
overflow: hidden;
padding: clamp(18px, 2.6vw, 34px) 0 clamp(26px, 3.4vw, 44px);
/* 紙面と07の暗い写真の間の踊り場。地は触らず、端だけ落とす */
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wall__track {
display: flex;
width: max-content;
}
.wall__set {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: clamp(12px, 1.4vw, 22px);
padding-right: clamp(12px, 1.4vw, 22px);
}
/* 1枚ずつがプリント。白フチと落ち影で「貼った物」にする */
.wall__cell {
display: block;
flex: 0 0 auto;
width: clamp(104px, 11vw, 158px);
padding: 7px 7px 9px;
background: var(--paper-photo);
box-shadow: 0 2px 3px rgba(37, 25, 63, 0.24), 0 12px 22px rgba(37, 25, 63, 0.26);
}
.wall__cell img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* 角度は1枚ずつ振る。等間隔に見せないための最小限のばらつき */
.wall__cell:nth-child(4n + 1) { transform: rotate(-2.4deg); }
.wall__cell:nth-child(4n + 2) { transform: rotate(1.8deg); }
.wall__cell:nth-child(4n + 3) { transform: rotate(-1.2deg); }
.wall__cell:nth-child(4n + 4) { transform: rotate(2.6deg); }
/* 空の1枠。ここだけ中身が無く、読み手を指す */
.wall__cell--you {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
border: 2px dashed rgba(176, 23, 94, 0.5);
background: rgba(255, 255, 255, 0.55);
}
.wall__cell--you b {
color: var(--print-accent);
font-family: var(--font-hand);
font-size: clamp(13px, 1.2vw, 16px);
font-weight: 700;
line-height: 1.5;
text-align: center;
}
@keyframes wall-flow {
from { transform: translate3d(0, 0, 0); }
/* 2組なので半分送ると次の同一組が同じ位置に来る */
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
.wall__track { animation: wall-flow 64s linear infinite; }
}
/* ===================== 見出しのジャケット加工（案3） =====================
白抜き／マゼンタのフチ／シアンの版ズレ。
掛けるのは 02・04・07 の全面写真3つだけ。あそこが感情の山で、
紙面の4つ（01・03・05・06）は情報を読ませる面なので変えない。
7つ全部に掛けると山が消え、読みにくさの指摘も再発する。
実装は擬似要素の複製ではなく、字そのものへ縁取りと影を当てる。
02・04 の見出しは JS が行マスク（.ln > i）に割っているので、
attr() の複製だと行が再現できず、リビールとも噛み合わない。
-webkit-text-stroke + paint-order なら行マスクのまま効く。
text-shadow は字の後ろに出るので、そのまま版ズレになる。 */
.scene--karaoke .scene-title,
.scene--new-memory .scene-title,
.memory-copy .scene-title,
.final-night__content h2 {
font-family: var(--font-display);
font-weight: 400;
color: #fffdf7;
-webkit-text-stroke: 9px var(--magenta);
paint-order: stroke fill;
text-shadow:
-3px -3px 0 rgba(0, 168, 204, 0.55),
0 5px 0 rgba(74, 4, 44, 0.5);
/* 丸ゴシックは字面が大きいので、ゴシック900より一段落とす */
font-size: clamp(1.6rem, 3.2vw, 2.75rem);
letter-spacing: 0.012em;
line-height: 1.36;
}
@media (max-width: 767px) {
.scene--karaoke .scene-title,
.scene--new-memory .scene-title,
.memory-copy .scene-title,
.final-night__content h2 {
/* 細い画面では9pxのフチが字を潰す */
-webkit-text-stroke-width: 6px;
text-shadow:
-2px -2px 0 rgba(0, 168, 204, 0.55),
0 3px 0 rgba(74, 4, 44, 0.5);
}
}
/* ===================== 05 のシールを画像へ =====================
CSSで組んだ「もう1回！」は、丸ゴシックに押し出しの影を
重ねただけで、03・04の支給素材と質感が揃わなかった。
支給の One More Time（オレンジ／グリッター）に差し替える。
03がピンク、04がホロなので、色の反復も断てる。
絵柄が自前でフチと光沢を持つため、こちらで足すのは落ち影だけ。 */
.price-foil {
width: clamp(150px, 17vw, 260px);
filter: drop-shadow(0 8px 13px rgba(74, 10, 50, 0.34));
}
.price-foil img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 560 / 418;
}
/* ===================== 書体を3声に整理 =====================
実測: Shippori Mincho は 109KB / 10ファイル落ちてくるのに、
使っているのは柱の英字7個（全部10.5px）だけだった。
10.5pxのラテンでは明朝である利点がほぼ出ない。撤去する。
Mochiy Pop One は「叫ぶ声」（02・04・07の見出し）に専念させ、
UI部品であるCTAボタンからは外す。
地の文 Zen Kaku Gothic New
叫ぶ Mochiy Pop One
手書き Zen Kurenaido */
/* --- 柱の英字。明朝をやめ、字間で「添え物」の格を作る --- */
.scene-label em {
font-family: var(--font-main);
font-weight: 500;
letter-spacing: 0.24em;
}
/* --- CTAは丸ゴシックのまま残す --- */
/* 一度は角ゴシックへ変えたが戻した。予約ボタンはページで最も
重要な要素で、丸ゴシックが持っていた愛嬌を汎用UIの見た目に
落としてしまっていた。見出しと同じ書体になるが、ボタンは
押す部品なので役割は混同されない。 */
/* --- 手書きは「声」の要素に限る --- */
/* 一度は注記まで広げたが戻した。
「※ 料金はエリア・曜日によって異なります」は読者が信頼して
読む情報で、手書き体は casual に振れすぎる。可読性の面でも
不利。手書きはキャプション（写真に添えた一言）に置く。 */
.print figcaption,
.scene-photo figcaption {
font-family: var(--font-hand);
}
/* ===================== シールを剥がして動かす =====================
位置は transform ではなく CSS の独立した translate プロパティで
与える。シールは全部 transform: rotate() を持っていて、
しかもその指定が複数ルールに散っているため、transform を
奪うと回転や登場アニメが壊れる。
translate は transform より先に、親の座標系で適用されるので、
回転角に関係なく「画面上でまっすぐ」動く。 */
[data-peel] {
translate: var(--peel-x, 0px) var(--peel-y, 0px);
pointer-events: auto;
cursor: grab;
/* 掴んでいる間だけ画像のドラッグ既定動作を止める */
-webkit-user-select: none;
user-select: none;
}
[data-peel] img { pointer-events: none; }
/* 持ち上がった状態。実際に指から浮いたように見せる */
[data-peel].is-lifted {
z-index: 40;
cursor: grabbing;
filter: drop-shadow(0 18px 22px rgba(20, 6, 30, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
[data-peel] {
transition: scale 160ms var(--ease-back), filter 160ms var(--ease-out);
}
[data-peel].is-lifted { scale: 1.08; }
/* 掴んでいる最中は追従を遅らせない */
[data-peel].is-dragging { transition: none; }
}
/* 長押しで持ち上がる直前の予兆。押している実感を出す */
[data-peel].is-arming { scale: 0.97; }
/* ===================== 剥がれる手応え =====================
持ち上げるだけでは「浮いた」に留まり、剥がした感じが出ない。
掴んだ側の辺が紙から浮くように、3Dで傾ける。
transform は回転（rotate(5deg)など）が使っているので触れない。
独立した rotate プロパティを使う。これは transform より先に
適用され、両方が合成される。3Dを効かせるため、親に
perspective を置く（要素側に perspective() を書くと
transform を奪ってしまうため）。 */
.scene--play,
.album__ink,
.price-zone__in {
perspective: 900px;
}
[data-peel] {
/* JSが掴んだ位置から軸と符号を決める */
rotate: var(--peel-ax, 1) var(--peel-ay, 0) 0 var(--peel-deg, 0deg);
transform-origin: var(--peel-ox, 50%) var(--peel-oy, 50%);
}
@media (prefers-reduced-motion: no-preference) {
[data-peel] {
transition:
scale 200ms var(--ease-back),
rotate 200ms var(--ease-out),
filter 200ms var(--ease-out);
}
[data-peel].is-dragging { transition: none; }
}
/* 剥がれている間は、浮いた辺の側に影を落として厚みを見せる */
[data-peel].is-lifted {
filter:
drop-shadow(
calc(var(--peel-sx, 0) * 14px) calc(var(--peel-sy, 1) * 16px) 16px
rgba(20, 6, 30, 0.52)
);
}
/* ===================== SPの写真を小さくする =====================
実測すると 01・03 とも写真が画面幅の91%（355px）を占め、
紙と同じ幅で並んでいた。紙が主・写真が従の関係が出ないうえ、
縦スクロールで写真が場所を取りすぎる。
幅を絞って中央に置き、紙との差をつける。 */
@media (max-width: 767px) {
.request-photo {
position: relative;
z-index: 0;
isolation: isolate;
width: min(86%, 334px);
margin-inline: auto;
padding: 5px 5px 20px;
border: 1px solid rgba(35, 24, 21, 0.72);
background: #fffdf8;
box-shadow: var(--shadow-photo);
}
.request-photo::after { display: none; }
.request-photo__chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 29px;
margin: 0 0 5px;
padding: 0 4px 0 9px;
border: 1px solid #3d3351;
background: linear-gradient(90deg, #83b9f3 0%, #b4a7ee 48%, #f07dbc 100%);
color: #231815;
font-family: var(--font-main);
font-size: 9px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.07em;
}
.request-photo__chrome > span {
display: flex;
flex: 0 0 auto;
gap: 3px;
}
.request-photo__chrome i {
display: grid;
place-items: center;
width: 19px;
height: 19px;
border: 1px solid #3d3351;
background: rgba(255, 255, 255, 0.78);
box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(61, 51, 81, 0.2);
font-family: Arial, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 1;
}
.request-photo__chrome i:last-child {
background: #ff78af;
color: #281a2a;
}
/* inset(0)のままだとReveal完了後も外側の影が切れる。
負のinsetでプリントの色影まで描画範囲へ含める。
奥に重ねた2枚目とシールも範囲に入れる必要があるので、
矩形で切るのはやめて none にする。 */
.reveal-ready .request-photo[data-reveal].is-in { clip-path: none; }
.scene--request .request-layout { gap: 28px; }
/* 幅が減るぶん、高さの下限も下げる（余った箱が出ないように） */
.request-photo { min-height: 0; }
.request-photo img,
.play-photo img { aspect-ratio: 4 / 3; }
}
/* ===================== 05と06の境界を繋ぐ =====================
05 と 06 はそれぞれ別の linear-gradient を地に持っていた。
05: #86dbe6 → #b2abe9 → #e8a9c9（水色→藤→桃）
06: #a8ddd7 → #a6cae7 → #dcc4e8（青緑→水色→藤）
端の色が合わないので境界に硬い線が出て、06の上下が
水色の帯として分かれて見えていた。
background-attachment: fixed で揃える手もあるが、iOSで
不具合が出やすい。2つを1枚のラッパーで包み、地はそこに
1回だけ置く。継ぎ目そのものが存在しなくなる。
水色の起点(#86dbe6)も外し、藤〜桃だけで通す。 */
.info-zone {
position: relative;
background:
radial-gradient(circle at 13% 6%, rgba(255, 244, 235, 0.6), transparent 26%),
radial-gradient(circle at 88% 42%, rgba(255, 225, 240, 0.72), transparent 30%),
radial-gradient(circle at 20% 88%, rgba(231, 218, 255, 0.66), transparent 28%),
linear-gradient(168deg, #c9bdf0 0%, #cdb6e4 46%, #e8a9c9 100%);
}
/* 中の2セクションは地を持たない */
.price-zone,
.event-zone {
background: none;
}
/* ===================== 一番下のピンクを消す =====================
body の padding-bottom: 72px（固定CTAバーの逃げ場）が、
フッターより下に body の地（グラデ末端の桃色）を見せていた。
逃げ場はフッターの内側に持たせる。 */
body { padding-bottom: 0; }
.foot {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* 地をラッパーへ移したので、中の2セクションが持っていた
枠（1pxの白線）・角丸・影は意味を失い、境界で線として
見えていた。ラッパー側に一本化する。
グリッドの目も、セクションごとに引き直すと境界が出るので
ラッパーで1回だけ引く。 */
.info-zone .price-zone,
.info-zone .event-zone {
margin-block: 0;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.info-zone .price-zone::before,
.info-zone .event-zone::before { display: none; }
.info-zone::before {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent 64%);
content: "";
}
/* --- 2) 05：シールを見出しに重ねない --- */
/* 紙の右上角へ、見出しより上の帯に収める。
補助装飾なので見出しより強くしない（サイズを一段落とす） */
@media (min-width: 880px) {
.price-foil {
right: clamp(-6px, -0.3vw, 0px);
top: auto;
bottom: auto;
width: clamp(118px, 12vw, 168px);
/* 紙の上辺にまたがる位置。見出しの帯には入らない */
transform: translateY(-46%) rotate(7deg);
}
}
@media (max-width: 879px) {
.price-foil {
right: 6px;
width: clamp(96px, 26vw, 124px);
transform: translateY(-42%) rotate(7deg) scale(1);
}
}
/* 05：紙面上辺へ明示的に固定し、見出しの文字領域から外す。 */
@media (min-width: 880px) {
.price-foil {
top: -34px;
transform: rotate(7deg);
}
}
@media (max-width: 879px) {
.price-foil {
top: -12px;
right: -4px;
width: clamp(88px, 23vw, 104px);
transform: rotate(7deg);
}
}
/* 06：長いリーダー罫を短くし、ラベルと値を一つの情報群として読む。 */
@media (min-width: 768px) {
.event-sheet .event-list {
width: min(820px, 100%);
margin-inline: auto;
}
.event-sheet .event-list > div {
grid-template-columns: 108px minmax(32px, 1fr) minmax(190px, 280px);
}
}
/* フッター：見た目の12pxは保ち、透明な余白でタップ領域を確保。 */
.foot nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
@media (max-width: 767px) {
.foot nav { gap: 0 12px; }
}
/* ===================== 写真セクションの見出し書体統一 =====================
02・04・07だけ丸みの強いディスプレイ書体だったため、
01・03・05・06と同じ太い角ゴシックへ揃える。
写真上の白抜きと版ズレ表現は可読性とシーンの強弱として残す。 */
.scene--karaoke .scene-title,
.scene--new-memory .scene-title,
.memory-copy .scene-title,
.final-night__content h2 {
font-family: var(--font-main);
font-weight: 900;
width: fit-content;
padding: 0.1em 0.24em 0.16em;
background: rgba(251, 247, 238, 0.94);
color: var(--print-ink);
-webkit-text-stroke: 0;
paint-order: normal;
text-shadow: none;
letter-spacing: -0.045em;
line-height: 1.28;
}
/* 04：プリクラ写真はメイン写真の下部を横切り、右から左へ流す。
4組の同一セットを1組分だけ送るため、継ぎ目なくループする。 */
@keyframes purikura-flow-x {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-25%, 0, 0); }
}
/* 02・04：写真セクションの白い見出し箱を撤去する最終指定。 */
.scene--karaoke .scene-title,
.scene--new-memory .scene-title,
.memory-copy .scene-title {
padding: 0;
background: transparent;
color: var(--magenta-bright);
text-shadow: 0 2px 0 rgba(7, 8, 10, 0.72);
}
/* 02：写真上の文字へ付けていた黒いシャドウを撤去。 */
.scene--karaoke .scene-title,
.scene--karaoke .scene-text {
text-shadow: none;
}
/* 07 SP：上マージンからbodyの水色地が帯状に見えていたため、
06の終端と最終写真を直接つなぐ。 */
@media (max-width: 767px) {
.final-night {
margin-top: 0;
margin-bottom: 0;
}
}
/* CTAを外したので、06の情報リストの下に余白を足して
紙のちぎれ口との間を持たせる */
.event-sheet .event-list { margin-bottom: clamp(6px, 1vw, 14px); }
/* SP：PRICEのシールを8pxだけ画面外へ出す既存指定が、
ページ全体の横スクロールを作っていた。セクション内でだけ切る。 */
@media (max-width: 767px) {
.info-zone .price-zone { overflow: clip; }
}
/* ===================== 01 の写真まわりを埋める =====================
SPで下半分に要素が1つしか無く、藤色の地に写真が浮いて
寂しく見えていた。写真を2枚重ねにして「量」を出し、
窓枠にシールを掛けて密度を上げる。
新規素材もコピーの追加もしない。 */
/* --- A) 奥にもう1枚。角だけ見せる --- */
.request-photo { position: relative; }
.request-photo__back {
position: absolute;
z-index: -1;
/* 横へ逃がすと、SPでは画面端(390px)で切れて帯にしか見えない。
下へずらして「白フチ＋写真の下辺」を広く見せる。
アルバムに2枚挟んだ見え方はこちらの方が伝わる。 */
right: 10px;
bottom: -46px;
left: 22%;
display: block;
padding: 6px 6px 8px;
background: var(--paper-photo);
box-shadow: 0 2px 3px rgba(37, 25, 63, 0.22), 0 12px 22px rgba(37, 25, 63, 0.26);
transform: rotate(4.2deg);
}
.request-photo__back img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* --- B) 窓枠に掛けるシール --- */
/* 04の .seal--* の型を使うが、位置は01の箱基準で上書きする */
.request-seal {
position: absolute;
z-index: 5;
}
.request-seal--heart {
right: auto;
bottom: auto;
left: -13px;
top: 16%;
width: clamp(26px, 7vw, 34px);
transform: rotate(-14deg);
}
/* PCではCDと役割が重なるので、キラだけ落とす */
@media (min-width: 880px) {
/* PCは横幅に余裕があるので右下へ振る */
.request-photo__back { left: 46%; right: -40px; bottom: -38px; }
}
/* SPは写真の直下でセクションが終わり、2枚目が入る隙間が無かった。
下に余白を足して、重ねた1枚が見える場所を作る。 */
@media (max-width: 879px) {
.scene--request .scene__in { padding-bottom: clamp(46px, 12vw, 68px); }
.request-photo__back {
left: 16%;
right: 4px;
bottom: -40px;
transform: rotate(5deg);
}
}
/* 01のA＋B装飾はSP専用。PCでは既存CDと競合するため隠す。
追加装飾の共通指定より後ろに置いて確実に上書きする。 */
@media (min-width: 768px) {
.request-photo__back,
.request-seal,
.request-chrome { display: none; }
}
/* ===================== 01 / SPの左右余白を埋める =====================
2枚目を下へ足すだけでは横の空間量は変わらなかったため、
写真そのものを画面幅へ近づけ、奥写真とクロームを左右へ逃がす。
クロームは写真に接続する2点だけ。散らして装飾量を増やさない。 */
.request-chrome { display: none; }
.request-photo__holo { display: none; }
@media (max-width: 767px) {
.request-photo,
.reveal-ready .request-photo[data-reveal].is-in {
left: 50%;
width: min(calc(100vw - 28px), 362px);
max-width: none;
margin-inline: 0;
translate: -50% 0;
}
.request-photo { padding-bottom: 5px; }
.request-photo__back {
display: none;
}
.request-photo__holo {
position: absolute;
z-index: -1;
top: -8px;
right: -12px;
bottom: -16px;
left: -12px;
display: block;
border: 1px solid rgba(255, 255, 255, 0.86);
background:
linear-gradient(118deg, transparent 8%, rgba(255, 255, 255, 0.72) 24%, transparent 37%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 7px),
linear-gradient(132deg, #69dce8 0%, #f3a5d1 54%, #ffe69a 100%);
box-shadow: 0 8px 18px rgba(37, 25, 63, 0.22);
transform: rotate(-2.2deg);
}
.request-photo > img {
position: relative;
z-index: 2;
}
.request-photo__chrome,
.request-photo figcaption {
position: relative;
z-index: 4;
}
.request-chrome {
position: absolute;
display: block;
pointer-events: none;
}
.request-chrome img {
display: block;
width: 100%;
height: auto;
}
.request-chrome--orbit {
z-index: 5;
top: auto;
right: auto;
bottom: 18%;
left: -34px;
width: clamp(86px, 24vw, 102px);
transform: rotate(-6deg);
}
.request-seal--heart {
z-index: 6;
top: 40px;
right: -7px;
bottom: auto;
left: auto;
width: clamp(26px, 7vw, 30px);
transform: rotate(-12deg);
}
.scene--request .scene__in {
padding-bottom: clamp(64px, 17vw, 88px);
}
}
/* ===================== 01 / SPを全面写真シーンへ =====================
02と同じく写真を背景として使い、コピーを写真上へ重ねる。
PLAYERは01固有の体験なので消さず、視線の終点として下部に置く。 */
@media (max-width: 767px) {
.scene--request {
position: relative;
min-height: 700px;
overflow: hidden;
background: #0e0b0d;
}
.scene--request .scene__in.request-layout {
position: relative;
display: grid;
align-items: end;
min-height: 700px;
padding: 0;
overflow: hidden;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: absolute;
inset: 0;
left: 0;
z-index: 0;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: #0e0b0d;
box-shadow: none;
overflow: hidden;
clip-path: none;
translate: 0 0;
rotate: 0deg;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 54% 50%;
transform: scale(1.02);
}
.scene--request .request-photo::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
background:
linear-gradient(180deg, rgba(7, 8, 10, 0.08) 0%, rgba(7, 8, 10, 0.2) 34%, rgba(7, 8, 10, 0.9) 100%),
linear-gradient(90deg, rgba(7, 8, 10, 0.48), transparent 72%);
content: "";
}
.scene--request :is(
.request-photo__holo,
.request-photo__back,
.request-photo__chrome,
.request-chrome,
.request-seal
) {
display: none;
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
align-self: end;
width: 100%;
margin: 0;
padding: clamp(170px, 46vw, 220px) 18px clamp(58px, 15vw, 76px);
color: #fff;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
transform: none;
}
.scene--request .request-copy :is(.sheet__fiber, .tape) {
display: none;
}
.scene--request .request-copy .sheet__face {
padding: 0;
background: transparent;
box-shadow: none;
clip-path: none;
}
.scene--request .request-copy .scene-label {
color: rgba(255, 255, 255, 0.78);
}
.scene--request .request-copy .scene-label :is(b, span) {
color: #ff4a94;
}
.scene--request .request-copy .paper-h {
max-width: 12em;
margin: 18px 0 0;
color: #ff4a94;
font-family: var(--font-main);
font-size: clamp(1.85rem, 8.8vw, 2.35rem);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.055em;
text-shadow: 0 2px 0 rgba(7, 8, 10, 0.76);
}
.scene--request .request-copy .scene-text {
max-width: 30em;
margin-top: 14px;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-main);
font-size: 14px;
font-weight: 700;
line-height: 1.72;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92);
}
}
/* ===================== 02 / 客入りが見える動画位置 =====================
縦動画の中央を使うと天井が大半を占めるため、焦点を下へ移す。
全面の暗幕は使わず、文字がある左側だけ暗さを残す。 */
.scene--karaoke .karaoke-photo video {
object-position: 50% 66%;
filter: brightness(1.68) contrast(0.74) saturate(1.08);
}
.scene--karaoke .karaoke-photo::after {
background:
linear-gradient(90deg, rgba(7, 8, 10, 0.38), rgba(7, 8, 10, 0.06) 52%, transparent 72%),
linear-gradient(180deg, transparent 56%, rgba(7, 8, 10, 0.12));
}
@media (max-width: 767px) {
.scene--karaoke .karaoke-photo video {
object-position: 50% 70%;
}
.scene--karaoke .karaoke-photo::after {
background:
linear-gradient(180deg, rgba(7, 8, 10, 0.02), transparent 68%, rgba(7, 8, 10, 0.1));
}
}
/* ===================== 02 / PLAYシールを引き継ぐ =====================
03の主役だったピンクのシールだけを02へ移動する。動画の客入りと
左側のコピーを隠さず、スクロール視差や常時浮遊は付けない。 */
.scene--karaoke .y2k-sticker--karaoke {
inset: clamp(76px, 7.5vw, 112px) clamp(22px, 4vw, 64px) auto auto;
z-index: 3;
width: clamp(148px, 14vw, 208px);
clip-path: none;
transform: rotate(4deg);
animation: none;
}
.scene--karaoke .y2k-sticker--karaoke .y2k-sticker__surface {
transform: none !important;
animation: none;
}
@media (max-width: 767px) {
.scene--karaoke .y2k-sticker--karaoke {
inset: 72px 8px auto auto;
width: clamp(96px, 29vw, 118px);
transform: rotate(5deg);
}
}
/* ===================== 01 / 横型MD＋写真とコピーの分離 =====================
縦長プレーヤーが紙を押し広げていたため横型へ変更する。
写真は独立した列・段に置き、人物の顔へ文字を重ねない。 */
@media (min-width: 880px) {
.scene--request .scene__in.request-layout {
grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.96fr);
align-items: center;
/* 見出しと写真の間が62pxまで開いて、写真の下は逆に詰まっていた。
上を削って下へ回す */
gap: clamp(26px, 2.6vw, 38px);
padding-block: clamp(68px, 7vw, 96px);
}
.scene--request .request-copy.sheet {
align-self: center;
width: 100%;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
align-self: center;
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
transform: rotate(2deg);
}
.scene--request .request-photo > img {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 50%;
}
}
.scene--request .scene-label {
gap: 0.72em;
font-size: clamp(13px, 1.15vw, 15px);
}
.scene--request .scene-label b { font-size: 1.34em; }
.scene--request .scene-label span { font-size: 1.08em; }
.scene--request .scene-label em { font-size: 0.76em; }
.scene--request .request-copy .paper-h {
max-width: 14em;
font-size: clamp(2.25rem, 3.7vw, 3.35rem);
line-height: 1.14;
letter-spacing: -0.045em;
}
/* SPも写真を上、コピーを下へ分離する。 */
@media (max-width: 767px) {
.scene--request {
min-height: 0;
overflow: hidden;
}
.scene--request .scene__in.request-layout {
display: grid;
grid-template-rows: auto auto;
min-height: 0;
padding: 0;
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
grid-row: 1;
width: 100%;
height: clamp(260px, 76vw, 330px);
aspect-ratio: auto;
transform: none;
}
.scene--request .request-photo > img { object-position: 50% 45%; }
.scene--request .request-photo::after {
background: linear-gradient(180deg, transparent 62%, rgba(7, 8, 10, 0.16));
}
.scene--request .request-copy.sheet {
grid-row: 2;
align-self: auto;
padding: 30px 18px 54px;
background: #0e0b0d;
}
.scene--request .request-copy .scene-label {
margin-bottom: 18px;
font-size: 12.5px;
}
.scene--request .request-copy .paper-h {
max-width: 11em;
margin-top: 0;
font-size: clamp(1.9rem, 8.7vw, 2.35rem);
}
}
/* ===================== 01 / 02と同じ全面写真シーン（PC） =====================
写真を右のカードへ閉じ込めず、セクション全面へ敷く。
人物の顔がある中央は空け、コピーと横型MDは下部へまとめる。 */
@media (min-width: 880px) {
.scene--request {
min-height: min(94vh, 820px);
overflow: hidden;
background: #0e0b0d;
}
.scene--request .scene__in.request-layout {
position: relative;
display: grid;
grid-template-columns: 1fr;
align-items: end;
width: 100%;
max-width: none;
min-height: min(94vh, 820px);
padding: 0;
overflow: hidden;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: #0e0b0d;
box-shadow: none;
clip-path: none;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 50% 48%;
}
.scene--request .request-photo::after {
position: absolute;
inset: 0;
z-index: 2;
display: block;
background:
linear-gradient(180deg, transparent 0 42%, rgba(7, 8, 10, 0.2) 57%, rgba(7, 8, 10, 0.92) 100%),
linear-gradient(90deg, rgba(7, 8, 10, 0.12), transparent 58%);
content: "";
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
align-self: end;
width: min(var(--content-max), 100%);
margin-inline: auto;
padding: clamp(340px, 40vh, 420px) var(--pad-x) clamp(54px, 6vw, 78px);
color: #fff;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
transform: none;
}
.scene--request .request-copy :is(.sheet__fiber, .tape) { display: none; }
.scene--request .request-copy .sheet__face {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
grid-template-rows: auto auto auto;
align-items: end;
column-gap: clamp(34px, 4vw, 60px);
padding: 0;
background: transparent;
box-shadow: none;
clip-path: none;
}
.scene--request .request-copy .scene-label {
grid-column: 1;
grid-row: 1;
margin-bottom: 16px;
padding: 0;
border: 0;
color: rgba(255, 255, 255, 0.82);
}
.scene--request .request-copy .scene-label b,
.scene--request .request-copy .scene-label span { color: #ff4a94; }
.scene--request .request-copy .paper-h {
grid-column: 1;
grid-row: 2;
max-width: 11em;
margin: 0;
color: #ff4a94;
font-size: clamp(2.25rem, 3.8vw, 3.35rem);
text-shadow: 0 2px 0 rgba(7, 8, 10, 0.72);
}
.scene--request .request-copy .scene-text {
grid-column: 1;
grid-row: 3;
max-width: 32em;
margin-top: 16px;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
}
/* ===================== 02 / 最終配置 ===================== */
.scene--karaoke .karaoke-copy {
align-self: end;
width: 100%;
max-width: none;
margin: 0;
padding: 0 clamp(28px, 4vw, 56px) clamp(52px, 5.5vw, 76px);
}
.scene--karaoke .scene-label--number-only {
gap: 12px;
margin-bottom: clamp(20px, 2.2vw, 28px);
font-size: clamp(19px, 1.8vw, 24px);
}
.scene--karaoke .scene-label--number-only b {
color: #ff4a94;
font-size: 1em;
letter-spacing: 0.03em;
}
.scene--karaoke .scene-label--number-only i {
width: clamp(34px, 4vw, 52px);
height: 2px;
background: #ff4a94;
opacity: 0.72;
}
.scene--karaoke .y2k-sticker--karaoke {
inset: clamp(18px, 2vw, 28px) clamp(12px, 2vw, 28px) auto auto;
width: clamp(220px, 20vw, 280px);
transform: rotate(4deg);
}
@media (max-width: 767px) {
.scene--karaoke .karaoke-copy { padding: 28px 18px 54px; }
.scene--karaoke .scene-label--number-only {
margin-bottom: 18px;
font-size: 18px;
}
.scene--karaoke .scene-label--number-only i { width: 30px; }
.scene--karaoke .y2k-sticker--karaoke {
inset: 18px 4px auto auto;
width: clamp(132px, 37vw, 148px);
transform: rotate(5deg);
}
}
/* ===================== 01 ポータブルMD =====================
前案はHDDプレーヤー型（縦長バー＋大画面）で、iPod以降の
記号になっていた。MDディスクは72mm角なので、本体は平たい
正方形になる。当時の作法どおり、曲名と時間は本体ではなく
有線リモコンの液晶に出す。
ブランドマークは入れない（商標）。 */
.md {
position: relative;
display: block;
width: min(100%, 340px);
margin: clamp(16px, 2.2vw, 24px) 0 0;
padding: 46px 0 18px;
aspect-ratio: 340 / 300;
}
@media (max-width: 879px) {
.md { width: 100%; }
}
/* ===================== 03 料金：右に写真を立てる =====================
実測では 1440px の画面に紙632pxが1枚だけで、左右に約400pxずつ、
上下に96pxずつの空きがあった。01と同じ二段構えにして幅を使う。
PLAY TOGETHER と NEW MEMORY を削ったぶん、ページ全体で
写真の登場が減っているので、その補填も兼ねる。 */
@media (min-width: 880px) {
.price-zone__in {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
align-items: center;
gap: clamp(28px, 4vw, 66px);
max-width: min(var(--content-max), 100%);
}
.price-photo {
position: relative;
z-index: 2;
margin: 0;
padding: 9px 9px 12px;
background: var(--paper-photo);
box-shadow:
0 2px 3px rgba(37, 25, 63, 0.22),
0 16px 30px rgba(37, 25, 63, 0.28);
transform: rotate(2.2deg);
}
.price-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.price-photo figcaption {
padding-top: 7px;
color: var(--print-accent);
font-family: var(--font-hand);
font-size: 13px;
text-align: center;
}
/* シールは紙と写真の継ぎ目へ */
.price-foil { right: auto; left: 54%; }
}
/* SPは縦積み。写真は幅を抑える */
@media (max-width: 879px) {
.price-photo {
width: min(78%, 300px);
margin: 22px auto 0;
padding: 7px 7px 10px;
background: var(--paper-photo);
box-shadow: 0 2px 3px rgba(37, 25, 63, 0.22), 0 12px 22px rgba(37, 25, 63, 0.26);
transform: rotate(-2.4deg);
}
.price-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.price-photo figcaption {
padding-top: 6px;
color: var(--print-accent);
font-family: var(--font-hand);
font-size: 12px;
text-align: center;
}
}
/* 右カラムの上端に置くと人物の顔に重なる。
卓の高さまで下げて、物が置かれているように見せる。 */
@media (min-width: 880px) {
.md { align-self: end; margin-top: clamp(90px, 12vw, 150px); }
}
/* ===================== 01 / MD 最終配置 =====================
HTMLを正方形MD＋有線リモコンへ変更したあとも、01のグリッドだけ
旧 .mdplayer を参照していたため、MDが独立した行を作って全体が崩れていた。
本体は当時の72mmメディアに近い正方形のまま、リモコンと横に並べる。 */
.scene--request .md {
position: relative;
display: block;
width: min(100%, 560px);
height: 230px;
min-height: 0;
margin: 0;
padding: 0;
aspect-ratio: auto;
isolation: isolate;
}
@media (min-width: 880px) {
.scene--request .request-copy .sheet__face {
transform: translateY(-40px);
}
.scene--request .md {
grid-column: 2;
grid-row: 1 / 4;
align-self: end;
justify-self: end;
margin: 0;
}
}
@media (max-width: 879px) {
.scene--request .md {
width: min(100%, 360px);
height: 176px;
margin: 22px auto 0;
}
}
@media (max-width: 380px) {
.scene--request .md { height: 164px; }
}
/* ===================== 01 / 02 を03と同じ地へ =====================
SPでは写真とコピーが上下に分かれるため、コピー側にだけ黒い面が
残っていた。03（.info-zone）と同じ藤〜桃の地とグリッドを使う。 */
.scene--request,
.scene--karaoke {
background:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
radial-gradient(circle at 13% 6%, rgba(255, 244, 235, 0.6), transparent 26%),
radial-gradient(circle at 88% 42%, rgba(255, 225, 240, 0.72), transparent 30%),
radial-gradient(circle at 20% 88%, rgba(231, 218, 255, 0.66), transparent 28%),
linear-gradient(168deg, #c9bdf0 0%, #cdb6e4 46%, #e8a9c9 100%);
background-size: 34px 34px, 34px 34px, auto, auto, auto, auto;
}
.scene--request .request-photo { background: transparent; }
/* PCは写真の上に文字を置くため、写真内だけに浅い陰影を残す。 */
.scene--request .request-photo::after {
background:
linear-gradient(180deg, transparent 0 43%, rgba(50, 37, 61, 0.1) 57%, rgba(50, 37, 61, 0.8) 100%),
linear-gradient(90deg, rgba(45, 33, 56, 0.18), transparent 60%);
}
.scene--karaoke .karaoke-photo::after {
background:
linear-gradient(90deg, rgba(46, 34, 58, 0.55), rgba(46, 34, 58, 0.12) 50%, transparent 74%),
linear-gradient(180deg, transparent 48%, rgba(52, 37, 61, 0.6));
}
@media (max-width: 879px) {
/* SPはコピーが写真外へ出るので、写真の暗幕はほぼ不要。 */
.scene--request .request-copy.sheet {
background: transparent;
}
.scene--request .request-photo::after {
background: linear-gradient(180deg, transparent 76%, rgba(55, 41, 67, 0.18));
}
.scene--karaoke .karaoke-photo::after {
background: linear-gradient(180deg, transparent 72%, rgba(55, 41, 67, 0.2));
}
.scene--request .request-copy .scene-label,
.scene--karaoke .scene-label--number-only {
color: var(--print-sub);
text-shadow: none;
}
.scene--request .request-copy .scene-label b,
.scene--request .request-copy .scene-label span,
.scene--karaoke .scene-label--number-only b {
color: var(--print-accent);
}
.scene--request .request-copy .paper-h,
.scene--karaoke .scene-title {
color: var(--print-accent);
text-shadow: none;
}
.scene--request .request-copy .scene-text,
.scene--karaoke .scene-text {
color: var(--print-ink);
text-shadow: none;
}
}
/* 768〜879pxの02はコピーが写真上に残る。後段のSP色指定より優先する。 */
@media (min-width: 768px) and (max-width: 879px) {
.scene--karaoke .scene-label--number-only {
color: rgba(255, 255, 255, 0.82);
}
.scene--karaoke .scene-label--number-only b,
.scene--karaoke .scene-title {
color: #ff4a94;
}
.scene--karaoke .scene-title {
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
}
.scene--karaoke .scene-text {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}
}
@media (min-width: 880px) {
.scene--request .request-copy .sheet__face {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.scene--request .request-copy .md {
width: min(48%, 560px);
pointer-events: auto;
}
}
@media (max-width: 879px) {
.scene--request {
min-height: 0;
overflow: hidden;
}
.scene--request .scene__in.request-layout {
display: grid;
grid-template-rows: auto auto;
min-height: 0;
padding: 0;
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
grid-row: 1;
width: 100%;
max-width: none;
height: clamp(430px, 112vw, 560px);
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
clip-path: none;
overflow: hidden;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 52% 48%;
transform: none;
}
.scene--request .request-photo::after {
background:
linear-gradient(180deg, transparent 34%, rgba(10, 7, 14, 0.1) 48%, rgba(10, 7, 14, 0.9) 100%),
linear-gradient(90deg, rgba(10, 7, 14, 0.34), transparent 78%);
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
grid-row: 2;
width: 100%;
margin: 0;
padding: 22px 18px 54px;
border: 0;
background: transparent;
box-shadow: none;
filter: none;
transform: none;
}
.scene--request .request-copy .sheet__face {
display: block;
padding: 0;
background: transparent;
box-shadow: none;
clip-path: none;
transform: none;
}
.scene--request .request-copy .md { margin: 0 auto; }
}
/* ===================== 02：動画の下に文字を置く =====================
PCでは .karaoke-photo が position:absolute で全面に敷かれ、
コピーがその上に重なっていた（SPだけ縦積み）。
PCもSPと同じ構造にして、動画を高くし、文字はその下へ。 */
@media (min-width: 768px) {
.scene--karaoke .scene__pin {
display: grid;
grid-template-rows: auto auto;
align-items: start;
min-height: 0;
overflow: visible;
}
.karaoke-photo {
position: relative;
inset: auto;
/* aspect-ratio + max-height だと幅まで縮んで左右に余白が出る。
幅は全幅のまま、高さだけ決めて object-fit: cover で切る。 */
width: 100%;
height: min(76svh, 700px);
aspect-ratio: auto;
overflow: hidden;
}
.karaoke-photo :is(img, video) {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 重ねる前提の覆いは、下に敷く構図では要らない。
下辺だけ軽く落として文字への渡りを作る */
.karaoke-photo::after {
background: linear-gradient(180deg, transparent 62%, rgba(7, 8, 10, 0.55));
}
.karaoke-copy {
padding-top: clamp(26px, 3.4vw, 46px);
padding-bottom: clamp(30px, 4vw, 56px);
}
}
/* 動画の上に重ねる前提で白にしていた文字が、下に置いた途端に
明るい地へ乗って読めなくなった。地に合わせて墨に戻す。
見出しのマゼンタは地の上でも十分なコントラストがあるので残す。 */
@media (min-width: 768px) {
.scene--karaoke .karaoke-copy .scene-text {
color: var(--print-ink);
text-shadow: none;
}
.scene--karaoke .karaoke-copy .scene-label {
color: var(--print-sub);
text-shadow: none;
}
.scene--karaoke .scene-title { text-shadow: none; }
/* シールが動画の上端で切れていたので、内側へ下げる */
.y2k-sticker--karaoke { top: clamp(24px, 4vw, 64px); }
}
/* FVはPC/SPとも文字焼き込み済みの同一画像を使う。
SPだけ表示していたHTML見出しは読み上げ用に戻し、二重表示を防ぐ。 */
@media (max-width: 767px) {
.cover__core {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
}
/* ===================== 02 / SPは01と同じ「写真の中で読む」構図 =====================
動画そのものを縦に変形せず、表示する窓だけを下へ延長する。
object-fit: cover で比率を保ち、延長した下端へコピーを重ねる。 */
@media (max-width: 767px) {
.scene--karaoke {
min-height: 0;
overflow: hidden;
}
.scene--karaoke .scene__pin {
position: relative;
display: grid;
align-items: end;
min-height: clamp(660px, 172vw, 760px);
overflow: hidden;
}
.scene--karaoke .karaoke-photo,
.reveal-ready .scene--karaoke .karaoke-photo[data-reveal].is-in {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
transform: none;
}
.scene--karaoke .karaoke-photo :is(img, video) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 62%;
transform: none;
}
.scene--karaoke .karaoke-photo::after {
background: linear-gradient(
180deg,
rgba(7, 8, 10, 0.02) 0%,
rgba(7, 8, 10, 0.05) 44%,
rgba(7, 8, 10, 0.5) 66%,
rgba(7, 8, 10, 0.94) 100%
);
}
.scene--karaoke .karaoke-copy {
position: relative;
z-index: 3;
align-self: end;
width: 100%;
margin: 0;
padding: 0 18px clamp(38px, 10vw, 52px);
font-family: var(--font-main);
}
.scene--karaoke .scene-label--number-only {
margin-bottom: 14px;
color: rgba(255, 255, 255, 0.86);
font-family: var(--font-main);
font-size: 18px;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}
.scene--karaoke .scene-title {
max-width: 10.5em;
color: #ff4a94;
font-family: var(--font-main);
font-size: clamp(1.9rem, 8.2vw, 2.35rem);
line-height: 1.18;
letter-spacing: -0.045em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.78);
}
.scene--karaoke .scene-text {
max-width: 28em;
margin-top: 14px;
color: rgba(255, 255, 255, 0.94);
font-family: var(--font-main);
font-size: 15px;
font-weight: 700;
line-height: 1.72;
text-shadow: 0 1px 7px rgba(0, 0, 0, 0.86);
}
}
/* ===================== 予約CTA / ローズ面＋クローム外周 =====================
暗いマゼンタは使わず、FVのピンク文字と同系の明るいローズへ。
クロームは主面にせず、外周と独立した矢印だけに限定する。 */
.cta {
position: relative;
isolation: isolate;
justify-content: space-between;
gap: 14px;
min-height: 66px;
padding: 7px 9px 7px 22px;
overflow: hidden;
border: 2px solid transparent;
color: #fff;
background:
linear-gradient(115deg, #ff72b2 0%, #fa4f99 43%, #ef3e86 100%) padding-box,
linear-gradient(112deg, #6b7078 0%, #fff 16%, #8d949e 34%, #f9fcff 51%, #777e88 70%, #e9edf2 86%, #626872 100%) border-box;
box-shadow:
0 3px 0 #a92862,
0 12px 24px rgba(64, 20, 45, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
font-family: var(--font-main);
font-size: clamp(15px, 1.15vw, 16px);
font-weight: 900;
letter-spacing: 0.015em;
text-shadow: 0 1px 2px rgba(101, 18, 58, 0.34);
transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms ease;
}
.cta__copy {
position: relative;
z-index: 2;
display: grid;
flex: 1 1 auto;
gap: 1px;
justify-items: center;
min-width: 0;
line-height: 1.25;
}
.cta__copy small {
color: #ffe7f2;
font-family: var(--font-main);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.12em;
}
.cta__copy > span {
font-size: inherit;
white-space: nowrap;
}
.cta i {
position: relative;
z-index: 2;
display: grid;
flex: 0 0 38px;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.94);
border-radius: 50%;
color: #5e3146;
background: linear-gradient(135deg, #fff 0%, #aeb5bf 30%, #fbfdff 52%, #878e98 75%, #eef2f5 100%);
box-shadow: 0 2px 0 rgba(94, 31, 62, 0.3), inset 0 1px 0 #fff;
font-size: 21px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}
.cta::after {
position: absolute;
z-index: 1;
top: -35%;
left: -42%;
width: 24%;
height: 170%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
content: "";
pointer-events: none;
transform: skewX(-18deg);
}
/* 読み込み後、最初に見えているFVのCTAだけを一度光らせる。 */
.motion-ready .cover.is-scene-in .cta::after {
animation: cta-once-shine 720ms 1.15s var(--ease-out) 1 both;
}
@keyframes cta-once-shine {
from { left: -42%; }
to { left: 122%; }
}
.cta:active,
.motion-ready .cover.is-scene-in .cover__info > .cta:active,
.motion-ready .final-night.is-scene-in .final-night__content .cta:active {
transform: translateY(2px);
box-shadow:
0 1px 0 #a92862,
0 7px 15px rgba(64, 20, 45, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
@media (hover: hover) and (pointer: fine) {
.cta:hover,
.motion-ready .cover.is-scene-in .cover__info > .cta:hover,
.motion-ready .final-night.is-scene-in .final-night__content .cta:hover {
transform: translateY(-1px);
filter: brightness(1.035) saturate(1.03);
box-shadow:
0 4px 0 #a92862,
0 15px 28px rgba(64, 20, 45, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.46);
}
}
.cta--bar {
min-height: 58px;
font-size: clamp(15px, 1.15vw, 16px);
}
@media (max-width: 767px) {
.cover__info > .cta,
.cta--final,
.cta--bar {
min-height: 62px;
padding: 6px 7px 6px 18px;
font-size: 15px;
}
.cta i {
flex-basis: 36px;
width: 36px;
height: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.motion-ready .cover.is-scene-in .cta::after { animation: none; }
}
/* ===================== 03 PRICE / 写真の上に情報を置く =====================
01・02と同じく写真をセクション面として扱う。料金カードへ戻さず、
写真下部の暗い階調だけで数字の可読性を確保する。 */
.price-zone {
min-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 0;
box-shadow: none;
background: #171118;
}
/* 02の動画シーンから03の料金シーンへ、ひと呼吸だけ地を見せる。 */
.info-zone .price-zone {
margin-top: clamp(28px, 4vw, 52px);
}
.price-zone::before { display: none; }
.price-zone__in {
position: relative;
display: grid;
grid-template-columns: 1fr;
align-items: end;
gap: 0;
width: 100%;
max-width: none;
min-height: clamp(660px, 58vw, 780px);
margin: 0;
overflow: hidden;
}
.price-zone .price-photo,
.reveal-ready .price-zone .price-photo[data-reveal].is-in {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #171118;
box-shadow: none;
transform: none;
}
.price-zone .price-photo::after {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(16, 10, 17, 0.76) 0%, rgba(16, 10, 17, 0.46) 48%, rgba(16, 10, 17, 0.06) 82%),
linear-gradient(180deg, rgba(16, 10, 17, 0.04) 18%, rgba(16, 10, 17, 0.28) 50%, rgba(16, 10, 17, 0.92) 100%);
content: "";
}
.price-zone .price-photo img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 48%;
transform: none;
}
.price-zone .price-photo figcaption { display: none; }
.price-zone .scene-label {
margin-bottom: clamp(14px, 1.7vw, 22px);
color: rgba(255, 255, 255, 0.82);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.68);
}
.price-zone .scene-label b,
.price-zone .scene-label span { color: #ff5ca4; }
.price-zone .scene-label i { background: #ff5ca4; }
.price-zone .scene-label em { color: rgba(255, 255, 255, 0.62); }
.price-zone .price-main { margin-top: clamp(18px, 2vw, 26px); }
.price-zone .price-info {
gap: clamp(12px, 1.4vw, 18px);
padding: 0;
}
.price-zone .lead-ami {
color: rgba(255, 255, 255, 0.96);
border-left-color: #ff5ca4;
background: rgba(10, 7, 12, 0.26);
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}
.price-zone .paper-note {
color: rgba(255, 255, 255, 0.76);
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.78);
}
.price-zone .ink-button {
border: 1px solid rgba(255, 255, 255, 0.78);
color: #fff;
background: rgba(242, 63, 139, 0.94);
box-shadow: 0 3px 0 rgba(116, 23, 66, 0.86), 0 8px 18px rgba(0, 0, 0, 0.24);
}
.price-zone .ink-button i { color: #fff; }
.price-zone .price-foil {
z-index: 3;
top: clamp(18px, 3vw, 38px);
right: clamp(10px, 3vw, 42px);
left: auto;
}
@media (max-width: 767px) {
.price-zone__in {
min-height: clamp(750px, 182vw, 820px);
}
.price-zone .price-photo img {
object-position: 47% 50%;
}
.price-zone .price-photo::after {
background: linear-gradient(
180deg,
rgba(13, 8, 14, 0.03) 0%,
rgba(13, 8, 14, 0.12) 28%,
rgba(13, 8, 14, 0.62) 50%,
rgba(13, 8, 14, 0.96) 100%
);
}
.price-zone .scene-label {
margin-bottom: 13px;
font-size: 14px;
}
.price-zone .price-main { margin-top: 16px; }
.price-zone .price-info { gap: 11px; }
.price-zone .lead-ami {
padding: 10px 11px;
font-size: 13px;
}
.price-zone .paper-note {
font-size: 11px;
line-height: 1.65;
}
.price-zone .ink-button {
padding: 10px 14px 11px;
font-size: 12px;
}
.price-zone .price-foil {
top: 14px;
right: 5px;
width: clamp(102px, 29vw, 126px);
transform: rotate(6deg);
}
}
/* ===================== 95点調整 / 02・HOW TO・FINAL =====================
02はPCでも動画内コピーへ統一。HOW TOは情報量を落とさず縦量だけを
約22%圧縮し、EVENTからFINALまでを一続きの誌面として読む。 */
/* 02：PCもSPと同じく、映像をシーン面としてコピーを内包する。 */
@media (min-width: 768px) {
.scene--karaoke {
min-height: 0;
overflow: hidden;
}
.scene--karaoke .scene__pin {
position: relative;
display: grid;
grid-template-rows: 1fr;
align-items: end;
min-height: clamp(680px, 76svh, 760px);
overflow: hidden;
}
.scene--karaoke .karaoke-photo,
.reveal-ready .scene--karaoke .karaoke-photo[data-reveal].is-in {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
transform: none;
}
.scene--karaoke .karaoke-photo :is(img, video) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 66%;
transform: none;
}
.scene--karaoke .karaoke-photo::after {
background:
linear-gradient(90deg, rgba(8, 8, 12, 0.55) 0%, rgba(8, 8, 12, 0.18) 48%, transparent 76%),
linear-gradient(180deg, transparent 38%, rgba(8, 8, 12, 0.16) 58%, rgba(8, 8, 12, 0.84) 100%);
}
.scene--karaoke .karaoke-copy {
position: relative;
z-index: 3;
align-self: end;
width: min(820px, 70%);
margin: 0;
padding: clamp(300px, 34vh, 360px) 0 clamp(92px, 8vw, 118px) var(--pad-x);
color: #fff;
font-family: var(--font-main);
}
.scene--karaoke .karaoke-copy .scene-label {
margin-bottom: clamp(14px, 1.5vw, 20px);
color: rgba(255, 255, 255, 0.86);
font-size: clamp(16px, 1.4vw, 19px);
text-shadow: 0 1px 7px rgba(0, 0, 0, 0.78);
}
.scene--karaoke .karaoke-copy .scene-label b { color: #ff4a94; }
.scene--karaoke .scene-title {
width: auto;
max-width: 13em;
padding: 0;
color: #ff4a94;
background: transparent;
font-family: var(--font-main);
font-size: clamp(2.45rem, 4.2vw, 3.7rem);
line-height: 1.16;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78);
}
.scene--karaoke .karaoke-copy .scene-text {
max-width: 34em;
margin-top: 16px;
color: rgba(255, 255, 255, 0.94);
font-size: clamp(14px, 1.3vw, 17px);
font-weight: 700;
line-height: 1.78;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82);
}
/* 02は右上。03は左上に振って、同じシール構図の反復を避ける。 */
.scene--karaoke .y2k-sticker--karaoke {
inset: clamp(26px, 3vw, 46px) clamp(22px, 3.5vw, 56px) auto auto;
width: clamp(164px, 15vw, 220px);
transform: rotate(5deg);
}
}
/* 03のシールは左上。文字群から距離を取り、写真の空きを使う。 */
.price-zone .price-foil {
top: clamp(18px, 3vw, 38px);
right: auto;
left: clamp(10px, 3vw, 42px);
transform: rotate(-7deg);
}
/* HOW TO：ヘッドと3ステップを均等に詰め、総尺を約4分の3へ。 */
.howto-section {
margin-top: -1px;
padding: clamp(14px, 1.6vw, 20px) var(--gutter) 0;
}
/* EVENTの写真帯とHOW TOの紙面の間に残っていた広い桃色の踊り場を縮める。 */
.info-zone .event-zone .wall {
padding-bottom: clamp(12px, 1.4vw, 18px);
}
.info-zone .event-zone {
padding-bottom: clamp(14px, 1.8vw, 22px);
}
/* 04と05の間。--section-space（PC96px）に04側の下アキ110pxが積み上がって
合計206pxの空白帯になっていた。地を共有しているぶん、ここが空くと
ただの余りに見える */
.info-zone .price-zone { padding-bottom: clamp(36px, 3.8vw, 54px); }
.info-zone .event-zone { padding-top: clamp(34px, 3.6vw, 50px); }
.howto-guide { margin-bottom: 0; }
.howto-head {
min-height: 340px;
padding: clamp(30px, 3.5vw, 42px) clamp(24px, 6vw, 78px) clamp(28px, 3vw, 38px);
}
.howto-kicker { margin-bottom: 14px; }
.howto-intro { gap: 28px; margin-top: clamp(20px, 2.2vw, 28px); }
.howto-intro p { line-height: 1.72; }
.howto-step {
gap: clamp(30px, 4vw, 54px);
min-height: 500px;
padding: clamp(32px, 3.4vw, 44px) clamp(24px, 6vw, 78px);
}
.howto-copy > p:last-child,
.howto-copy > p:nth-last-child(2) {
margin-top: clamp(16px, 1.8vw, 22px);
line-height: 1.78;
}
.howto-amusement-list { margin-top: 15px; }
.howto-visual { min-height: 350px; }
.howto-food { min-height: 370px; }
/* FINAL：白い見出し箱を外し、写真と同じレイヤーで読ませる。 */
.final-night {
margin-top: 0;
}
.final-night__content h2 {
width: auto;
max-width: 14em;
padding: 0;
color: #fff;
background: transparent;
font-family: var(--font-main);
font-size: clamp(2.35rem, 5vw, 4.35rem);
font-weight: 900;
line-height: 1.16;
letter-spacing: -0.055em;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78);
}
.final-night__content > p {
max-width: 32em;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: 700;
line-height: 1.75;
text-shadow: 0 2px 9px rgba(0, 0, 0, 0.78);
}
/* 予約CTA：静的な紙粒だけを重ねる。動く光は従来の一度きりに限定。 */
.cta::before {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: var(--grain-fine);
background-size: 124px 124px;
mix-blend-mode: soft-light;
opacity: 0.09;
content: "";
}
@media (max-width: 767px) {
.price-zone .price-foil {
top: 14px;
right: auto;
left: 5px;
transform: rotate(-7deg);
}
.howto-section { padding: 10px 0 0; }
.info-zone .event-zone { padding-bottom: 12px; }
.info-zone .price-zone { padding-bottom: 38px; }
.info-zone .event-zone { padding-top: 28px; }
.howto-head { padding: 28px 18px 30px; }
.howto-head__tape { top: 18px; }
.howto-kicker { margin-bottom: 14px; }
.howto-intro { gap: 12px; margin-top: 22px; }
.howto-intro p { line-height: 1.68; }
.howto-step,
.howto-step:nth-of-type(even) {
gap: 18px;
padding: 36px 18px 32px;
}
.howto-copy h3 small { margin-top: 8px; }
.howto-copy > p:last-child,
.howto-copy > p:nth-last-child(2) {
margin-top: 15px;
font-size: 13.5px;
line-height: 1.72;
}
.howto-amusement-list { margin-top: 12px; }
.howto-visual { min-height: 260px; }
.howto-food { min-height: 310px; }
.howto-contact {
grid-template-columns: repeat(2, clamp(76px, 21vw, 84px));
}
.howto-contact img { width: clamp(76px, 21vw, 84px); }
.final-night__content h2 {
max-width: 100%;
font-size: clamp(2rem, 9vw, 2.55rem);
}
.final-night__content > p {
font-size: 15px;
line-height: 1.72;
}
/* 固定予約バーの上で本文2行目まで読み切れる位置を確保する。 */
.scene--karaoke .karaoke-copy {
padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
}
/* PC / 01→02：写真シーンが連続して詰まって見えないよう、
共通の藤〜桃背景を見せる誌面上の「間」を作る。SPは現状維持。 */
@media (min-width: 880px) {
.experience-zone > .scene--karaoke {
margin-top: clamp(64px, 6vw, 88px);
}
}
/* FV→01：表紙の直後に余韻を作り、次の体験シーンへ切り替える。 */
.experience-zone {
padding-top: clamp(36px, 7vw, 88px);
}
@media (max-width: 767px) {
.experience-zone {
padding-top: clamp(30px, 9vw, 42px);
}
}
/* ===================== 01 / 写真・コピー・端末を分離 =====================
写真の中で説明を読ませず、写真の下へ紙面を少し重ねる。
SONG PETを紙面の独立レイヤーに置き、操作するシーンとして見せる。 */
.scene--request {
height: auto;
min-height: 0;
overflow: visible;
background: transparent;
}
.scene--request .scene__in.request-layout {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
align-items: start;
width: 100%;
max-width: none;
min-height: 0;
padding: 0 var(--pad-x) clamp(74px, 8vw, 112px);
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
z-index: 1;
grid-column: 1;
grid-row: 1;
display: block;
width: 100%;
max-width: min(1480px, 100%);
height: clamp(470px, 48vw, 690px);
margin: 0 auto;
padding: 0;
overflow: hidden;
border: 0;
background: #171118;
box-shadow: var(--shadow-photo);
clip-path: none;
translate: 0 0;
rotate: 0deg;
transform: none;
}
.scene--request .request-photo > img {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 48%;
transform: none;
}
.scene--request .request-photo::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
background: linear-gradient(180deg, transparent 64%, rgba(17, 10, 18, 0.22) 100%);
content: "";
pointer-events: none;
}
.scene--request .request-copy.sheet {
position: relative;
z-index: 4;
grid-column: 1;
grid-row: 2;
width: min(1120px, calc(100% - clamp(22px, 5vw, 76px)));
margin: clamp(-78px, -5vw, -54px) auto 0;
padding: 0;
border: 0;
color: var(--print-ink);
background: transparent;
box-shadow: none;
filter: none;
transform: rotate(-0.35deg);
pointer-events: auto;
}
.scene--request .request-copy > .sheet__fiber {
display: block;
z-index: 0;
}
.scene--request .request-copy > .tape {
display: block;
z-index: 5;
}
.scene--request .request-copy .sheet__face {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(270px, 0.85fr);
grid-template-rows: auto;
align-items: center;
gap: clamp(34px, 5vw, 76px);
padding: clamp(34px, 4vw, 54px) clamp(34px, 5vw, 70px);
color: var(--print-ink);
background:
linear-gradient(rgba(251, 247, 238, 0.97), rgba(251, 247, 238, 0.97)),
var(--grain-fine);
box-shadow: var(--shadow-paper);
clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 97.4%, 92% 96.4%, 87% 98%, 80% 96.7%, 73% 98.2%, 65% 96.5%, 58% 98%, 50% 96.7%, 42% 98.1%, 34% 96.5%, 27% 98%, 19% 96.6%, 12% 98.1%, 5% 96.8%, 0 98%);
}
.scene--request .request-copy__text {
min-width: 0;
}
.scene--request .request-copy__text .scene-label {
margin: 0 0 clamp(16px, 1.8vw, 24px);
padding: 0;
color: var(--print-sub);
text-shadow: none;
}
.scene--request .request-copy__text .scene-label :is(b, span) { color: var(--print-accent); }
.scene--request .request-copy__text .scene-label i { background: var(--print-accent); }
.scene--request .request-copy__text .paper-h {
max-width: 12em;
margin: 0;
color: var(--print-accent);
font-family: var(--font-main);
font-size: clamp(2.15rem, 3.7vw, 3.45rem);
font-weight: 900;
line-height: 1.14;
letter-spacing: -0.055em;
text-shadow: none;
}
.scene--request .request-copy__text .scene-text {
max-width: 34em;
margin-top: clamp(16px, 1.7vw, 22px);
color: var(--print-ink);
font-family: var(--font-main);
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 700;
line-height: 1.8;
text-shadow: none;
}
.scene--request .request-copy .tama {
align-self: center;
justify-self: center;
width: clamp(248px, 22vw, 318px);
margin: 0;
translate: 0 0;
transform: rotate(3deg);
}
@media (max-width: 879px) {
.scene--request {
min-height: 0;
overflow: visible;
background: transparent;
}
.scene--request .scene__in.request-layout {
display: grid;
grid-template-rows: auto auto;
min-height: 0;
padding: 0 12px clamp(78px, 20vw, 104px);
overflow: visible;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
inset: auto;
width: 100%;
height: clamp(390px, 108vw, 520px);
margin: 0;
overflow: hidden;
background: #171118;
box-shadow: var(--shadow-photo);
}
.scene--request .request-photo > img {
object-position: 55% 50%;
transform: none;
}
.scene--request .request-photo::after {
background: linear-gradient(180deg, transparent 74%, rgba(17, 10, 18, 0.18) 100%);
}
.scene--request .request-copy.sheet {
width: calc(100% - 12px);
margin: -28px auto 0;
color: var(--print-ink);
transform: rotate(-0.35deg);
}
.scene--request .request-copy .sheet__face {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 20px 42px;
background:
linear-gradient(rgba(251, 247, 238, 0.98), rgba(251, 247, 238, 0.98)),
var(--grain-fine);
}
.scene--request .request-copy__text .scene-label {
margin-bottom: 14px;
color: var(--print-sub);
font-size: 14px;
}
.scene--request .request-copy__text .paper-h {
max-width: 11em;
color: var(--print-accent);
font-size: clamp(2rem, 9.4vw, 2.55rem);
text-shadow: none;
}
.scene--request .request-copy__text .scene-text {
margin-top: 14px;
color: var(--print-ink);
font-size: 14px;
line-height: 1.72;
text-shadow: none;
}
.scene--request .request-copy__text .scene-text br { display: none; }
.scene--request .request-copy .tama {
width: clamp(230px, 68vw, 286px);
margin: 0 auto;
translate: 0 0;
}
.scene--request :is(.request-photo__back, .request-photo__chrome, .request-chrome, .request-seal) {
display: none;
}
}
/* ===================== 03 / タイトルは写真、料金は紙面 =====================
感情的な写真タイトルと、比較して読む料金情報を別の面にする。 */
.price-zone {
min-height: 0;
padding: 0 0 clamp(78px, 8vw, 112px);
overflow: visible;
background: transparent;
}
.price-zone__in {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
align-items: start;
width: 100%;
max-width: none;
min-height: 0;
margin: 0;
overflow: visible;
}
.price-zone .price-photo,
.reveal-ready .price-zone .price-photo[data-reveal].is-in {
position: relative;
inset: auto;
z-index: 0;
grid-column: 1;
grid-row: 1;
width: 100%;
height: clamp(500px, 46vw, 680px);
margin: 0;
padding: 0;
overflow: hidden;
background: #171118;
box-shadow: none;
transform: none;
}
.price-zone .price-photo::after {
background:
linear-gradient(90deg, rgba(13, 8, 14, 0.5) 0%, rgba(13, 8, 14, 0.13) 54%, transparent 82%),
linear-gradient(180deg, transparent 48%, rgba(13, 8, 14, 0.64) 100%);
}
.price-zone .price-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 48%;
}
.price-title-overlay {
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 1;
align-self: end;
width: min(1100px, calc(100% - (2 * var(--pad-x))));
margin: 0 auto;
padding: 0 0 clamp(88px, 8vw, 116px);
color: #fff;
pointer-events: none;
}
.price-title-overlay .scene-label {
margin-bottom: clamp(14px, 1.6vw, 20px);
color: rgba(255, 255, 255, 0.84);
text-shadow: 0 1px 2px rgba(35, 24, 21, 0.72);
}
.price-title-overlay .paper-h {
max-width: 12em;
margin: 0;
color: #ff5ca4;
font-family: var(--font-main);
font-size: clamp(2.55rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.06em;
text-shadow:
0 1px 2px rgba(35, 24, 21, 0.62),
0 2px 7px rgba(35, 24, 21, 0.38);
}
.price-panel.sheet {
position: relative;
z-index: 4;
grid-column: 1;
grid-row: 2;
width: min(1080px, calc(100% - (2 * var(--pad-x))));
margin: clamp(-62px, -4vw, -42px) auto 0;
padding: 0;
color: var(--print-ink);
background: transparent;
box-shadow: none;
filter: none;
transform: rotate(0.25deg);
}
.price-panel > .sheet__fiber,
.price-panel > .tape { display: block; }
.price-panel .sheet__face {
padding: clamp(30px, 3.4vw, 46px) clamp(28px, 4vw, 56px) clamp(38px, 4vw, 54px);
color: var(--print-ink);
background:
linear-gradient(rgba(251, 247, 238, 0.95), rgba(251, 247, 238, 0.97)),
var(--grain-fine);
box-shadow: var(--shadow-paper);
clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 98%, 91% 96.5%, 85% 98.2%, 78% 96.6%, 71% 98%, 64% 96.6%, 57% 98.1%, 50% 96.5%, 43% 98%, 36% 96.6%, 29% 98%, 22% 96.5%, 15% 98.2%, 8% 96.7%, 0 98%);
}
.price-panel .price-main { margin: 0; }
.price-panel .price-info {
display: grid;
gap: clamp(16px, 2vw, 24px);
padding: 0;
}
.price-panel .lead-ami {
margin: 0;
padding: 0 0 0 14px;
border-left: 5px solid var(--print-accent);
color: var(--print-ink);
background: transparent;
font-size: clamp(15px, 1.35vw, 18px);
text-shadow: none;
}
.price-panel .plan-prices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 3vw, 38px);
margin: 0;
}
.price-panel .plan-prices > div {
padding: 14px 0 15px;
border-top: 1px solid rgba(35, 24, 21, 0.3);
border-bottom: 2px solid var(--print-ink);
}
.price-panel .plan-prices dt {
display: inline-block;
padding: 3px 12px 4px;
color: #fff;
background: var(--print-accent);
font-size: clamp(13px, 1vw, 15px);
font-weight: 900;
letter-spacing: 0.12em;
}
.price-panel .plan-prices dd {
margin-top: 8px;
color: var(--print-ink);
font-family: var(--font-main);
font-size: clamp(2.7rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.065em;
text-shadow: none;
}
.price-panel .plan-prices dd small {
margin-left: 0.2em;
font-size: 0.3em;
letter-spacing: 0;
}
.price-panel .paper-note {
margin: 0;
color: var(--print-sub);
font-size: 12px;
line-height: 1.65;
text-shadow: none;
}
.price-panel .ink-button {
justify-self: start;
color: #fff;
background: #f14c93;
}
@media (max-width: 767px) {
.price-zone {
padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
.price-zone__in {
min-height: 0;
}
.price-zone .price-photo,
.reveal-ready .price-zone .price-photo[data-reveal].is-in {
height: clamp(410px, 112vw, 520px);
}
.price-zone .price-photo img { object-position: 49% 50%; }
.price-zone .price-photo::after {
background: linear-gradient(180deg, transparent 46%, rgba(13, 8, 14, 0.68) 100%);
}
.price-title-overlay {
width: calc(100% - 36px);
padding-bottom: 68px;
}
.price-title-overlay .scene-label {
margin-bottom: 12px;
font-size: 14px;
}
.price-title-overlay .paper-h {
font-size: clamp(2.15rem, 10.4vw, 2.85rem);
}
.price-panel.sheet {
width: calc(100% - 24px);
margin-top: -34px;
transform: rotate(0.2deg);
}
.price-panel .sheet__face {
padding: 26px 18px 40px;
}
.price-panel .price-info { gap: 15px; }
.price-panel .lead-ami {
padding: 0 0 0 11px;
font-size: 14px;
line-height: 1.65;
}
.price-panel .plan-prices {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.price-panel .plan-prices > div { padding: 10px 0 12px; }
.price-panel .plan-prices dt {
padding: 3px 9px 4px;
font-size: 12px;
}
.price-panel .plan-prices dd {
font-size: clamp(2.05rem, 10.8vw, 2.7rem);
}
.price-panel .paper-note { font-size: 11px; }
.price-panel .ink-button {
width: 100%;
justify-content: space-between;
padding: 11px 14px 12px;
font-size: 12px;
}
.price-zone .price-foil {
top: 14px;
right: auto;
left: 5px;
}
}
/* 01からSONG PETを外した後の最終上書き。
履歴CSSの2カラム指定より後ろに置き、空の右列を作らない。 */
.scene--request .request-copy.sheet {
width: min(900px, calc(100% - clamp(22px, 5vw, 76px)));
}
.scene--request .request-copy .sheet__face {
display: block;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.scene--request .request-copy__text {
width: min(100%, 760px);
}
@media (max-width: 879px) {
.scene--request .request-copy.sheet {
width: calc(100% - 12px);
}
}
/* 03 / 関西・関東の料金比較
全幅の赤い罫線をやめ、エリア名・金額・中央区切りだけに整理する。 */
.price-panel .plan-prices {
gap: 0;
padding: clamp(4px, 0.6vw, 8px) 0;
border: 0;
}
.price-panel .plan-prices > div {
position: relative;
min-width: 0;
padding: clamp(14px, 1.8vw, 22px) clamp(18px, 3vw, 42px);
border: 0;
}
.price-panel .plan-prices > div:first-child {
padding-left: 0;
}
.price-panel .plan-prices > div + div {
padding-right: 0;
border-left: 1px dashed rgba(35, 24, 21, 0.3);
}
.price-panel .plan-prices dt {
display: flex;
align-items: center;
gap: 9px;
width: fit-content;
padding: 0;
color: var(--print-ink);
background: transparent;
font-size: clamp(13px, 1.05vw, 15px);
line-height: 1;
letter-spacing: 0.14em;
}
.price-panel .plan-prices dt::before {
flex: 0 0 auto;
width: 9px;
height: 9px;
border: 1px solid rgba(35, 24, 21, 0.42);
background: var(--cyan);
box-shadow: 2px 2px 0 rgba(35, 24, 21, 0.18);
content: "";
transform: rotate(45deg);
}
.price-panel .plan-prices > div:last-child dt::before {
background: #f08fbd;
}
.price-panel .plan-prices dd {
display: flex;
align-items: baseline;
gap: 0.16em;
margin: 11px 0 0;
color: var(--print-ink);
font-size: clamp(2.55rem, 4.4vw, 4rem);
line-height: 0.94;
letter-spacing: -0.055em;
}
.price-panel .plan-prices dd span {
font-variant-numeric: tabular-nums;
}
.price-panel .plan-prices dd small {
margin: 0;
color: var(--print-sub);
font-size: 0.34em;
font-weight: 900;
line-height: 1;
letter-spacing: 0.06em;
}
@media (max-width: 767px) {
.price-panel .plan-prices {
gap: 0;
padding: 2px 0;
}
.price-panel .plan-prices > div {
padding: 12px 10px 14px;
}
.price-panel .plan-prices > div:first-child {
padding-left: 0;
padding-right: 12px;
}
.price-panel .plan-prices > div + div {
padding-right: 0;
padding-left: 12px;
}
.price-panel .plan-prices dt {
gap: 7px;
font-size: 12px;
}
.price-panel .plan-prices dt::before {
width: 8px;
height: 8px;
box-shadow: 1px 1px 0 rgba(35, 24, 21, 0.18);
}
.price-panel .plan-prices dd {
gap: 0.12em;
margin-top: 9px;
font-size: clamp(2rem, 10.2vw, 2.55rem);
}
.price-panel .plan-prices dd small {
font-size: 0.32em;
}
}
/* SONG PETを「大セクション」ではなく01→02間の短い寄り道へ戻す。 */
.scene--request .scene__in.request-layout {
padding-bottom: clamp(44px, 5vw, 68px);
}
.song-pet-break {
padding: clamp(12px, 2vw, 24px) var(--pad-x) clamp(34px, 4vw, 54px);
}
.song-pet-break__in {
min-height: 360px;
gap: clamp(28px, 5vw, 68px);
padding: clamp(28px, 3.6vw, 46px) clamp(28px, 5vw, 64px);
}
@media (min-width: 880px) {
.experience-zone > .scene--karaoke {
margin-top: clamp(20px, 2.6vw, 36px);
}
}
.tama__screen {
grid-template-rows: auto 1fr auto auto auto;
}
.tama__prompt {
display: block;
min-height: 1.25em;
margin-top: 3px;
color: #28351c;
font-size: 7px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.12em;
text-align: center;
}
/* 見た目だけでなく実際のタップ領域も44pxにする。 */
.song-pet-break .tama__keys {
gap: 14px;
margin-top: 13px;
}
.song-pet-break .tama__keys button {
width: 44px;
height: 44px;
font-size: 11px;
}
.tama.is-hit .tama__pet {
animation: tamaHit 0.26s var(--ease-back) both;
}
.tama.is-miss .tama__body {
animation: tamaMiss 0.24s ease-out both;
}
.tama.is-miss .tama__screen {
box-shadow:
inset 0 0 0 2px rgba(64, 74, 48, 0.5),
inset 0 3px 7px rgba(37, 48, 26, 0.28),
0 0 0 3px rgba(205, 60, 88, 0.34);
}
@keyframes tamaHit {
0% { transform: translate3d(0, 0, 0) scale(1); }
55% { transform: translate3d(0, -6px, 0) scale(1.08); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes tamaMiss {
0%, 100% { transform: translateX(0); }
30% { transform: translateX(-4px); }
70% { transform: translateX(4px); }
}
@media (max-width: 879px) {
.scene--request .scene__in.request-layout {
padding-bottom: clamp(46px, 13vw, 62px);
}
.song-pet-break {
padding: 8px 12px clamp(38px, 11vw, 52px);
}
.song-pet-break__in {
gap: 24px;
padding: 36px 18px 38px;
}
.song-pet-break .tama {
width: min(72vw, 272px);
}
}
@media (prefers-reduced-motion: reduce) {
.tama.is-hit .tama__pet,
.tama.is-miss .tama__body {
animation: none;
}
}
/* ===================== 01 / 見出し・写真・本文の3層構成 =====================
見出しは写真の前でシーンを宣言し、本文だけを写真下部の紙面へ。
PCは紙を浅く重ね、SPは写真と本文を分離して読みやすさを優先する。 */
.scene--request .scene__in.request-layout {
grid-template-rows: auto auto auto;
}
.scene--request .request-heading {
position: relative;
z-index: 3;
grid-column: 1;
grid-row: 1;
width: min(1480px, 100%);
}
.scene--request .request-heading .scene-label {
margin: 0 0 clamp(14px, 1.7vw, 22px);
color: var(--print-sub);
}
.scene--request .request-heading .scene-label :is(b, span) {
color: var(--print-accent);
}
.scene--request .request-heading .scene-label i {
background: var(--print-accent);
}
.scene--request .request-heading .paper-h {
max-width: 12em;
margin: 0;
color: var(--print-accent);
font-family: var(--font-main);
font-size: clamp(2.35rem, 4.1vw, 3.85rem);
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.055em;
text-shadow: none;
}
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
grid-row: 2;
}
.scene--request .request-copy.sheet {
grid-column: 1;
grid-row: 3;
width: min(820px, calc(100% - clamp(40px, 10vw, 160px)));
/* 元は負マージンで写真に被せる指定だったが、行間62pxに対して-42pxでは
被さらず、写真の下辺のMVプレーヤーの見出しに紙が乗るだけだった。
写真の下辺にはUIが並ぶので、ここは被せずに離して切る */
margin: clamp(12px, 1.4vw, 20px) auto 0;
}
.scene--request .request-copy .sheet__face {
display: block;
padding: clamp(24px, 2.8vw, 34px) clamp(28px, 4vw, 50px) clamp(30px, 3.6vw, 44px);
}
.scene--request .request-copy__text {
width: 100%;
}
.scene--request .request-copy__text .scene-text {
max-width: 46em;
margin: 0;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.85;
}
@media (max-width: 879px) {
.scene--request .scene__in.request-layout {
grid-template-rows: auto auto auto;
}
.scene--request .request-heading {
width: 100%;
margin-bottom: 20px;
padding-inline: 6px;
}
.scene--request .request-heading .scene-label {
margin-bottom: 13px;
font-size: 14px;
}
.scene--request .request-heading .paper-h {
max-width: 11em;
font-size: clamp(2rem, 9.4vw, 2.55rem);
}
.scene--request .request-copy.sheet {
width: calc(100% - 12px);
margin: 18px auto 0;
}
.scene--request .request-copy .sheet__face {
padding: 20px 18px 26px;
}
.scene--request .request-copy__text .scene-text {
font-size: 14px;
line-height: 1.72;
}
}
/* ===================== 01 写真を当時のMVに見せる =====================
案A（走査線）＋案C（4:3の枠）＋最小限の再生UI。
架空の時刻は加えず、実際の体験内容だけを表示する。 */
/* 3:2の外枠に4:3映像を置き、黒帯を細くして写真を主役にする。 */
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
position: relative;
display: block;
width: min(1120px, 100%);
height: auto;
min-height: 0;
aspect-ratio: 3 / 2;
margin-inline: auto;
padding: 0;
overflow: hidden;
background: #0e0b0d;
}
.request-photo__screen {
position: absolute;
inset-block: 0;
left: 5.5556%;
z-index: 2;
display: block;
width: 88.8889%;
overflow: hidden;
background: #171312;
}
.scene--request .request-photo .request-photo__screen > img,
.reveal-ready .scene--request .request-photo[data-reveal].is-in .request-photo__screen > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 50% 50%;
transform: none;
}
/* 走査線・わずかな色ズレ・四隅の落ち。映像面の外へは掛けない。 */
.request-photo__crt {
position: absolute;
inset-block: 0;
left: 5.5556%;
z-index: 3;
width: 88.8889%;
pointer-events: none;
background:
radial-gradient(118% 96% at 50% 50%, transparent 52%, rgba(35, 24, 21, 0.34) 100%),
repeating-linear-gradient(
180deg,
rgba(35, 24, 21, 0.15) 0 1px,
transparent 1px 2px
);
box-shadow:
inset 1px 0 0 rgba(255, 74, 148, 0.16),
inset -1px 0 0 rgba(0, 168, 204, 0.16);
mix-blend-mode: multiply;
}
/* 写真を「MV再生シーン」として読ませる、必要最小限の操作表示。 */
.request-photo__mvbar {
position: absolute;
right: 5.5556%;
bottom: 0;
left: 5.5556%;
z-index: 4;
display: grid;
grid-template-columns: auto auto minmax(72px, 1fr);
align-items: center;
gap: clamp(9px, 1.2vw, 16px);
min-height: clamp(38px, 4.3vw, 46px);
padding: 7px clamp(12px, 1.6vw, 20px);
color: var(--paper);
border-top: 1px solid rgba(105, 220, 232, 0.68);
background: rgba(14, 11, 13, 0.88);
font-family: var(--font-main);
backdrop-filter: none;
}
.request-photo__mvplay {
display: grid;
width: 24px;
height: 24px;
place-items: center;
color: #0e0b0d;
border-radius: 50%;
background: #69dce8;
font-size: 10px;
font-style: normal;
line-height: 1;
text-indent: 1px;
}
.request-photo__mvlabel {
display: grid;
gap: 1px;
white-space: nowrap;
}
.request-photo__mvlabel b {
font-size: clamp(10px, 1vw, 12px);
font-weight: 900;
letter-spacing: 0.04em;
}
.request-photo__mvlabel small {
color: rgba(251, 247, 238, 0.68);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
}
.request-photo__mvprogress {
display: block;
height: 2px;
overflow: hidden;
background: rgba(251, 247, 238, 0.26);
}
.request-photo__mvprogress > i {
display: block;
width: 100%;
height: 100%;
background: #ff4a94;
transform: scaleX(calc(0.18 + var(--scene-progress, 0) * 0.72));
transform-origin: 0 50%;
}
@media (max-width: 767px) {
.scene--request .request-photo,
.reveal-ready .scene--request .request-photo[data-reveal].is-in {
width: 100%;
aspect-ratio: 4 / 3;
}
.request-photo__screen,
.request-photo__crt {
left: 0;
width: 100%;
}
.request-photo__crt {
background:
radial-gradient(120% 98% at 50% 50%, transparent 56%, rgba(35, 24, 21, 0.3) 100%),
repeating-linear-gradient(180deg, rgba(35, 24, 21, 0.12) 0 1px, transparent 1px 3px);
}
.request-photo__mvbar {
right: 0;
left: 0;
grid-template-columns: auto auto 1fr;
gap: 8px;
min-height: 40px;
padding: 7px 10px;
}
.request-photo__mvlabel b { font-size: 10px; }
.request-photo__mvlabel small { font-size: 7px; }
}
/* ===================== 03 CHEKI PHOTO =====================
02（暗い）と info-zone（藤〜桃のグラデ）の間に挟まる紙面。
下端だけ info-zone の入り色へ送って、境界を帯に見せない。
PCは机に散らばった3枚、SPは横一列で画面外へ流す。DOMは共通で
組み方だけ変える。傾きは transform ではなく独立プロパティ rotate
で持たせる。[data-reveal] の入場が transform を使うので、同じ
土俵に乗せると (0,3,0) と殴り合いになって静的な傾きが消える。 */
.scene--cheki {
position: relative;
isolation: isolate;
margin-inline: 0;
border-inline: 0;
border-radius: 0;
box-shadow: none;
/* --gutter は SP で 14px まで詰まる。他セクション（料金36px／02は18px）
に対して 03 だけ左が詰まって見えたので、独自に下限を持たせる */
padding: clamp(56px, 7vw, 100px) clamp(24px, 6.4vw, 64px) clamp(64px, 8vw, 112px);
background:
radial-gradient(circle at 84% 10%, rgba(255, 226, 240, 0.55), transparent 44%),
linear-gradient(180deg, var(--paper) 0%, var(--paper) 76%, #ddd2ef 100%);
color: var(--print-ink);
overflow: hidden;
}
.scene--cheki::before {
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--grain-fine);
opacity: 0.5;
pointer-events: none;
content: "";
}
.cheki__in {
position: relative;
z-index: 1;
display: grid;
gap: clamp(28px, 4vw, 56px);
width: min(1060px, 100%);
margin-inline: auto;
align-items: center;
}
.scene--cheki .scene-label { color: var(--print-sub); }
.scene--cheki .scene-label span { color: var(--print-ink); }
/* 1行で組む。折り返すと「1枚」が行頭に落ちて意味の切れ目がずれる */
.scene--cheki .paper-h {
white-space: nowrap;
font-size: clamp(1.5rem, 5.4vw, 2.9rem);
}
.cheki__lead {
margin: 0 0 clamp(16px, 2.2vw, 24px);
max-width: 26em;
color: var(--print-sub);
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
line-height: 1.9;
}
/* 事実は2つだけ。増やさない。
書体は本文と揃える。ここで手書き体に振ると、ラベル・見出し・本文と
合わせて1画面に4書体並んで散らかる */
.cheki__facts {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(10px, 1.4vw, 14px);
margin: 0;
padding-top: clamp(12px, 1.6vw, 16px);
border-top: 1px solid rgba(35, 24, 21, 0.18);
font-size: clamp(0.92rem, 1.5vw, 1.02rem);
line-height: 1.7;
}
.cheki__facts strong {
flex-shrink: 0;
color: var(--print-accent);
font-weight: 900;
letter-spacing: 0.04em;
}
.cheki__facts span {
padding-left: clamp(10px, 1.4vw, 14px);
border-left: 1px solid rgba(35, 24, 21, 0.22);
font-weight: 700;
}
/* ---------- 撮った写真の束 ---------- */
.cheki-stack {
position: relative;
justify-self: center;
width: 100%;
}
.cheki-card {
margin: 0;
padding: 8px 8px 34px;
background: var(--paper-photo);
box-shadow: var(--shadow-photo);
}
.cheki-card img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
background: #efe7dc;
}
/* 現像したてのわずかな色被り。黒は使わない */
.cheki-card::after {
position: absolute;
inset: 8px 8px 34px;
background: linear-gradient(200deg, rgba(255, 244, 220, 0.24), transparent 46%, rgba(180, 205, 225, 0.18));
mix-blend-mode: multiply;
pointer-events: none;
content: "";
}
/* 白フチへの書き込み。手書き体はここだけに残す */
.cheki-card figcaption {
position: absolute;
left: 12px;
bottom: 10px;
font-family: var(--font-hand);
font-size: 0.78rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--print-sub);
}
.cheki-stack__tape {
position: absolute;
z-index: 4;
width: 82px;
height: 25px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.66), rgba(255, 233, 210, 0.5));
box-shadow: 0 1px 3px rgba(37, 25, 63, 0.18);
}
/* 入場の clip-path は影とマステを切る。ここだけ外す。
.reveal-ready [data-reveal].is-in (0,3,0) に勝てる詳細度で書く */
.reveal-ready .scene--cheki .cheki-stack[data-reveal],
.reveal-ready .scene--cheki .cheki-stack[data-reveal].is-in {
clip-path: none;
}
/* ---------- SP: 横一列のストリップ ----------
4枚を扇状に重ねて、両端は画面外へ。束の散らばりはSP幅だと
互いに潰し合って、どの写真も読めなくなる */
@media (max-width: 767px) {
/* 束は flex 行で min-content が画面幅を超える。1fr で受けないと
グリッド列ごと広がって、コピー側の折り返し位置が画面外へ出る */
.cheki__in { grid-template-columns: minmax(0, 1fr); }
.cheki-stack {
display: flex;
/* 基底の justify-self: center だとグリッド項目が max-content 幅になり、
負のマージンが左右非対称に効いてハンコが画面外へ出る */
justify-self: stretch;
justify-content: center;
margin-inline: calc(clamp(24px, 6.4vw, 64px) * -1);
padding-block: 10px 4px;
}
.cheki-card {
position: relative;
flex: 0 0 auto;
width: 34vw;
margin-inline: -3vw;
padding: 6px 6px 26px;
}
.cheki-card::after { inset: 6px 6px 26px; }
.cheki-card--1 { rotate: -7deg; z-index: 1; }
.cheki-card--2 { rotate: 2.5deg; z-index: 2; }
.cheki-card--3 { rotate: -3deg; z-index: 3; }
.cheki-card--4 { rotate: 7deg; z-index: 2; }
.cheki-card figcaption { left: 8px; bottom: 7px; font-size: 0.66rem; }
.cheki-stack__tape { display: none; }
}
/* ---------- PC: 机に散らばった3枚 ---------- */
@media (min-width: 768px) {
.cheki__in {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
gap: clamp(32px, 3.6vw, 56px);
}
.cheki-stack {
width: min(440px, 100%);
aspect-ratio: 1 / 1.02;
}
.cheki-card {
position: absolute;
padding: 9px 9px 40px;
}
.cheki-card::after { inset: 9px 9px 40px; }
.cheki-card--1 { width: 46%; left: 0; top: 4%; rotate: -7deg; z-index: 1; }
.cheki-card--2 { width: 46%; right: 2%; top: 0; rotate: 5.5deg; z-index: 2; }
.cheki-card--3 { width: 56%; left: 20%; bottom: 0; rotate: -2deg; z-index: 3; }
.cheki-card--4 { display: none; }
.cheki-stack__tape--a { left: 6%; top: -1%; rotate: -14deg; }
.cheki-stack__tape--b { right: 8%; top: -4%; rotate: 9deg; }
}
@media (prefers-reduced-motion: reduce) {
.cheki-card,
.cheki-stack__tape { rotate: none; }
}
/* ---------- 当時のプリクラの落書き ----------
写真の上に手で描き足した体。字体を増やさないよう、記号は
インラインSVGの1本線で描き、文字だけ既存の手書き体を使う。
線・傾き・色は写真に足していい範囲。紫と黒は使わない。
枚数を増やすとただの装飾に見えるので、1枚につき1〜2個まで。 */
.cheki-doodle {
position: absolute;
z-index: 2;
pointer-events: none;
line-height: 0;
}
.cheki-doodle svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
/* 下地が明るいとペンが消える。うっすら白を回して輪郭を逃がす */
filter: drop-shadow(0 0 1.6px rgba(255, 255, 255, 0.9));
}
/* 白フチではなく写真の内側に描く */
.cheki-doodle--heart {
top: 9%;
right: 11%;
width: 15%;
color: var(--magenta-bright);
rotate: 9deg;
}
.cheki-doodle--sparkle {
top: 8%;
left: 9%;
width: 26%;
color: #ffd233;
rotate: -6deg;
}
.cheki-doodle--star {
top: 7%;
right: 8%;
width: 15%;
color: #00d0e8;
rotate: -12deg;
}
.cheki-doodle--swirl {
top: 12%;
left: 6%;
width: 34%;
color: var(--magenta-bright);
rotate: -4deg;
}
.cheki-doodle--word {
right: 10px;
bottom: 11px;
color: var(--magenta-bright);
font-family: var(--font-hand);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
rotate: -7deg;
}
@media (max-width: 767px) {
.cheki-doodle--word { right: 8px; bottom: 7px; font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
.cheki-doodle { rotate: none; }
}
/* ---------- 01 本文の紙を写真に被せる ----------
写真の下辺にはMVプレーヤーの操作表示が並ぶので、被せる前に
プレーヤーを持ち上げて帯を空ける。そうしないと紙が見出しを切る。
SPは写真も紙も画面幅いっぱいで被せる余地がないので、PCだけ。 */
/* 被せ側の目印。SPは被せないので出さない */
.tape--r2 { display: none; }
@media (min-width: 880px) {
.request-photo__mvbar { bottom: clamp(56px, 6vw, 90px); }
.scene--request .request-copy.sheet {
position: relative;
z-index: 3;
/* 行間は clamp(26px, 2.6vw, 38px)。それを食い切って写真へ乗る量 */
margin-top: calc(-1 * clamp(52px, 5.8vw, 88px));
}
.scene--request .request-copy .sheet__face {
box-shadow:
0 2px 3px rgba(37, 25, 63, 0.16),
0 18px 34px rgba(37, 25, 63, 0.26);
}
.tape--r2 {
display: block;
top: -13px;
left: 46px;
width: 96px;
height: 26px;
transform: rotate(-6deg);
}
}
/* ===================== HOW TO の重なりと空きの整理 =====================
1) COLOR BANDのチップが写真の下に潜って、端だけ出て切れて見えていた。
幅を詰めて写真の縁をまたぐ位置へ移し、写真より前に出す。
multiply なので写真に乗った側は色が沈み、紙に出た側で文字が読める。
2) 黄色いチケットが料理写真2枚のキャプションを隠していた。
写真を上げて、チケットに専用の帯を作る。
3) .howto-step の min-height 500px が中身（最大438px）に対して
大きく、01の下に150px以上の空きができていた。 */
@media (min-width: 768px) {
.howto-step { min-height: 0; }
.howto-visual--band .howto-band {
z-index: 4;
height: 32px;
/* multiply のままだと写真に乗った側が暗部に沈んで、
紙に出た分だけが「切れたチップ」に見える */
mix-blend-mode: normal;
font-size: 9px;
}
.howto-band--1 { background: rgba(255, 138, 190, 0.92); }
.howto-band--2 { background: rgba(150, 235, 246, 0.92); }
.howto-band--3 { background: rgba(255, 222, 110, 0.92); }
/* 2枚目が1枚目のキャプションに乗るので、1枚目だけ左に振る */
.howto-food__photo--1 figcaption { right: auto; left: 12px; }
.howto-band--1 { top: 4%; right: -5%; left: auto; width: 36%; }
.howto-band--2 { top: 45%; left: -7%; right: auto; width: 34%; }
.howto-band--3 { right: 6%; bottom: -3%; left: auto; width: 32%; }
.howto-food { min-height: 470px; }
.howto-food__photo--1 { top: 0; height: 52%; }
.howto-food__photo--2 { top: 7%; height: 50%; }
.howto-ticket { bottom: 0; }
}
/* ===================== フッター =====================
ヘッダーを明るくした結果、ここだけが暗い面として残っていた。
上下でミルキーグラデを挟んで綴じる。 */
.foot {
border-top: 0;
background: linear-gradient(96deg, #fff6dd 0%, #f6dcf7 26%, #ffd9ec 58%, #bdf1f7 100%);
color: var(--print-ink);
}
.foot::before {
position: absolute;
inset: 0 0 auto;
height: 3px;
background: repeating-linear-gradient(
90deg,
#ff8ac4 0 8px, #fff 8px 16px, #8fe4f0 16px 24px, #fff 24px 32px
);
opacity: 0.85;
content: "";
}
.foot { position: relative; }
.foot .bar__tag { color: #a2179e; }
.foot nav a { color: #6b4a63; }
.foot nav a:hover { color: var(--print-accent); }
.foot small { color: rgba(35, 24, 21, 0.56); }
/* SPも同じ。写真を上げてチケットに帯を作る */
@media (max-width: 767px) {
.howto-food { min-height: 476px; }
.howto-food__photo--1 { top: 0; height: 45%; }
.howto-food__photo--2 { top: 5%; height: 44%; }
.howto-food__photo--1 figcaption { right: auto; left: 10px; }
/* 目次がセクション内で sticky するので、その分だけ上げる */
.howto-ticket { bottom: 54px; }
}
/* ===================== 固定CTAバー =====================
ヘッダー・フッターと揃えて明るくする。地が不透明になるので
backdrop-filter は落とす。上辺のキャンディ罫は、明るい本文の
上に重なったときに境界を作るため。 */
.ctabar {
border-top: 0;
background: linear-gradient(96deg, #bdf1f7 0%, #ffd9ec 42%, #f6dcf7 74%, #fff6dd 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.5),
0 -10px 26px rgba(90, 60, 130, 0.16);
backdrop-filter: none;
}
.ctabar::before {
position: absolute;
inset: 0 0 auto;
height: 3px;
background: repeating-linear-gradient(
90deg,
#ff8ac4 0 8px, #fff 8px 16px, #8fe4f0 16px 24px, #fff 24px 32px
);
opacity: 0.85;
content: "";
}
.ctabar__txt b { color: var(--print-ink); }
.ctabar__txt span { color: #6b4a63; }
/* ===================== 店舗選択ダイアログ =====================
参考にした画面は黒地に金だったが、あれは却下済みの方向性。構成だけ borrow して、
このLPの語彙（ちぎれ紙・マステ・マゼンタ）で組み直す。