@charset "UTF-8";
/* ===== Page-level Override =====
lp_common.css で html, body に height:100% が指定されている影響で、
本文が viewport より長くなると と の両方に縦スクロール
バーが表示されてしまう（特にPC）。このLPでは高さ指定を解除する。 */
html,
body {
height: auto;
min-height: 100%;
}
/* ===== Reset & Base (scoped to #oshi-collection) ===== */
#oshi-collection *,
#oshi-collection *::before,
#oshi-collection *::after {
box-sizing: border-box;
}
#oshi-collection {
scroll-behavior: smooth;
background: #000;
overflow-x: hidden;
min-width: 320px;
font-family: 'Noto Sans JP', sans-serif;
color: #000;
scrollbar-width: none;
}
#oshi-collection img {
max-width: 100%;
height: auto;
display: block;
}
#oshi-collection picture {
display: block;
font-size: 0;
line-height: 0;
}
/* ===== Common Layout ===== */
#oshi-collection #container {
overflow: hidden;
}
#oshi-collection #lp_wrapper {
background: transparent;
box-shadow: none;
}
/* レイアウト要素のmargin/padding/gapリセット（隙間防止） */
#oshi-collection .lp_main,
#oshi-collection main,
#oshi-collection main > section {
margin: 0;
padding: 0;
gap: 0;
}
#oshi-collection #lp_header_area,
#oshi-collection #lp_footer_area {
position: relative;
z-index: 5;
}
#oshi-collection .reserved {
pointer-events: none;
}
/* ===== Responsive Visibility =====
PHP側で ![]()
/ を直接出力 */
/* SP（デフォルト）: PC用を非表示、SP用を表示 */
#oshi-collection .pc-only-wrap { display: none !important; }
#oshi-collection .sp-only-wrap { display: block !important; width: 100%; }
/* fv-bg・各セクション内の picture / img は必ず幅100%で敷き詰め、
sub-pixel rendering の隙間も画像自体の負marginで潰す */
#oshi-collection .fv-bg picture,
#oshi-collection .fv-bg > img,
#oshi-collection .reward-content picture,
#oshi-collection .reward-content > img,
#oshi-collection .system-content picture,
#oshi-collection .system-content > img {
display: block;
width: 100%;
font-size: 0;
line-height: 0;
vertical-align: bottom;
margin-bottom: -1px;
}
/* picture 内の ![]()
も baseline 隙間防止 */
#oshi-collection .fv-bg img,
#oshi-collection .reward-content img,
#oshi-collection .system-content img {
display: block;
vertical-align: bottom;
}
/* それでも残る隙間用に、後続セクションを 1px だけ重ねる
（html/body の height:auto 化で2本スクロール問題は解消済みなので安全） */
#oshi-collection main > section + section {
margin-top: -1px;
}
/* ===== Section Common ===== */
#oshi-collection section {
position: relative;
}
/* ===== FV Section (MV) ===== */
#oshi-collection .section-fv {
width: 100%;
position: relative;
}
#oshi-collection .fv-bg {
width: 100%;
font-size: 0;
line-height: 0;
}
#oshi-collection .fv-bg img {
display: block;
width: 100%;
height: auto;
}
#oshi-collection .fv-content {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ロゴ: bg_01_sp の女子高生キャラのスカート〜下寄りに、小さめに配置 */
#oshi-collection .fv-logo {
position: absolute;
z-index: 2;
top: 71%;
left: 50%;
transform: translate(-50%, -50%);
width: 28vw;
max-width: 170px;
}
#oshi-collection .fv-logo img {
width: 100%;
height: auto;
}
/* FV内ボタン群はFV bgの下端中央に絶対配置 */
#oshi-collection .fv-title-area {
position: absolute;
z-index: 2;
bottom: 5vw;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
}
#oshi-collection .fv_btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 2vw;
}
#oshi-collection .fv_btn a {
text-align: center;
}
/* ===== Register Button 共通ベース ===== */
/* .btn (a の親) にも幅を持たせないと flex内で 0px に潰れる */
#oshi-collection .fv_btn .btn {
width: 70%;
max-width: 360px;
}
#oshi-collection .section-btn .btn {
width: 70%;
max-width: 400px;
}
/* aspect-ratio はボタン種別ごとに個別指定 */
#oshi-collection .btn a {
display: block;
width: 100%;
margin: 0 auto;
font-size: 0;
color: transparent;
text-decoration: none;
background: no-repeat center / 100% 100%;
}
/* ===== FV内 事前登録ボタン =====
SP: 横長 (preregistration 560×126)
PC: @media (min-width:769px) で丸型 (preregistration2) に切替 */
#oshi-collection .fv_btn .btn a {
aspect-ratio: 560 / 126;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.png);
}
.webp #oshi-collection .fv_btn .btn a {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.webp);
}
#oshi-collection .fv_btn .btn a:hover,
#oshi-collection .fv_btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.png);
}
.webp #oshi-collection .fv_btn .btn a:hover,
.webp #oshi-collection .fv_btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.webp);
}
#oshi-collection .fv_btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_disabled.png);
}
.webp #oshi-collection .fv_btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_disabled.webp);
}
/* FV内 ゲームスタート (play_game - SP用横長 560×126) */
#oshi-collection .fv_btn .btn a.end {
aspect-ratio: 560 / 126;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.png);
}
.webp #oshi-collection .fv_btn .btn a.end {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.webp);
}
#oshi-collection .fv_btn .btn a.end:hover,
#oshi-collection .fv_btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.png);
}
.webp #oshi-collection .fv_btn .btn a.end:hover,
.webp #oshi-collection .fv_btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.webp);
}
/* ===== セクション内 事前登録ボタン (SP: preregistration 横長 560×126) ===== */
/* SPは横長ボタンに統一。PC のみ丸ボタン(preregistration2)を使う */
#oshi-collection .section-btn .btn a {
aspect-ratio: 560 / 126;
width: 100%;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.png);
}
.webp #oshi-collection .section-btn .btn a {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.webp);
}
#oshi-collection .section-btn .btn a:hover,
#oshi-collection .section-btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.png);
}
.webp #oshi-collection .section-btn .btn a:hover,
.webp #oshi-collection .section-btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.webp);
}
#oshi-collection .section-btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_disabled.png);
}
.webp #oshi-collection .section-btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_disabled.webp);
}
/* セクション内 ゲームスタート (SP: play_game 横長 560×126) */
#oshi-collection .section-btn .btn a.end {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.png);
}
.webp #oshi-collection .section-btn .btn a.end {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.webp);
}
#oshi-collection .section-btn .btn a.end:hover,
#oshi-collection .section-btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.png);
}
.webp #oshi-collection .section-btn .btn a.end:hover,
.webp #oshi-collection .section-btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.webp);
}
/* ===== Detail Button (事前登録詳細 - preregistration_info 141×64) =====
FV内の "詳細(必読)" リンクと、その上に表示される両対応バッジを
ボタンの上(右寄り)に絶対配置 */
#oshi-collection .fv_btn .detail {
position: absolute;
bottom: calc(100% + 6vw); /* 事前登録ボタンの上に配置 */
right: 0;
display: flex;
flex-direction: column-reverse; /* SP: バッジ(device)が上、詳細リンクが下 */
align-items: flex-end;
gap: 1vw;
}
#oshi-collection .btn-detail-link {
display: inline-block;
width: 28vw;
max-width: 100px;
aspect-ratio: 141 / 64;
font-size: 0;
color: transparent;
text-decoration: none;
border: none;
background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_info.png) no-repeat center / 100% 100%;
}
.webp #oshi-collection .btn-detail-link {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_info.webp);
}
/* hover 画像への切替は ::after でクロスフェードする（下のアニメーション定義参照） */
/* ===== Device Badge (両対応バッジ icon_dual 102×107) ===== */
#oshi-collection .detail .device {
width: 18vw;
max-width: 100px;
flex-shrink: 0;
}
#oshi-collection .detail .device img {
width: 100%;
height: auto;
}
/* ===== 事前登録報酬 ===== */
#oshi-collection .section-reward {
padding: 0;
margin: 0;
position: relative;
}
#oshi-collection .reward-window {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
padding: 0;
}
#oshi-collection .reward-content {
width: 100%;
font-size: 0;
line-height: 0;
}
#oshi-collection .reward-content img {
width: 100%;
height: auto;
display: block;
}
/* ===== system ===== */
#oshi-collection .section-system {
padding: 0;
margin: 0;
position: relative;
}
#oshi-collection .system-window {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
padding: 0;
}
#oshi-collection .system-content {
width: 100%;
font-size: 0;
line-height: 0;
}
#oshi-collection .system-content img {
width: 100%;
height: auto;
display: block;
}
/* ===== Section Buttons (共通) - bg画像の上に絶対配置で浮かせる ===== */
#oshi-collection .section-btn {
position: absolute;
bottom: 7vw;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
justify-content: center;
width: 90%;
max-width: 720px;
}
/* ============================================================
PC (Desktop) Responsive - min-width: 769px
PC では bg_01.png 内のレイアウトに合わせて FV のロゴ・CTA を配置。
FV のみ事前登録は丸 (preregistration2)。報酬・システムは SP と同様の横長。
============================================================ */
@media (min-width: 769px) {
/* Responsive Visibility */
#oshi-collection .pc-only-wrap { display: block !important; width: 100%; }
#oshi-collection .sp-only-wrap { display: none !important; }
/* PC: 報酬・システムの横長ボタンは白枠の下（キャラ絵帯の中央〜下寄り）に配置 */
#oshi-collection .section-btn {
bottom: 3%;
}
/* --- FV（カンプ参考: 丸CTA中心 左70% / 上68%、ロゴ左下 左15% / 下15%）--- */
#oshi-collection .fv-title-area {
bottom: auto;
top: 68%;
left: 70%;
transform: translate(-50%, -50%);
margin: 0;
width: auto;
max-width: none;
align-items: flex-end;
}
#oshi-collection .fv-logo {
top: auto;
bottom: 15%;
left: 15%;
transform: none;
width: 14vw;
max-width: 200px;
}
#oshi-collection .fv_btn {
flex-direction: column;
align-items: flex-end;
width: auto;
gap: 0.52vw;
margin-top: 0.52vw;
}
/* FV丸ボタンはロゴと同じ大きさに揃える */
#oshi-collection .fv_btn .btn {
width: 14vw;
max-width: 200px;
}
/* FV: PCのみ事前登録ボタンを丸型 (preregistration2) */
#oshi-collection .fv_btn .btn a {
aspect-ratio: 1 / 1;
max-width: none;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.png);
}
.webp #oshi-collection .fv_btn .btn a {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.webp);
}
#oshi-collection .fv_btn .btn a:hover,
#oshi-collection .fv_btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_hover.png);
}
.webp #oshi-collection .fv_btn .btn a:hover,
.webp #oshi-collection .fv_btn .btn a:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_hover.webp);
}
#oshi-collection .fv_btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_disabled.png);
}
.webp #oshi-collection .fv_btn .btn a.reserved {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_disabled.webp);
}
/* FV: PCのゲームスタートも丸アセットに合わせる */
#oshi-collection .fv_btn .btn a.end {
aspect-ratio: 1 / 1;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.png);
}
.webp #oshi-collection .fv_btn .btn a.end {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game.webp);
}
#oshi-collection .fv_btn .btn a.end:hover,
#oshi-collection .fv_btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.png);
}
.webp #oshi-collection .fv_btn .btn a.end:hover,
.webp #oshi-collection .fv_btn .btn a.end:active {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.webp);
}
#oshi-collection .detail .device {
width: 6.17vw;
max-width: 120px;
position: relative;
top: 1vw; /* 両対応バッジだけ少し下げる */
}
/* 両対応バッジを左、詳細リンクを右（丸ボタンの上に並ぶ） */
#oshi-collection .fv_btn .detail {
flex-direction: row-reverse;
align-items: flex-end;
gap: 0.52vw;
bottom: calc(100% + 2vw); /* 丸ボタンの上に少し離して配置 */
}
/* 報酬・システム: PC も SP と同じ横長（共通スタイルのまま上書きしない） */
/* PC: 詳細リンクサイズ調整 */
#oshi-collection .btn-detail-link {
width: 8vw;
max-width: 120px;
}
}
/* ============================================================
Animations
- ロゴ: 上からスライドイン → そのまま細かく揺れる
- 事前登録ボタン: ページ表示時に 50% → 100% にスケールイン
- ボタンホバー: hover画像を ::after でクロスフェード
============================================================ */
/* --- ロゴ: スライドイン → フロート --- */
@keyframes oshiLogoSlideIn {
0% { opacity: 0; transform: translate(0, -180%); }
100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes oshiLogoFloat {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(2px, -3px) rotate(0.6deg); }
40% { transform: translate(-2px, 2px) rotate(-0.5deg); }
60% { transform: translate(2px, 1px) rotate(0.4deg); }
80% { transform: translate(-1px, -2px) rotate(-0.3deg); }
}
#oshi-collection .fv-logo img {
animation:
oshiLogoSlideIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both,
oshiLogoFloat 3.6s ease-in-out 1s infinite;
}
/* --- ロゴ: 5秒に1回 左上→右下へ光のラインが高速で走る ---
- ロゴ画像 (![]()
) 自体にはマスクをかけず、::after にだけマスクをかける
- ::after は .fv-logo と同じサイズの矩形で、背景に斜めの白グラデーション帯を置き
background-position をアニメさせて「ピカッ」と一瞬走らせる
- mask-image にロゴ画像を指定することで、光ラインがロゴのシルエット内にだけ表示される
*/
#oshi-collection .fv-logo::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0) 62%
);
background-size: 300% 100%;
background-position: 200% 0;
background-repeat: no-repeat;
-webkit-mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/logo.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/logo.png);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
animation: oshiLogoShine 5s linear infinite;
animation-delay: 1.2s; /* スライドインが終わってから走らせる */
}
@keyframes oshiLogoShine {
0% { background-position: -200% 0; opacity: 0; }
2% { opacity: 1; }
12% { background-position: 200% 0; opacity: 1; } /* ここまで約 0.6s でピカッ */
13% { opacity: 0; }
100% { background-position: 200% 0; opacity: 0; } /* 残りは待機 */
}
/* --- 事前登録ボタン: ポップイン (50% → 100%) --- */
@keyframes oshiBtnPopIn {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
#oshi-collection .fv_btn .btn a,
#oshi-collection .section-btn .btn a {
animation: oshiBtnPopIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
/* --- ボタンホバー: ::after に hover画像を重ねてクロスフェード --- */
#oshi-collection .btn a {
position: relative;
transition: transform 0.25s ease;
}
#oshi-collection .btn a::after {
content: '';
position: absolute;
inset: 0;
background: no-repeat center / 100% 100%;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
#oshi-collection .btn a:hover {
transform: scale(1.04);
}
#oshi-collection .btn a:hover::after {
opacity: 1;
}
/* 完了状態 (.reserved) はホバー演出オフ */
#oshi-collection .btn a.reserved::after { display: none; }
#oshi-collection .btn a.reserved:hover { transform: none; }
/* --- 各ボタンタイプの hover画像を ::after に割り当て --- */
/* SP / PC共通 FV: preregistration_hover (PCは下のメディアクエリで preregistration2_hover に上書き) */
#oshi-collection .fv_btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.png);
}
.webp #oshi-collection .fv_btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.webp);
}
#oshi-collection .fv_btn .btn a.end::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.png);
}
.webp #oshi-collection .fv_btn .btn a.end::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.webp);
}
/* セクション内: preregistration_hover (横長) */
#oshi-collection .section-btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.png);
}
.webp #oshi-collection .section-btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_hover.webp);
}
#oshi-collection .section-btn .btn a.end::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.png);
}
.webp #oshi-collection .section-btn .btn a.end::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/play_game_hover.webp);
}
/* PC FV: 丸ボタン用 hover (preregistration2_hover) */
@media (min-width: 769px) {
#oshi-collection .fv_btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_hover.png);
}
.webp #oshi-collection .fv_btn .btn a::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2_hover.webp);
}
}
/* --- 事前登録詳細リンク (.btn-detail-link) も hover画像を ::after でクロスフェード --- */
#oshi-collection .btn-detail-link {
position: relative;
transition: transform 0.25s ease;
}
#oshi-collection .btn-detail-link::after {
content: '';
position: absolute;
inset: 0;
background: no-repeat center / 100% 100%;
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_info_hover.png);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.webp #oshi-collection .btn-detail-link::after {
background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration_info_hover.webp);
}
#oshi-collection .btn-detail-link:hover {
transform: scale(1.04);
}
#oshi-collection .btn-detail-link:hover::after {
opacity: 1;
}
/* ============================================================
事前登録ボタン: ロゴと同じく "ピカッ" と光が走る演出
- ::after はホバー画像のクロスフェードで使用済みなので、
光ラインは ::before で実装する
- mask-image にボタン画像を指定し、ボタンのシルエットの中だけ
光が見えるようにする
- ゲームスタート (.end) と 受付終了 (.reserved) は対象外
============================================================ */
@keyframes oshiBtnShine {
0% { background-position: -200% 0; opacity: 0; }
2% { opacity: 1; }
12% { background-position: 200% 0; opacity: 1; } /* ここまで約 0.6s でピカッ */
13% { opacity: 0; }
100% { background-position: 200% 0; opacity: 0; } /* 残りは待機 */
}
#oshi-collection .fv_btn .btn a::before,
#oshi-collection .section-btn .btn a::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: linear-gradient(
115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0) 62%
);
background-size: 300% 100%;
background-position: 200% 0;
background-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
animation: oshiBtnShine 5s linear infinite;
animation-delay: 1.6s; /* ボタンのポップインが終わってから走らせる */
}
/* SP 横長ボタン (preregistration) のシルエットでマスク */
#oshi-collection .fv_btn .btn a::before,
#oshi-collection .section-btn .btn a::before {
-webkit-mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.png);
mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.png);
}
.webp #oshi-collection .fv_btn .btn a::before,
.webp #oshi-collection .section-btn .btn a::before {
-webkit-mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.webp);
mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration.webp);
}
/* PC FV のみ丸ボタン (preregistration2) のシルエットでマスク */
@media (min-width: 769px) {
#oshi-collection .fv_btn .btn a::before {
-webkit-mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.png);
mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.png);
}
.webp #oshi-collection .fv_btn .btn a::before {
-webkit-mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.webp);
mask-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/oshi-collection/preregistration2.webp);
}
}
/* ゲームスタート (.end) と 受付終了 (.reserved) は光を出さない */
#oshi-collection .fv_btn .btn a.end::before,
#oshi-collection .section-btn .btn a.end::before,
#oshi-collection .fv_btn .btn a.reserved::before,
#oshi-collection .section-btn .btn a.reserved::before {
display: none;
}
/* アクセシビリティ: アニメーションを抑制したいユーザーには動かさない */
@media (prefers-reduced-motion: reduce) {
#oshi-collection .fv-logo img,
#oshi-collection .fv-logo::after,
#oshi-collection .fv_btn .btn a,
#oshi-collection .section-btn .btn a,
#oshi-collection .fv_btn .btn a::before,
#oshi-collection .section-btn .btn a::before,
#oshi-collection .btn a::after,
#oshi-collection .btn-detail-link,
#oshi-collection .btn-detail-link::after {
animation: none !important;
transition: none !important;
}
}