リクエスト
/* ===== ファンクラブ：リクエスト紹介 スタイル ===== */
:root{
--cards-per-view: 1;
--gap: 16px;
--card-radius: 28px; /* 角丸を大きめに */
--card-padding: 20px 20px 56px; /* 下にニックネーム帯の余白を確保 */
--title-size: clamp(22px, 3.4vw, 34px);
--reason-size: clamp(14px, 1.7vw, 16px);
--name-size: clamp(13px, 1.6vw, 15px);
--shadow: 0 8px 24px rgba(0,0,0,0.08);
--dot-active: #4C2073;
}
/* フォント：ヒラギノ角ゴ W8 に準じた太め系 */
.fc-requests, .fc-requests *{
font-family:
"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Std",
"ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Std",
"Noto Sans JP", "Yu Gothic", "游ゴシック体",
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
font-weight: 800;
letter-spacing: .01em;
}
.fc-requests{
max-width: 1200px;
margin: 40px auto;
padding: 0 12px;
}
.fc-requests__header{
display:flex; align-items:center; justify-content:space-between;
margin-bottom: 16px;
}
.fc-requests__header h2{ font-size: clamp(20px,3vw,28px); }
.fc-requests__source{ font-size: 12px; text-decoration: underline; opacity: .85; }
/* ビューポートとトラック */
.fc-requests__viewport{ overflow: hidden; position: relative; }
.fc-requests__track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));
gap: var(--gap);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
/* カード（正方形・フレームイメージ重ね） */
.fc-requests__card{
position: relative;
scroll-snap-align: start;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
aspect-ratio: 1 / 1; /* 正方形 */
overflow: hidden;
color: #fff; /* フレームの想定に合わせ白字 */
display: flex;
flex-direction: column;
padding: var(--card-padding);
}
/* 背景にフレーム画像を全面配置 */
.fc-requests__card::before{
content:"";
position:absolute; inset:0;
background-image: var(--frame-image, none);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 1; /* ガイドではなく完全適用 */
pointer-events:none;
}
/* テキストレイヤー（前面） */
.fc-requests__inner{ position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
/* 楽曲（最も目立たせる） */
.fc-requests__title{
font-size: var(--title-size);
line-height: 1.15;
margin: 0 0 10px 0;
}
/* リクエスト理由（中段） */
.fc-requests__reason{
font-size: var(--reason-size);
line-height: 1.6;
margin: 0 0 auto 0;
opacity: .98;
}
/* ニックネーム（下段中央固定） */
.fc-requests__name{
position: absolute;
left: 0; right: 0; bottom: 18px;
text-align: center;
font-size: var(--name-size);
font-weight: 800;
}
/* コントロール */
.fc-requests__controls{
margin-top: 12px;
display:flex; align-items:center; justify-content:center; gap: 12px;
}
.fc-requests__btn{
appearance: none; border: none; border-radius: 999px;
width: 36px; height: 36px; font-size: 20px; line-height: 36px; text-align: center;
cursor: pointer; box-shadow: var(--shadow); background:#fff;
}
.fc-requests__btn:disabled{ opacity:.4; cursor: default; }
.fc-requests__dots{ display:flex; gap:8px; }
.fc-requests__dot{ width:8px; height:8px; border-radius:999px; background:#ddd; }
.fc-requests__dot.is-active{ background: var(--dot-active); }
/* PCで枚数可変、SPは1枚 */
@media (min-width: 640px){ :root{ --cards-per-view: 2; } }
@media (min-width: 900px){ :root{ --cards-per-view: 3; } }
@media (min-width: 1200px){ :root{ --cards-per-view: 4; } }
/* スクロールバー（任意） */
.fc-requests__track::-webkit-scrollbar{ height: 8px; }
.fc-requests__track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
