@charset "utf-8"; /* =============================== ROOT ===============================*/ :root { --mainMaxW: 1160px; /* js */ /* --documentHeight: ; */ --commonSidePadding: 40px; --serif: "Noto Serif JP", serif; --sans: "Noto Sans JP", sans-serif; --en: sans-serif; --fzBody: 16px; --letterBody: 1px; --lh: 1.4; --documentTextAlign: left; --primaryColor: #900000; --secondaryColor: #ff6c00; --blueColor: #004bb1; --redColor: #f00; --lightGreenColor: #52bf3f; --lightBlueColor: #00bcbf; --grayColor: #cdd6dd; --textColor: var(--lightTextColor); --lightTextColor: #fff; --darkTextColor: #4b4b4b; --bgColor: #000; --baseBgColor: #f4f4f4; /* 紙カード（song）。footer / hero の紙と同じ地の上に乗る文字色 */ --paperBgColor: #f5f0ea; --paperTextColor: #2b211e; /* release / benefits のカード幅（カンプ実測）。3カラムは 262px、単独カードは 330px */ --cdCardW: 330px; --gridGap: 84px; } html { background-color: var(--baseBgColor); } body { margin: 0 auto; background-color: var(--bgColor); color: var(--textColor); font-family: var(--serif); font-size: var(--fzBody); line-height: var(--lh); letter-spacing: var(--letterBody); text-align: var(--documentTextAlign); overflow-x: hidden; /* */ display: flex; flex-wrap: wrap; min-height: 100svh; } img { width: 100%; } .required { padding-left: 5px; color: var(--redColor); font-size: clamp(8px, 2.5vw, 12px); } /* 画面には出さず、スクリーンリーダーだけに読ませるラベル。 見出しがカリグラフィ SVG だけになる箇所（song の CD / Blu-ray）で使う。 */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* =============================== animation & transition ===============================*/ /* =============================== global =============================== */ .Gcontainer { overflow: hidden; } /* header =============================== */ /* navigation =============================== */ .Gnavi_inr { position: fixed; top: 0; right: 0; transform: translateX(100%); width: 100%; height: 100vh; transition: all 0.5s; z-index: 80; } .Gnavi_list { display: flex; flex-flow: column wrap; align-items: center; gap: 2.4rem; height: 100vh; padding-top: 60px; background: rgba(2, 121, 57, 0.95); font-weight: 700; font-size: clamp(12px, 4.5vw, 22px); } .Gnavi_item { color: var(--lightTextColor); } /* floating =============================== */ .floating { position: fixed; bottom: 0; left: 0; width: 100%; padding: 30px 0; background: #fff; z-index: 80; transition: 0.8s; } .floating.is-hide { opacity: 0; pointer-events: none; } .floating_group { display: flex; justify-content: space-around; max-width: 480px; margin: 0 auto; } .floating_item { width: 100%; text-align: center; } /* btn =============================== */ .btn { display: block; width: 100%; margin: 0 auto; padding: 4% 0; color: var(--lightTextColor); font-weight: 700; font-size: clamp(10px, 4vw, 16px); text-align: center; cursor: pointer; font-family: var(--serif); } .btn--cd { /* width: 88.8%; */ background-color: #fff; color: #0f0f0f; } .btn_submit { margin: 6% auto; background-color: var(--secondaryColor); } .btn_back { color: var(--secondaryColor); background: transparent; border: 1px solid var(--secondaryColor); } .btn_finish { margin: 50px auto; background: var(--secondaryColor); color: var(--lightTextColor); } /* footer =============================== */ .Gftr { padding: 30px 0 30px; background-color: var(--primaryColor); text-align: center; } .Gftr_copy { color: var(--lightTextColor); font-size: clamp(10px, 4vw, 19px); } /* Gmain =============================== */ .Gmain { width: 100%; } /* sec , subSec =============================== */ /* scroll reveal（SPEC §6-4）。 旧テンプレは .feature / .lesson / … という存在しないセレクタを見ていたので実名に張り替えた。 [data-reveal] は observe.js が に付ける。JS が落ちたときに全セクションが opacity:0 のまま残らないよう、初期状態そのものを JS の生存を条件にしている。 */ :root[data-reveal] .sec, :root[data-reveal] [data-fade] { opacity: 0; transition: opacity 0.8s ease; } :root[data-reveal] .sec.is-show, :root[data-reveal] [data-fade].is-show { opacity: 1; } /* =============================== component ===============================*/ /* slider =============================== */ .slider_arrow--next, .slider_arrow--prev { content: ""; position: absolute; display: flex; width: 12%; height: 24%; top: clamp(10px, 18vw, 85px); background: url(../images/arrow.png) center / 35% no-repeat #fafafa; border: 2px solid #f0f3f5; border-radius: 10px; z-index: 1; } .slider_arrow--next { right: 0; } .slider_arrow--prev { left: 0; rotate: 180deg; } /* hamburger =============================== */ .Gnavi { position: fixed; width: 100%; height: 7%; z-index: 100; } .hamburger_checkbox, .Gnavi_btn { position: absolute; top: 20%; right: 4%; width: 46px; height: 46px; cursor: pointer; transition: all 0.5s; } .hamburger_checkbox { opacity: 0; z-index: 120; } .Gnavi_btn { border-radius: 7px; background: var(--primaryColor); z-index: 110; } .hamburger { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 23px; height: 16px; } .hamburger span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2.4px; background: var(--lightTextColor); transition: all 0.5s; } .hamburger span:nth-of-type(1) { } .hamburger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); } .hamburger span:nth-of-type(3) { top: 100%; transform: translateY(-100%); width: 15px; } .hamburger_checkbox:checked ~ .Gnavi_btn .hamburger span:nth-of-type(1) { top: 50%; transform: translateY(-50%) rotate(135deg); } .hamburger_checkbox:checked ~ .Gnavi_btn .hamburger span:nth-of-type(2) { transform: translate(50%, -50%); opacity: 0; } .hamburger_checkbox:checked ~ .Gnavi_btn .hamburger span:nth-of-type(3) { top: 50%; transform: translateY(-50%) rotate(-135deg); width: 23px; } .hamburger_checkbox:checked ~ .Gnavi_inr { transform: translateX(0%); } /* =============================== project ===============================*/ /* inr =============================== */ .inr { max-width: var(--mainMaxW); margin: 0 auto; padding-left: var(--commonSidePadding); padding-right: var(--commonSidePadding); } /* bgGroup（波の境界 ＋ 背景の連続 / SPEC §6-5） =============================== sections.json のトップレベルキー 1 つ ＝ 1 グループ ＝ 1 枚の背景。 inc/section_loader.php が
で包む。 releaseSong だけ release + song の 2 section を持つので、背景が継ぎ目なく繋がる。 背景は「中身を持たない ::before」に置く。mask を当てた要素は position:fixed の 子孫に対して containing block を作ってしまうため、コンテンツと同居させない。 重なり順: .bgGroup は z-index:0 で自前のスタック文脈を作る。 - ::before(z-index:-1) はそのグループの中身より後ろ、body の黒背景より前に出る （body の背景はブロック背景として塗られるので、素の z-index:-1 だと隠れてしまう） - グループ同士は DOM 順に重なる → 後のグループの波が前のグループの上に乗り、 波の谷から前のグループの背景が覗く */ :root { /* wave.svg の自然比は 2882.87 : 408。幅に比例させると波形が歪まない。 PC 1440px → 203.8px / SP 375px → 53.1px（どちらもカンプ実測と一致）。 */ --waveH: calc(100vw * 408 / 2882.87); /* 各グループの背景レイヤ上端を、グループ先頭 section の上端から何 px 引き上げるか。 design/web_0703/jpg/PC/PC_TOP.jpg の波の頂点（y=923 / 3475 / 6213）実測。 */ --bgPullReleaseSong: 206px; --bgPullBenefits: 254px; --bgPullTieup: 242px; /* 次のグループの波の谷から自分の背景を覗かせるための、下方向のはみ出し。 はみ出した分は次のグループのレイヤが上から塗り潰すので、多めでよい。 */ --bgBleed: 340px; /* hero の下へのはみ出し。release の波の谷の深さ（≒ --waveH の 48%）に追従させる。 ビューポートが広いほど波が深くなるので、固定 px にすると谷が黒く抜ける。 */ --heroBleed: calc(var(--waveH) * 0.5 + 30px); } .bgGroup { position: relative; z-index: 0; } /* ::before = 背景画像。中身は持たない（mask が position:fixed の containing block を作るため）。 上下位置は --bgTop / --bgBottom に出してある。P8-D で色面レイヤを重ねるとき、 同じ箱に載せるために使う（`.bgGroup--{key}` 側で宣言）。 */ .bgGroup::before { content: ""; position: absolute; z-index: -1; top: var(--bgTop, 0); bottom: var(--bgBottom, 0); left: 50%; width: 100vw; margin-left: -50vw; background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; } /* 背景画像の敷き方について ------------------------------------------------------------------ 背景は「幅 %・高さ px」で置き、上端を基準（background-position の第2値）にしている。 cover や % 指定にすると、Blu-ray アコーディオンで releaseSong グループが 715px 伸びた瞬間に 背景の切り出しが変わり、色が平均 71 レベル（最大 184）動く。上端基準の px 固定なら動かない。 値は design/web_0703/jpg/PC/PC_TOP.jpg の左右端 6px を突き合わせて求めた実測値 （左右端の平均色差: releaseSong 1.6 / benefits 2.6 / tieup 2.3 / hero 6.0）。 */ /* 上端に波を持つグループ。マスクは 2 レイヤ ＝「上端の波」＋「残り全部の矩形」。 mask-image は既定で和（add）合成されるので、2 つ合わせてセクションの形になる。 --waveSrc をグループ側に置いてあるので、色面レイヤを足すときも同じマスクを流用できる。 */ .bgGroup--releaseSong, .bgGroup--benefits, .bgGroup--tieup { --waveSrc: url(../images/wave.svg); } .bgGroup--releaseSong::before, .bgGroup--benefits::before, .bgGroup--tieup::before { -webkit-mask-image: var(--waveSrc), linear-gradient(#000, #000); mask-image: var(--waveSrc), linear-gradient(#000, #000); -webkit-mask-size: 100% var(--waveH), 100% calc(100% - var(--waveH) + 1px); mask-size: 100% var(--waveH), 100% calc(100% - var(--waveH) + 1px); -webkit-mask-position: top center, bottom center; mask-position: top center, bottom center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* hero は上に何も無いので波を持たない。背景はカンプ実測どおり「幅に合わせて上寄せ」。 100svh が高い端末では画像（幅の 0.716 倍の高さ）が足りなくなるので、 releaseSong と同じく最下行の色をそのまま伸ばした裾を下に敷く。 */ .bgGroup--hero { --bgTop: 0; --bgBottom: calc(var(--heroBleed) * -1); } .bgGroup--hero::before { background-image: url(../images/bg_section_01.webp), linear-gradient( to right, rgb(47, 43, 40) 0%, rgb(66, 62, 61) 12%, rgb(99, 101, 100) 25%, rgb(158, 166, 168) 38%, rgb(203, 214, 215) 50%, rgb(235, 242, 242) 62%, rgb(244, 251, 251) 75%, rgb(190, 225, 220) 88%, rgb(125, 189, 176) 100% ); background-position: center top, center bottom; background-size: 100% auto, 100% 100%; } /* release + song。ここだけアコーディオンで高さが変わる。 bg_section_02 はカンプの位置に置くと開いた状態に 501px 足りないので、 画像の最下行の色をそのまま横グラデーションにした「裾」を下に敷いて繋ぐ （閉じている間は benefits の背景に隠れて見えない）。 */ .bgGroup--releaseSong { --bgTop: calc(var(--bgPullReleaseSong) * -1); --bgBottom: calc(var(--bgBleed) * -1); } .bgGroup--releaseSong::before { background-image: url(../images/bg_section_02.webp), linear-gradient( to right, rgb(4, 4, 4) 0%, rgb(22, 23, 20) 12%, rgb(52, 53, 50) 25%, rgb(79, 81, 78) 38%, rgb(92, 97, 96) 50%, rgb(94, 99, 98) 62%, rgb(85, 92, 92) 75%, rgb(79, 82, 83) 88%, rgb(75, 77, 78) 100% ); background-position: center -1274px, center top; background-size: 110% 4138px, 100% 100%; } /* カンプでは song → benefits の境界だけ波が左右反転している（§6-5 / wave--flip.svg）。 */ .bgGroup--benefits { --waveSrc: url(../images/wave--flip.svg); --bgTop: calc(var(--bgPullBenefits) * -1); --bgBottom: calc(var(--bgBleed) * -1); } .bgGroup--benefits::before { background-image: url(../images/bg_section_03.webp); background-position: center -180px; background-size: 105% 3950px; } /* 最後のグループ。下は footer なので はみ出させない。 */ .bgGroup--tieup { --bgTop: calc(var(--bgPullTieup) * -1); --bgBottom: 0; } .bgGroup--tieup::before { background-image: url(../images/bg_section_04.webp); background-position: center -1200px; background-size: 110% 4138px; } /* 背景フィルム風アニメ（WebGL / SPEC §6-6・HANDSON P8-D） =============================== assets/js/modules/bgFilm.js が各 .bgGroup の末尾へ
を挿す。 WebGL 不可 / reduced-motion / 低性能では要素そのものが作られない ＝ 静止背景のまま。 なぜ「ラッパに mask ＋ mix-blend-mode、中身は position:fixed の canvas」なのか（すべて実測で確認） - blend を canvas 側に置くと合成が効かない。mask を持つ .bgFilm が isolated group になり、 canvas は .bgFilm の中の透明な背景としか混ざらなくなる。blend は mask と同じ要素に置く。 - 波マスクの寸法はグループ高さ基準（100%）。canvas はビューポート基準なので、 canvas 自身にマスクを当てると波がスクロールに追従してしまう。 - position:sticky は使えない。#Gcontainer が overflow:hidden ＝ スクロールコンテナなので、 sticky は「スクロールしない箱」に貼り付いて完全に不活性になる（実測: スクロール量そのまま流れる）。 - rAF で translate3d を書く手動ピン留めは、スクロール合成より 1 フレーム遅れて 進行方向と逆の端が見える（ユーザー報告）→ position:fixed に変更。 - fixed が使えるのは実測で確認済み。containing block を作るのは filter / transform 系で、 mask は作らない（SPEC §6-6 の警告は filter の話）。mask ラッパ＋ overflow:hidden の コンテナ内でも fixed はビューポート基準・mask クリップ有効・blend 理論値一致。 - z-index / 重なり順も fixed で不変（描画は tree order のまま .bgFilm 内）。 z-index:-1 かつ ::before より後 ＝ 背景画像の上・セクションの下。 検証: 背景 #404040 に rgb(191,64,128) を hard-light → 実測 (159,32,65)＝理論値。 色面は「ビューポートに貼り付いた絵」を JS がオフセット付きで転写している。 グループの高さが変わっても見た目が動かない（Blu-ray アコーディオン対策 / SPEC §6-6）。 reduced-motion での打ち消しは、このファイル末尾側の @media (prefers-reduced-motion: reduce) にまとめてある。 */ .bgFilm { position: absolute; z-index: -1; top: var(--bgTop, 0); bottom: var(--bgBottom, 0); left: 50%; width: 100vw; margin-left: -50vw; /* blend / opacity は 2026-07-10 にユーザーが 6 案から選定。 overlay 0.80 = 背景の平均彩度 0.094 → 0.370、静止背景との輝度相関 0.956 （＝レインボーを乗せつつ bg_section_0x の階調が残る）。 hard-light はもっと彩度が出るが相関 0.886 まで落ちて写真が溶ける。 color は相関 0.998 まで保つが、輝度を背景から取る blend なので粒子が消える。 */ opacity: var(--bgFilmOpacity, 0.8); mix-blend-mode: var(--bgFilmBlend, overlay); pointer-events: none; /* canvas は fixed で常にビューポート全面。この矩形マスクがラッパの箱の外を落とすことで、 グループ外へのはみ出しを防ぐ（mask-repeat:no-repeat ＝ 箱の外は透明）。 波を持つグループでは下の波マスクがこれを上書きする。 */ -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .bgFilm_canvas { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } /* ::before と同じ波マスク。--waveSrc / --waveH はグループ側の宣言をそのまま使う。 */ .bgGroup--releaseSong .bgFilm, .bgGroup--benefits .bgFilm, .bgGroup--tieup .bgFilm { -webkit-mask-image: var(--waveSrc), linear-gradient(#000, #000); mask-image: var(--waveSrc), linear-gradient(#000, #000); -webkit-mask-size: 100% var(--waveH), 100% calc(100% - var(--waveH) + 1px); mask-size: 100% var(--waveH), 100% calc(100% - var(--waveH) + 1px); -webkit-mask-position: top center, bottom center; mask-position: top center, bottom center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* hero の背景（bg_section_01）は淡いパステル。他グループと同じ 0.80 を乗せると 輝度相関が 0.880 まで落ちて、そこだけ写真が溶ける。0.55 で 0.941 ＝ 他グループ（0.956）と釣り合う。 0 にすればそのグループだけ静止背景に戻せる。 */ .bgGroup--hero { --bgFilmOpacity: 0.55; } .sec_hdr { position: relative; z-index: 1; } .sec_body { position: relative; z-index: 0; } /* カリグラフィ題字。sec_hdr（position:relative / 左端 = inr の content-left = 180px）を基準に絶対配置。 left/top は design/web_0703/jpg/PC/PC_TOP.jpg の実測。 黄色ピクセルの bbox は viewBox より内側に入る（SVG 内の余白）ため、 「カンプの bbox 座標 − SVG 内余白 − 180」で left を出している。 */ .sec_ttl { position: absolute; } .sec_ttl svg { display: block; width: 100%; height: auto; } /* カリグラフィの「書かれてる風」描画（SPEC §6-3 ②・段階リビール） ------------------------------------------------------------------ §6-3 ① の「.sec_hdr ごと clip-path で左→右にワイプ」は本プロジェクトでは使えない。 .sec_hdr は紙ラベルの高さ（1080×32px）しか無く、題字 .sec_ttl は position:absolute で top:-83px / left:-84px と外へ大きくはみ出している。clip-path は子孫をボーダーボックスで 刈るので、ワイプ完了後（inset(0 0 0 0)）でも題字の 7 割強が消える（実測: 黄色画素が Release 27.4% / Song 25.9% しか残らない）。 → 題字の各 （＝一画）自身に掛ける。SVG 要素の clip-path の基準ボックスは fill-box なので、inset(0 100% 0 0) はその一画の左端から始まり、右へ開く。 これを左端の順に時差で走らせると「左から書かれていく」ように見える。 --i は observe.js が付ける。SVG の DOM 順は書き順ではない （例: Song の path は S → g → n → o の順で出力されている）ため、 画面上の左端でソートし直した順番を渡してくる。 終端を inset(-2px) にしているのは、inset(0) だと fill-box の縁で アンチエイリアスが 1px 削れるため。 */ :root { --ttlWipeDur: 620ms; --ttlWipeStep: 70ms; /* 一画ごとの遅延 */ --ttlWipeEase: cubic-bezier(0.33, 0.8, 0.4, 1); } :root[data-reveal] .sec_ttl svg path, :root[data-reveal] .song_disc svg path { clip-path: inset(0 100% 0 0); transition: clip-path var(--ttlWipeDur) var(--ttlWipeEase) calc(var(--i, 0) * var(--ttlWipeStep)); } :root[data-reveal] .sec_hdr.is-slide-in .sec_ttl svg path, :root[data-reveal] .song_disc.is-slide-in svg path { clip-path: inset(-2px); } @media (prefers-reduced-motion: reduce) { :root[data-reveal] .sec, :root[data-reveal] [data-fade] { transition: none; } :root[data-reveal] .sec_ttl svg path, :root[data-reveal] .song_disc svg path { clip-path: none; transition: none; } /* 背景フィルム（SPEC §6-6）。bgFilm.js は要素自体を作らないが、 OS 設定を切り替えた直後に取り残された分もここで消える。 */ .bgFilm { display: none; } } /* 紙ラベル。line-height:1 でカンプの帯の高さ（26px）に合わせる。 */ .sec_subTtl { display: inline-block; margin-bottom: 6px; padding: 5px 8px; background: url(../images/bg.jpg) center / cover repeat; color: var(--darkTextColor); font-weight: 600; line-height: 1; } .sec_ttl--release { left: -84px; top: -83px; width: 605px; z-index: -1; } .sec_ttl--song { left: 637px; top: -59px; width: 400px; } .sec_ttl--benefits { left: 15px; top: -139px; width: 551px; } .sec_ttl--tieup { left: 588px; top: -137px; width: 488px; } /* ラベルは題字に対して左右どちらに寄るかがセクションごとに違う（カンプ準拠）。 */ .sec_hdr--song, .sec_hdr--tieup { text-align: right; } .sec_subTtl--release { margin-left: 63px; } .sec_subTtl--song { margin-right: 232px; } .sec_subTtl--benefits { margin-left: 93px; } .sec_subTtl--tieup { margin-right: 77px; } /* hero =============================== 額縁マスクは part/hero.php の （clipPathUnits="objectBoundingBox"）。 .hero_pic の縦位置は design/web_0703/jpg/PC/PC_TOP.jpg の実測（1440×940 換算で y68-855）。 左右はカンプでは非対称だが、指示により中央寄せ（余白 10.3% ずつ）にしている。 */ /* 額縁の開き具合（§6-2）。1 = 原寸。 @property で登録することで「1つの数値」として補間できる。 .hero_pic の scale と .hero_img の逆 scale が常に同じ瞬間値を参照するため、打ち消しが厳密になる。 */ @property --heroMaskScale { syntax: ""; inherits: true; initial-value: 1; } :root { /* === 額縁アニメの調整値（ここだけ触れば速さ・縮み具合・イージングが変わる） === */ --heroMaskScaleStart: 0.8; /* 拡がる前の縮小率。小さいほど大きく開く */ --heroMaskDur: 1200ms; /* 拡がりきるまでの時間 */ --heroMaskEase: var(--loadingEase, ease-out); /* 20_loading.css の cubic-bezier(0.22, 0.61, 0.36, 1) */ /* hero の最小高さ。100svh より背の高いコンテンツ（縦題 587px + New E.P）が入るため、 ビューポートが低いときはこちらが勝ってセクションが伸びる。 */ --heroMinH: 810px; /* loading.php のインラインスクリプトが初回ペイント前に data-load="loading" を立て、 loading.js が終端で "done" に変える。その瞬間に縮小率 → 1（＝初期値）へ遷移する。 JS が動かず data-load が付かない場合は最初から 1（＝開いたまま）。 */ transition: --heroMaskScale var(--heroMaskDur) var(--heroMaskEase); } :root[data-load="loading"] { --heroMaskScale: var(--heroMaskScaleStart); } @media (prefers-reduced-motion: reduce) { :root { transition: none; } :root[data-load="loading"] { --heroMaskScale: 1; } } .hero_body { /* body が flex コンテナのため、100vw を指定しないと #Gcontainer が内容幅に縮む */ width: 100vw; height: 100svh; min-height: var(--heroMinH); position: relative; overflow: hidden; /* 額縁の外側に見える地色（bg_section_01）は .bgGroup--hero::before が描く。 hero_body は overflow:hidden なので、次のセクションの波の谷に覗かせる はみ出し分（--heroBleed）をここから出すことができない。 */ } /* 枠が拡がって固定（§6-2）。 clipPath の中身は非レンダリング要素なので、path を transform しても animation/transition が走らない。 そこで「クリップされる箱（.hero_pic）を縮め、中の写真を逆 scale で打ち消す」構成にする。 object-fit の計算は transform 前の箱で行われるため、写真の大きさ・トリミングは一定のまま枠だけが拡がる。 2つの scale は同じ --heroMaskScale の同一瞬間値から計算されるので、常に厳密に打ち消し合う。 */ .hero_pic { position: absolute; top: 7.2%; right: 10.3%; bottom: 9.1%; left: 10.3%; clip-path: url(#heroMask--pc); transform: scale(var(--heroMaskScale, 1)); } .hero_pic picture { display: block; width: 100%; height: 100%; } .hero_img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(calc(1 / var(--heroMaskScale, 1))); } /* clipPath 定義用の SVG。レイアウトに影響させない */ .hero_masks { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .pop_ttls { position: absolute; inset: 0; z-index: 2; /* pointer-events: none; */ } /* 縦題の紙。元の pop_ttl01.svg は同じ紙テクスチャを base64 PNG（466KB）で内包していたが、 footer（.Gftr）と同素材だったため SVG からは赤字の path だけを残し、地は CSS 背景に置き換えた。 inset は元 SVG の紙の矩形（x 0-86.283 / y 5.1-579.523 を viewBox 94.257×587.292 で割った値）。 「／」の払いは紙からはみ出すので、紙は要素いっぱいには敷かない。 */ .pop_ttl--main { position: absolute; left: 56px; bottom: 56px; } .pop_ttl--main::before { content: ""; position: absolute; inset: 0.87% 8.46% 1.32% 0; background: url(../images/bg--ftr.webp) center / cover no-repeat; } .pop_ttl--main svg { /* ::before より後に描かせる（どちらも positioned なので木の順序で決まる） */ position: relative; display: block; } .pop_ttl--detail { position: absolute; right: 34px; top: 40px; display: flex; flex-direction: column; align-items: center; } .hero_texts { height: 100svh; display: flex; justify-content: space-between; /* writing-mode: vertical-rl; */ align-items: flex-start; position: absolute; inset: 0; } .hero_texts { z-index: 2; height: 100%; margin-right: 11px; padding-top: 24px; writing-mode: vertical-rl; color: var(--lightTextColor); font-size: clamp(10px, 3.95vw, 13px); font-weight: 400; } .hero_texts--specials { text-emphasis: right; } .hero_texts--scroll { /* font-size: clamp(10px, 3.95vw, 12px); */ text-align: center; } /* release =============================== */ .release { margin-top: 189px; } .cd { text-align: center; } /* カード。ヘッダ / 本文 / ボタンの3段。本文を 1fr にして、 注記の行数が違ってもボタンの高さが揃うようにしている。 */ .product_card { display: grid; grid-template-rows: auto 1fr auto; } /* 特典盤（OKKAKE）はグリッドの外に単独で置く。 */ .product_card--okkake { width: 100%; max-width: var(--cdCardW); margin: 0 auto; padding-bottom: 84px; } /* 3枚 × 262px ＋ gap 84px × 2 ＝ 954px（カンプ実測）。 */ .product_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 84px; max-width: 954px; margin: 0 auto; } .cd_hdr { margin-bottom: 24px; } .cd_ttl { font-size: clamp(12px, 4.5vw, 20px); font-weight: 700; padding-bottom: 8px; color: var(--primaryColor); } .cd_subTtl { font-size: clamp(12px, 4.5vw, 15px); font-weight: 600; padding-bottom: 22px; letter-spacing: 0.12em; } .cd_label { font-size: clamp(12px, 4.5vw, 14px); font-weight: 700; padding: 2px 4px; background-color: var(--primaryColor); display: inline-block; } .cd_body { display: grid; grid-template-rows: auto 1fr; font-family: var(--sans); font-weight: 400; font-size: clamp(12px, 4.5vw, 13px); } .cd_pic { margin-bottom: 12px; } .cd_nots { margin-bottom: 24px; min-height: 6em; /* body の 1px 字送りのままだと、カード幅 262px に「・TVアニメ『ワールド イズ ダンシング』」が収まらない */ letter-spacing: 0.02em; text-align: left; } /* 「・」始まりの注記。折り返した2行目を「・」の右に揃える。 */ .cd_nots p { padding-left: 1em; text-indent: -1em; } .cd_price { margin-bottom: 24px; padding-left: 0; text-indent: 0; text-align: center; } .cd_btns { margin-top: auto; } /* [legacy] lesson ※旧テンプレ・本EP未使用 =============================== */ /* [legacy] grade ※旧テンプレ・本EP未使用 =============================== */ .grade_inr { padding-bottom: 30px; } .grade_img { position: relative; } .grade_overlay { position: absolute; top: 50%; left: 52.5%; width: 41.3%; transform: translateY(-50%); } .grade_btn { padding: 11% 0; border: 1px solid var(--lightTextColor); color: var(--lightTextColor); font-weight: 700; font-size: clamp(10px, 3.95vw, 18px); text-align: center; } .grade_btn span:before { content: "詳しく見る ▼"; } .grade_unit .is-active .grade_btn span:before { content: "閉じる ▲"; } .grade_unit .is-active { max-height: 1000vh; } .grade_text { padding: 4% 0; } /* song =============================== 紙カードに CD（常時表示）と Blu-ray（アコーディオン）を積む。 罫線の付き方がカンプの肝: CD … h3 の上下に罫線（リストの下には引かない） Blu-ray … h3 の上だけに罫線。下罫線は「パネル」に付ける。 閉じているとパネルは高さ0なので罫線が h3 の直下に来て、 開くと曲リストの下へ降りる（カンプの開閉2状態と一致）。 */ /* セクション間の余白は design/web_0703/jpg/PC/PC_TOP.jpg の実測。 背景は .bgGroup--releaseSong が release とまとめて 1 枚で敷く（P7）。 */ .song { margin-top: 178px; } .song_wrap { padding-top: 33px; text-align: center; } .song_paper { max-width: 640px; margin: 0 auto; padding: 63px 68px 48px; /* Blu-ray を開くと紙が倍近く伸びる。cover だとそのたびにテクスチャが拡大されてしまうので、 bg--ftr を 90 度回した縦長版（738×2880）を「幅ぴったり・高さは原寸比」で敷く。 紙幅 640px なら背景高さ 2498px ＝ 開いた紙（約 1342px）より高いので継ぎ目は出ない。 SP（紙幅 333px → 背景高さ 1300px）だけは足りないことがあるため repeat-y を保険に付ける。 */ background: var(--paperBgColor) url(../images/bg--ftr--rot90.webp) top center / 100% auto repeat-y; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); text-align: left; color: var(--paperTextColor); line-height: 1.8; letter-spacing: 0.04em; } .song_disc { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--primaryColor); } .song_disc svg { display: block; } .song_disc--cd { border-bottom: 1px solid var(--primaryColor); } .song_disc--bluray { position: relative; margin-top: 69px; } /* 右端の ＋ / −。2本の線を重ね、縦棒だけを回して消す。 */ .song_disc--bluray::before, .song_disc--bluray::after { content: ""; position: absolute; top: 50%; right: 0; width: 24px; height: 1px; background: var(--primaryColor); } .song_disc--bluray::after { transform: rotate(90deg); transition: transform 0.35s ease; } .song_disc--bluray.is-active::after { transform: rotate(0deg); } .song_list--cd { padding: 42px 0 0 90px; } /* 閉じている間に中身がはみ出さないようにする（.rim1_accordionUi_hide は overflow 未指定）。 */ .song_list--bluray { overflow: hidden; border-bottom: 1px solid var(--primaryColor); } .song_tracks { font-size: 19px; line-height: 2.53; } .song_track_no { display: inline-block; min-width: 1.3em; } .song_note { margin-top: 42px; font-family: var(--sans); font-size: 12px; line-height: 2.17; letter-spacing: 0; } .song_lead { padding: 22px 0 0 8px; } .song_lead_ttl { font-weight: 700; font-size: 15px; line-height: 1.83; } .song_lead_text { margin-top: 17px; font-size: 13px; } /* 01-11 を左、12-22 を右に流す（カンプの2カラム）。SP は 90_style_sp.css で1カラムへ戻す。 */ .song_tracks--bluray { display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, auto); grid-template-columns: 264px auto; padding: 40px 0 47px 20px; font-size: 15px; line-height: 2.93; } .song_tracks--bluray .song_track_no { min-width: 2.4em; } /* [legacy] comparison ※旧テンプレ・本EP未使用 =============================== */ /* benefits =============================== ロゴ・特典画像は未支給。PHP 側が Coming soon プレースホルダを出す（part/benefits.php）。 */ .benefits { margin-top: 424px; padding-top: 58px; } .benefits_wrap { text-align: center; } /* 紙のラベル帯。早期予約特典は固定幅、法人特典は inr 全幅。 地は .sec_subTtl と同じ bg.jpg（bg--ftr.webp は横長すぎて、細い帯に cover すると雲模様が出る）。 */ .benefits_label { display: inline-block; min-width: 303px; margin-bottom: 28px; padding: 7px 40px; background: var(--paperBgColor) url(../images/bg.jpg) center / cover repeat; color: var(--primaryColor); font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: 0.14em; text-align: center; } .benefits_label--wide { display: block; width: 100%; margin-bottom: 43px; } .benefits_block--eager { padding-top: 66px; margin-bottom: 106px; } .benefits_ttl { font-weight: 700; font-size: 18px; line-height: 1.65; } .benefits_texts { max-width: var(--cdCardW); margin: 12px auto 5px; padding-left: 20px; font-size: 13px; line-height: 2; text-align: left; } .benefits_imgWrap { max-width: var(--cdCardW); margin: 0 auto; background: #fff; } .benefits_img { display: block; width: 100%; } /* release の .product_list と同じ 262px × 3 ＋ gap 84px。 */ .benefits_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px var(--gridGap); max-width: 954px; margin: 0 auto; text-align: center; } /* 店舗名の行数が列ごとに違っても（アニメイトだけ3行）、画像の上端が揃うようにする。 min-width:0 が無いと、grid item の min-width:auto（= min-content）が列幅を押し広げる。 */ .benefits_item { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); min-width: 0; } .benefits_list--general { margin-top: 87px; } .benefits_names { margin-bottom: 27px; } .benefits_shop { display: block; font-weight: 700; font-size: 15px; line-height: 1.7; } .benefits_name { display: block; font-weight: 700; font-size: 15px; line-height: 1.7; letter-spacing: 0; } .benefits_name--small { font-size: 11px; } .benefits_logo { display: block; width: 100%; background: #fff; } .benefits_logo--soon { display: grid; place-items: center; aspect-ratio: 1; } .comingSoon { color: var(--darkTextColor); font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; } .benefits_ftr { margin-top: 100px; } .benefits_note { max-width: 530px; margin: 0 auto; font-size: 13px; font-weight: 600; line-height: 2; color: var(--darkTextColor); text-align: left; } .benefits_btns { max-width: 400px; margin: 74px auto 0; } /* tieup =============================== 動画は observe.js initLazyLoad が data-src → src へ昇格させる。 昇格前は iframe を隠し、白い箱と CSS/SVG の再生ボタンだけを見せる（カンプの状態）。 */ .tieup { margin-top: 367px; padding-top: 72px; padding-bottom: 150px; } .tieup_wrap { text-align: center; } .tieup_copy { padding-top: 37px; } .tieup_lead { font-size: 22px; letter-spacing: 0.08em; } .tieup_ttl { margin: 15px 0 30px; font-weight: 700; font-size: 30px; letter-spacing: 0.04em; } .tieup_info { font-size: 14px; line-height: 2.6; letter-spacing: 0.06em; } .tieup_imgWrap { max-width: 740px; margin: 34px auto 71px; } .tieup_img { display: block; width: 100%; } .tieup_videoWrap { position: relative; max-width: 740px; margin: 0 auto; background: #fff; } .tieup_video { border: 0; } /* src へ昇格するまでは iframe を出さない（白箱＋再生ボタンを見せる） */ .tieup_video:not([src]) { visibility: hidden; } .tieup_play { position: absolute; inset: 0; margin: auto; width: 167px; height: 167px; pointer-events: none; } .tieup_credit { margin-top: 26px; font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); } /* [legacy] contact ※メールフォーム無効・本EP未使用 =============================== */ .contact { padding-bottom: 50px; } .sec_ttl--contact { padding: 50px 0; font-weight: 700; font-size: clamp(12px, 4.5vw, 22px); text-align: center; } .form_item { margin: 15px 0; padding: 0 7%; } .form_text { padding: 10px 0; font-size: clamp(9px, 2.7vw, 13px); font-weight: 500; } .form_btns { margin-top: 10%; text-align: center; } .form_error { margin-top: 0.5em; color: red; font-size: 0.85em; } /* tab switch */ .tab_wrap { display: flex; flex-wrap: wrap; margin: 20px 0; } .tab_label { position: relative; padding: 10px 0.5em 10px 0; outline-offset: 1px; color: var(--lightTextColor); font-weight: 700; font-size: clamp(10px, 4.6vw, 22px); white-space: nowrap; text-align: center; order: -1; z-index: 1; cursor: pointer; flex: 1; filter: grayscale(80%); } .tab_label--ess { outline: 2px solid var(--lightBlueColor); background: var(--lightBlueColor); } .tab_label--jhss { outline: 2px solid var(--lightGreenColor); background: var(--lightGreenColor); } .tab_label:not(:last-of-type) { margin-right: 7%; } .tab_label span:before { content: "▼"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .tab_content { width: 100%; height: 0; overflow: hidden; opacity: 0; } .tab_switch:checked + .tab_label { filter: grayscale(0%); } .tab_switch:checked + .tab_label + .tab_content { height: auto; overflow: auto; padding: 15px; opacity: 1; transition: 0.5s opacity; } .tab_switch { display: none; } .form_content { transition: 1s; } .form_content:not(.is-active), .form_content:not(.is-active) * { max-height: 0; opacity: 0; pointer-events: none; } /* form confirm */ .form_list--confirm { margin-top: 2rem; } .form_item--confirm { margin: 0; } .form_term { margin-top: 1em; font-weight: normal; text-align: left; background-color: #ececec; } .form_desc { } .form_term, .form_desc { width: 100%; padding: 0.5em; } .form_btn:not(:first-child) { margin-top: 1em; } /* init */ input[type="text"], input[type="email"], input[type="tel"], input[type="tel"], input[type="url"], select { width: 100%; padding: 4%; background-color: #fff; font-size: clamp(8px, 3.4vw, 16px); box-shadow: 0 0 0 1px var(--grayColor) inset; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus { outline: none; box-shadow: 0 0 0 2px var(--blueColor) inset; } ::placeholder { color: var(--grayColor); } .radio-list { display: flex; flex-flow: row wrap; padding: 5px 0; } .radio-list li { padding: 5px 0; } .radio-list li:not(:last-child) { padding-right: 4.6%; } input[type="radio"] { display: none; } .square_checkbox { position: relative; padding-left: 25px; font-size: clamp(8px, 3.4vw, 16px); white-space: nowrap; cursor: pointer; } .square_checkbox:after { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; border: 1px solid var(--grayColor); border-radius: 5px; font-size: clamp(8px, 3.4vw, 16px); } .square_checkbox:before { content: ""; display: block; opacity: 0; position: absolute; top: 50%; left: 4px; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--blueColor); } .square_checkbox:hover:after { border-color: var(--blueColor); } input[type="radio"]:checked + .square_checkbox:before, input[type="checkbox"]:checked + .square_checkbox:before { opacity: 1; } /* validation */ .validation { padding: 3rem 7%; color: red; } .validation_texts { margin-top: 1rem; } /* confirm_text */ .confirm_text { padding: 0 7%; font-size: clamp(8px, 3.4vw, 16px); text-align: center; } .form_term, .form_desc { font-size: clamp(8px, 3.4vw, 16px); } /* finish */ .finish_texts { margin-top: 2em; text-align: center; } /* g-footer ===============================*/ .Gftr { padding: 34px 0 44px; background: #efebe7; color: #6e4b4b; text-align: center; background: url(../images/bg--ftr.webp) center / contain repeat; } .Gftr_sns { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; } .Gftr_sns a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .Gftr_url { display: inline-block; margin-bottom: 8px; font-size: 9px; letter-spacing: 0.04em; color: inherit; } .Gftr_copy { font-size: 8px; letter-spacing: 0.08em; color: inherit; }