@charset "UTF-8";
/* ==============================================================
* base
* ============================================================ */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1 {
font-size: inherit;
margin: 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button, input {
overflow: visible;
}
button, select {
text-transform: none;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0;
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
body {
word-wrap: break-word;
}
section, main {
display: block;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
i, em {
font-style: normal;
}
table {
border-collapse: collapse;
}
li {
list-style: none;
}
img {
max-width: 100%;
line-height: 0;
}
* {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
/* ==============================================================
* contents
* ============================================================ */
/* common.scss
============================== */
html {
background-color: #000;
}
body {
color: #fff;
font-size: 15px;
height: fit-content;
min-height: 100vh;
}
.drop--bg {
background-image: url("/static/superdragon/fanclub/top/bg.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
position: fixed !important;
opacity: 0.45;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
height: 100vh;
width: 100%;
}
body {
word-wrap: break-word;
color: #ffffff;
padding-bottom: 350px;
position: relative;
}
@media screen and (min-width: 961px) {
body {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
font-feature-settings: "palt";
letter-spacing: 0.04em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
}
a {
color: inherit;
text-decoration: none;
line-height: 1;
}
img {
max-width: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
line-height: 0;
pointer-events: all;
}
::selection {
background-color: #7B64D6;
color: #fff;
}
::-moz-selection {
background-color: #ffffff;
color: #fff;
}
.svg-symbol {
display: none !important;
}
svg {
width: 100%;
height: 100%;
}
.content-main {
background-color: #fff;
}
.body--app a {
-webkit-touch-callout: none !important;
}
figure img, .thumb img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.noimage {
width: 50%;
height: 50%;
mix-blend-mode: color-dodge;
}
.vjs-audio.vjs-has-started .vjs-poster {
background-size: contain !important;
background-repeat: no-repeat !important;
}
.vjs-audio .vjs-poster {
background-size: contain !important;
background-repeat: no-repeat !important;
}
/*Animation*/
.glitch {
background: #000 no-repeat center;
background-size: 0;
height: 100vh;
position: relative;
overflow: hidden;
}
.glitch::before, .glitch::after,
.glitch .channel {
background: inherit;
background-size: cover;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.glitch::before {
animation: glitch-before 1s linear infinite alternate both;
content: "";
}
@keyframes glitch-before {
0% {
clip-path: polygon(0% 89.0567792229%, 100% 89.0567792229%, 100% 90.3625881464%, 0% 90.3625881464%);
transform: translate(7.1780949178%, -0.3979319482%);
}
0.2% {
clip-path: polygon(0% 73.0239467404%, 100% 73.0239467404%, 100% 74.3409407822%, 0% 74.3409407822%);
transform: translate(6.6305678833%, -0.2465160322%);
}
0.4% {
clip-path: polygon(0% 59.9973035007%, 100% 59.9973035007%, 100% 63.5753834079%, 0% 63.5753834079%);
transform: translate(-2.375517413%, -0.1828919344%);
}
0.6% {
clip-path: polygon(0% 76.7672555471%, 100% 76.7672555471%, 100% 85.781693303%, 0% 85.781693303%);
transform: translate(-2.3977005479%, -0.1311905513%);
}
0.8% {
clip-path: polygon(0% 40.3637958965%, 100% 40.3637958965%, 100% 48.784134645%, 0% 48.784134645%);
transform: translate(-4.1830775974%, 0.4361540087%);
}
1% {
clip-path: polygon(0% 66.706886177%, 100% 66.706886177%, 100% 70.8116289856%, 0% 70.8116289856%);
transform: translate(-7.1245932445%, -0.1678116918%);
}
1.2% {
clip-path: polygon(0% 88.0879887084%, 100% 88.0879887084%, 100% 96.6128718921%, 0% 96.6128718921%);
transform: translate(-3.0702965081%, -0.2336144611%);
}
1.4% {
clip-path: polygon(0% 52.2496206349%, 100% 52.2496206349%, 100% 54.1933363406%, 0% 54.1933363406%);
transform: translate(6.895849944%, 0.3731656275%);
}
1.6% {
clip-path: polygon(0% 53.7415730281%, 100% 53.7415730281%, 100% 58.4260668884%, 0% 58.4260668884%);
transform: translate(5.3047449957%, -0.4876262252%);
}
1.8% {
clip-path: polygon(0% 14.3556332221%, 100% 14.3556332221%, 100% 16.6726300959%, 0% 16.6726300959%);
transform: translate(0.7457838528%, -0.0627180629%);
}
2% {
clip-path: polygon(0% 29.9130001355%, 100% 29.9130001355%, 100% 37.4021129402%, 0% 37.4021129402%);
transform: translate(-1.8238037876%, 0.46228089%);
}
2.2% {
clip-path: polygon(0% 13.7797276005%, 100% 13.7797276005%, 100% 19.344186786%, 0% 19.344186786%);
transform: translate(6.4360623368%, -0.4036710861%);
}
2.4% {
clip-path: polygon(0% 78.2987036184%, 100% 78.2987036184%, 100% 88.1796052003%, 0% 88.1796052003%);
transform: translate(-6.1793990207%, -0.0458783405%);
}
2.6% {
clip-path: polygon(0% 73.2002705524%, 100% 73.2002705524%, 100% 74.9888546967%, 0% 74.9888546967%);
transform: translate(5.8197347765%, -0.3879500814%);
}
2.8% {
clip-path: polygon(0% 38.7480249056%, 100% 38.7480249056%, 100% 46.7291483923%, 0% 46.7291483923%);
transform: translate(3.3288175903%, 0.3563172412%);
}
3% {
clip-path: polygon(0% 85.0792688138%, 100% 85.0792688138%, 100% 91.1578821562%, 0% 91.1578821562%);
transform: translate(-0.2918260609%, 0.3469386343%);
}
3.2% {
clip-path: polygon(0% 11.328411855%, 100% 11.328411855%, 100% 16.0677208271%, 0% 16.0677208271%);
transform: translate(5.798499276%, -0.300126848%);
}
3.4% {
clip-path: polygon(0% 45.1831459008%, 100% 45.1831459008%, 100% 51.7714642003%, 0% 51.7714642003%);
transform: translate(-3.2873833992%, -0.4972125491%);
}
3.6% {
clip-path: polygon(0% 62.7934953743%, 100% 62.7934953743%, 100% 67.0568628366%, 0% 67.0568628366%);
transform: translate(1.9376496174%, 0.4926386167%);
}
3.8% {
clip-path: polygon(0% 71.0988021092%, 100% 71.0988021092%, 100% 77.9793153221%, 0% 77.9793153221%);
transform: translate(-1.1127986663%, 0.401612304%);
}
4% {
clip-path: polygon(0% 4.561359458%, 100% 4.561359458%, 100% 5.5914591193%, 0% 5.5914591193%);
transform: translate(-1.459136214%, -0.3142265938%);
}
4.2% {
clip-path: polygon(0% 68.3677860364%, 100% 68.3677860364%, 100% 75.2674413319%, 0% 75.2674413319%);
transform: translate(7.1313027105%, -0.1352691006%);
}
4.4% {
clip-path: polygon(0% 80.0715490462%, 100% 80.0715490462%, 100% 88.6313169733%, 0% 88.6313169733%);
transform: translate(4.1992873548%, -0.4909926548%);
}
4.6% {
clip-path: polygon(0% 39.0202798491%, 100% 39.0202798491%, 100% 44.2395642319%, 0% 44.2395642319%);
transform: translate(-5.2901454147%, 0.0569983562%);
}
4.8% {
clip-path: polygon(0% 47.9745287984%, 100% 47.9745287984%, 100% 52.5200565491%, 0% 52.5200565491%);
transform: translate(7.5736772232%, -0.3398547522%);
}
5% {
clip-path: polygon(0% 78.9043471157%, 100% 78.9043471157%, 100% 85.8219153708%, 0% 85.8219153708%);
transform: translate(2.7623746698%, -0.139366228%);
}
5.2% {
clip-path: polygon(0% 16.0984775935%, 100% 16.0984775935%, 100% 20.8802400642%, 0% 20.8802400642%);
transform: translate(5.4250651642%, 0.0102662146%);
}
5.4% {
clip-path: polygon(0% 17.9430814205%, 100% 17.9430814205%, 100% 24.3355426529%, 0% 24.3355426529%);
transform: translate(-1.7184413752%, 0.3372178281%);
}
5.6% {
clip-path: polygon(0% 2.4566964322%, 100% 2.4566964322%, 100% 8.6157497963%, 0% 8.6157497963%);
transform: translate(-7.9952915585%, 0.2296676824%);
}
5.8% {
clip-path: polygon(0% 69.4974571241%, 100% 69.4974571241%, 100% 74.2805842815%, 0% 74.2805842815%);
transform: translate(-7.3192240833%, 0.1907428287%);
}
6% {
clip-path: polygon(0% 61.1628208593%, 100% 61.1628208593%, 100% 70.3723394829%, 0% 70.3723394829%);
transform: translate(-4.8804617705%, 0.3155915777%);
}
6.2% {
clip-path: polygon(0% 85.0626010801%, 100% 85.0626010801%, 100% 91.1767375611%, 0% 91.1767375611%);
transform: translate(-3.6117455458%, -0.390476609%);
}
6.4% {
clip-path: polygon(0% 85.0675321092%, 100% 85.0675321092%, 100% 90.6136064785%, 0% 90.6136064785%);
transform: translate(0.5409983997%, 0.1784735491%);
}
6.6% {
clip-path: polygon(0% 35.0333541456%, 100% 35.0333541456%, 100% 38.9359620041%, 0% 38.9359620041%);
transform: translate(-4.9445724351%, -0.0762715274%);
}
6.8% {
clip-path: polygon(0% 32.9949474859%, 100% 32.9949474859%, 100% 38.2474346183%, 0% 38.2474346183%);
transform: translate(3.6606895904%, 0.3123979632%);
}
7% {
clip-path: polygon(0% 11.2617838406%, 100% 11.2617838406%, 100% 20.7108990112%, 0% 20.7108990112%);
transform: translate(-6.0808280788%, 0.2872965519%);
}
7.2% {
clip-path: polygon(0% 72.0436739664%, 100% 72.0436739664%, 100% 81.7275959617%, 0% 81.7275959617%);
transform: translate(1.5331509367%, 0.1540016871%);
}
7.4% {
clip-path: polygon(0% 37.6672303457%, 100% 37.6672303457%, 100% 39.9648904793%, 0% 39.9648904793%);
transform: translate(-0.5591993315%, -0.3590895836%);
}
7.6% {
clip-path: polygon(0% 33.629011449%, 100% 33.629011449%, 100% 41.9608390918%, 0% 41.9608390918%);
transform: translate(7.3798493834%, -0.2932521019%);
}
7.8% {
clip-path: polygon(0% 10.2715931743%, 100% 10.2715931743%, 100% 15.4287300165%, 0% 15.4287300165%);
transform: translate(-0.8497674954%, 0.4804393047%);
}
8% {
clip-path: polygon(0% 3.2156414521%, 100% 3.2156414521%, 100% 6.6715339433%, 0% 6.6715339433%);
transform: translate(-4.7269526077%, 0.1642407009%);
}
8.2% {
clip-path: polygon(0% 61.6159435818%, 100% 61.6159435818%, 100% 65.9174932687%, 0% 65.9174932687%);
transform: translate(1.2778461489%, 0.2420073098%);
}
8.4% {
clip-path: polygon(0% 85.5188640253%, 100% 85.5188640253%, 100% 89.6114221575%, 0% 89.6114221575%);
transform: translate(7.6239249505%, -0.2297000982%);
}
8.6% {
clip-path: polygon(0% 37.7378744845%, 100% 37.7378744845%, 100% 46.4798347143%, 0% 46.4798347143%);
transform: translate(-0.7496342407%, 0.0635191465%);
}
8.8% {
clip-path: polygon(0% 83.9486257679%, 100% 83.9486257679%, 100% 85.7175822829%, 0% 85.7175822829%);
transform: translate(-6.6063367325%, 0.3134180101%);
}
9% {
clip-path: polygon(0% 12.6317978769%, 100% 12.6317978769%, 100% 17.6525584792%, 0% 17.6525584792%);
transform: translate(-3.090766674%, 0.2358928326%);
}
9.2% {
clip-path: polygon(0% 53.7213465347%, 100% 53.7213465347%, 100% 56.9136308741%, 0% 56.9136308741%);
transform: translate(5.303694623%, -0.2963998473%);
}
9.4% {
clip-path: polygon(0% 18.1465046766%, 100% 18.1465046766%, 100% 23.1929189446%, 0% 23.1929189446%);
transform: translate(-2.7415216815%, -0.281818382%);
}
9.6% {
clip-path: polygon(0% 55.6824873874%, 100% 55.6824873874%, 100% 59.9323118685%, 0% 59.9323118685%);
transform: translate(-7.8346428818%, -0.2536994955%);
}
9.8% {
clip-path: polygon(0% 63.6653695196%, 100% 63.6653695196%, 100% 67.5274870146%, 0% 67.5274870146%);
transform: translate(-7.0292703214%, -0.3141956993%);
}
10% {
clip-path: polygon(0% 29.0052199706%, 100% 29.0052199706%, 100% 30.0869538499%, 0% 30.0869538499%);
transform: translate(-3.7321623221%, 0.296696729%);
}
10.2% {
clip-path: polygon(0% 35.9930446406%, 100% 35.9930446406%, 100% 41.2478637326%, 0% 41.2478637326%);
transform: translate(-6.6301325966%, 0.4857096154%);
}
10.4% {
clip-path: polygon(0% 30.8818467788%, 100% 30.8818467788%, 100% 39.3611377974%, 0% 39.3611377974%);
transform: translate(0.5884266646%, 0.0636183981%);
}
10.6% {
clip-path: polygon(0% 64.798131795%, 100% 64.798131795%, 100% 67.106068161%, 0% 67.106068161%);
transform: translate(3.1535353429%, -0.3902000514%);
}
10.8% {
clip-path: polygon(0% 40.3189644346%, 100% 40.3189644346%, 100% 43.5594214746%, 0% 43.5594214746%);
transform: translate(2.95814492%, -0.4795896309%);
}
11% {
clip-path: polygon(0% 59.5131863482%, 100% 59.5131863482%, 100% 68.2716105073%, 0% 68.2716105073%);
transform: translate(6.0838500611%, -0.0410520693%);
}
11.2% {
clip-path: polygon(0% 68.2401001812%, 100% 68.2401001812%, 100% 70.8318127059%, 0% 70.8318127059%);
transform: translate(-1.3942326983%, -0.3219129549%);
}
11.4% {
clip-path: polygon(0% 31.0139763198%, 100% 31.0139763198%, 100% 34.7628095105%, 0% 34.7628095105%);
transform: translate(4.0350357781%, -0.3670413882%);
}
11.6% {
clip-path: polygon(0% 44.4569558117%, 100% 44.4569558117%, 100% 53.6902374728%, 0% 53.6902374728%);
transform: translate(-7.199330147%, 0.2937975143%);
}
11.8% {
clip-path: polygon(0% 0.5725097337%, 100% 0.5725097337%, 100% 2.1841669637%, 0% 2.1841669637%);
transform: translate(3.2967675066%, 0.2067166647%);
}
12% {
clip-path: polygon(0% 60.4615474172%, 100% 60.4615474172%, 100% 66.5519773261%, 0% 66.5519773261%);
transform: translate(2.5874148782%, 0.4823912097%);
}
12.2% {
clip-path: polygon(0% 72.2886617281%, 100% 72.2886617281%, 100% 80.268252317%, 0% 80.268252317%);
transform: translate(0.0240240952%, -0.1945730407%);
}
12.4% {
clip-path: polygon(0% 83.0862965541%, 100% 83.0862965541%, 100% 92.0878906588%, 0% 92.0878906588%);
transform: translate(-4.0746589824%, -0.2712355965%);
}
12.6% {
clip-path: polygon(0% 80.1588879682%, 100% 80.1588879682%, 100% 89.1801737482%, 0% 89.1801737482%);
transform: translate(7.8138332157%, 0.1578627458%);
}
12.8% {
clip-path: polygon(0% 69.5126391552%, 100% 69.5126391552%, 100% 72.0382702832%, 0% 72.0382702832%);
transform: translate(7.2185766521%, 0.1973244448%);
}
13% {
clip-path: polygon(0% 18.1480992097%, 100% 18.1480992097%, 100% 22.2708372918%, 0% 22.2708372918%);
transform: translate(-3.955125481%, -0.4845582118%);
}
13.2% {
clip-path: polygon(0% 57.7768625305%, 100% 57.7768625305%, 100% 59.9269503339%, 0% 59.9269503339%);
transform: translate(3.8924164373%, 0.0439442498%);
}
13.4% {
clip-path: polygon(0% 77.0263473754%, 100% 77.0263473754%, 100% 82.9364569811%, 0% 82.9364569811%);
transform: translate(5.2141390135%, 0.2335479125%);
}
13.6% {
clip-path: polygon(0% 18.7916246642%, 100% 18.7916246642%, 100% 28.7641550282%, 0% 28.7641550282%);
transform: translate(-5.0942365808%, 0.1610198582%);
}
13.8% {
clip-path: polygon(0% 54.4325578685%, 100% 54.4325578685%, 100% 59.295835102%, 0% 59.295835102%);
transform: translate(1.1102775758%, -0.0078460459%);
}
14% {
clip-path: polygon(0% 20.6301445285%, 100% 20.6301445285%, 100% 24.3525277129%, 0% 24.3525277129%);
transform: translate(-3.6228347884%, -0.2781836746%);
}
14.2% {
clip-path: polygon(0% 10.7335715114%, 100% 10.7335715114%, 100% 13.7989369471%, 0% 13.7989369471%);
transform: translate(2.4220209343%, 0.4405199796%);
}
14.4% {
clip-path: polygon(0% 69.9854482418%, 100% 69.9854482418%, 100% 77.6503294546%, 0% 77.6503294546%);
transform: translate(-4.4096388521%, -0.3178352517%);
}
14.6% {
clip-path: polygon(0% 18.589147612%, 100% 18.589147612%, 100% 28.4231831172%, 0% 28.4231831172%);
transform: translate(2.4854114681%, 0.4975547361%);
}
14.8% {
clip-path: polygon(0% 63.2378295406%, 100% 63.2378295406%, 100% 68.136132955%, 0% 68.136132955%);
transform: translate(-3.9594924625%, -0.0140288686%);
}
15% {
clip-path: polygon(0% 78.6357152389%, 100% 78.6357152389%, 100% 80.1300503074%, 0% 80.1300503074%);
transform: translate(4.9858820319%, -0.3789094839%);
}
15.2% {
clip-path: polygon(0% 68.5669835086%, 100% 68.5669835086%, 100% 74.1509982057%, 0% 74.1509982057%);
transform: translate(0.9398246883%, -0.4302047357%);
}
15.4% {
clip-path: polygon(0% 6.1244118848%, 100% 6.1244118848%, 100% 7.8275015605%, 0% 7.8275015605%);
transform: translate(-0.1367101724%, 0.4658417224%);
}
15.6% {
clip-path: polygon(0% 62.8755306946%, 100% 62.8755306946%, 100% 70.7720882116%, 0% 70.7720882116%);
transform: translate(-7.4270200741%, -0.222585137%);
}
15.8% {
clip-path: polygon(0% 30.8453618276%, 100% 30.8453618276%, 100% 37.5577146143%, 0% 37.5577146143%);
transform: translate(4.5031018093%, -0.1422056919%);
}
16% {
clip-path: polygon(0% 57.051177921%, 100% 57.051177921%, 100% 67.0505771319%, 0% 67.0505771319%);
transform: translate(-1.9381423201%, -0.3586842142%);
}
16.2% {
clip-path: polygon(0% 15.015611507%, 100% 15.015611507%, 100% 23.4175415693%, 0% 23.4175415693%);
transform: translate(2.7052561303%, 0.3732846558%);
}
16.4% {
clip-path: polygon(0% 46.7538099831%, 100% 46.7538099831%, 100% 51.5548587326%, 0% 51.5548587326%);
transform: translate(-2.3054872453%, 0.3228876468%);
}
16.6% {
clip-path: polygon(0% 21.3609378094%, 100% 21.3609378094%, 100% 27.7438228125%, 0% 27.7438228125%);
transform: translate(-7.3787581013%, -0.3160063327%);
}
16.8% {
clip-path: polygon(0% 60.7136092946%, 100% 60.7136092946%, 100% 65.552745107%, 0% 65.552745107%);
transform: translate(-4.5578385102%, 0.3585841069%);
}
17% {
clip-path: polygon(0% 9.4077833325%, 100% 9.4077833325%, 100% 11.1223590405%, 0% 11.1223590405%);
transform: translate(-7.4504564269%, -0.3996286345%);
}
17.2% {
clip-path: polygon(0% 48.157663818%, 100% 48.157663818%, 100% 53.0984992846%, 0% 53.0984992846%);
transform: translate(-3.1034131741%, -0.4835552897%);
}
17.4% {
clip-path: polygon(0% 9.6910069971%, 100% 9.6910069971%, 100% 12.3465932055%, 0% 12.3465932055%);
transform: translate(-6.0342899862%, -0.2432693905%);
}
17.6% {
clip-path: polygon(0% 0.9619298586%, 100% 0.9619298586%, 100% 2.080158683%, 0% 2.080158683%);
transform: translate(4.3382201533%, -0.4926555418%);
}
17.8% {
clip-path: polygon(0% 86.4422663893%, 100% 86.4422663893%, 100% 94.0302677348%, 0% 94.0302677348%);
transform: translate(7.1620783513%, 0.0606502027%);
}
18% {
clip-path: polygon(0% 78.0780920166%, 100% 78.0780920166%, 100% 84.0479902122%, 0% 84.0479902122%);
transform: translate(1.2847171409%, 0.2498474895%);
}
18.2% {
clip-path: polygon(0% 17.7469335548%, 100% 17.7469335548%, 100% 22.6176056616%, 0% 22.6176056616%);
transform: translate(-5.2673349987%, 0.14797543%);
}
18.4% {
clip-path: polygon(0% 22.3220160342%, 100% 22.3220160342%, 100% 31.0327985995%, 0% 31.0327985995%);
transform: translate(-6.353738796%, 0.2742881808%);
}
18.6% {
clip-path: polygon(0% 59.4583989646%, 100% 59.4583989646%, 100% 65.9102730514%, 0% 65.9102730514%);
transform: translate(-6.8862378308%, -0.1489150733%);
}
18.8% {
clip-path: polygon(0% 81.3443471949%, 100% 81.3443471949%, 100% 91.278650511%, 0% 91.278650511%);
transform: translate(2.9789518633%, 0.2211636198%);
}
19% {
clip-path: polygon(0% 40.9759396387%, 100% 40.9759396387%, 100% 48.4845220066%, 0% 48.4845220066%);
transform: translate(6.6934683823%, -0.4231506281%);
}
19.2% {
clip-path: polygon(0% 2.2146784828%, 100% 2.2146784828%, 100% 11.0622489178%, 0% 11.0622489178%);
transform: translate(1.0500379333%, -0.2037079315%);
}
19.4% {
clip-path: polygon(0% 58.9976494151%, 100% 58.9976494151%, 100% 68.2828321616%, 0% 68.2828321616%);
transform: translate(-3.5254744595%, 0.2547973902%);
}
19.6% {
clip-path: polygon(0% 22.7155828091%, 100% 22.7155828091%, 100% 24.9170178684%, 0% 24.9170178684%);
transform: translate(7.7494708993%, 0.1030843573%);
}
19.8% {
clip-path: polygon(0% 70.4534518428%, 100% 70.4534518428%, 100% 76.0387255052%, 0% 76.0387255052%);
transform: translate(4.9171457637%, 0.1761482814%);
}
20%, 100% {
clip-path: none;
transform: none;
}
}
.glitch::after {
animation: glitch-after 1s linear infinite alternate both;
content: "";
}
@keyframes glitch-after {
0% {
clip-path: polygon(0% 58.8228120768%, 100% 58.8228120768%, 100% 63.0423163863%, 0% 63.0423163863%);
transform: translate(5.0375083413%, -0.0431001186%);
}
0.2% {
clip-path: polygon(0% 81.7755247947%, 100% 81.7755247947%, 100% 87.3824908884%, 0% 87.3824908884%);
transform: translate(1.0891666039%, -0.0954753804%);
}
0.4% {
clip-path: polygon(0% 51.6881031779%, 100% 51.6881031779%, 100% 54.4534127486%, 0% 54.4534127486%);
transform: translate(4.1221149025%, 0.0122534562%);
}
0.6% {
clip-path: polygon(0% 50.1649346187%, 100% 50.1649346187%, 100% 52.8990538117%, 0% 52.8990538117%);
transform: translate(-5.7233856055%, 0.2398714611%);
}
0.8% {
clip-path: polygon(0% 6.3972352675%, 100% 6.3972352675%, 100% 8.8547685934%, 0% 8.8547685934%);
transform: translate(7.1430278499%, 0.2900968872%);
}
1% {
clip-path: polygon(0% 14.132452691%, 100% 14.132452691%, 100% 16.261018698%, 0% 16.261018698%);
transform: translate(-7.880830692%, -0.4913902116%);
}
1.2% {
clip-path: polygon(0% 72.5954118124%, 100% 72.5954118124%, 100% 75.6235877205%, 0% 75.6235877205%);
transform: translate(1.4875934125%, 0.4774948751%);
}
1.4% {
clip-path: polygon(0% 62.44372338%, 100% 62.44372338%, 100% 66.5044587258%, 0% 66.5044587258%);
transform: translate(-0.1128738476%, 0.3208403565%);
}
1.6% {
clip-path: polygon(0% 16.6821761355%, 100% 16.6821761355%, 100% 18.4741991137%, 0% 18.4741991137%);
transform: translate(1.7449124018%, -0.4948995653%);
}
1.8% {
clip-path: polygon(0% 68.8343383599%, 100% 68.8343383599%, 100% 76.6976681354%, 0% 76.6976681354%);
transform: translate(-5.2798477749%, -0.4127979284%);
}
2% {
clip-path: polygon(0% 37.5018132635%, 100% 37.5018132635%, 100% 43.2534731162%, 0% 43.2534731162%);
transform: translate(7.5026036914%, -0.2680641095%);
}
2.2% {
clip-path: polygon(0% 52.1510518397%, 100% 52.1510518397%, 100% 53.3907476239%, 0% 53.3907476239%);
transform: translate(-7.5388992585%, -0.0811359386%);
}
2.4% {
clip-path: polygon(0% 52.1260925806%, 100% 52.1260925806%, 100% 57.7643502485%, 0% 57.7643502485%);
transform: translate(7.5803850806%, 0.3637102431%);
}
2.6% {
clip-path: polygon(0% 27.6474961754%, 100% 27.6474961754%, 100% 29.6417444538%, 0% 29.6417444538%);
transform: translate(-3.2073571809%, -0.3294951342%);
}
2.8% {
clip-path: polygon(0% 46.534683695%, 100% 46.534683695%, 100% 52.3110361497%, 0% 52.3110361497%);
transform: translate(3.8350500976%, -0.2405784759%);
}
3% {
clip-path: polygon(0% 69.227366572%, 100% 69.227366572%, 100% 76.9530606362%, 0% 76.9530606362%);
transform: translate(-3.3478790388%, 0.0060111828%);
}
3.2% {
clip-path: polygon(0% 47.0002445626%, 100% 47.0002445626%, 100% 52.0563190863%, 0% 52.0563190863%);
transform: translate(-7.3582973728%, -0.393532588%);
}
3.4% {
clip-path: polygon(0% 22.0711040732%, 100% 22.0711040732%, 100% 26.8181003443%, 0% 26.8181003443%);
transform: translate(2.2358073561%, 0.1389139196%);
}
3.6% {
clip-path: polygon(0% 48.9527879986%, 100% 48.9527879986%, 100% 58.0373541407%, 0% 58.0373541407%);
transform: translate(1.721282879%, -0.3611019412%);
}
3.8% {
clip-path: polygon(0% 64.4328517156%, 100% 64.4328517156%, 100% 66.5212970048%, 0% 66.5212970048%);
transform: translate(1.3411869763%, 0.4637839185%);
}
4% {
clip-path: polygon(0% 64.037191296%, 100% 64.037191296%, 100% 69.9353156529%, 0% 69.9353156529%);
transform: translate(-6.4572274249%, -0.4726467631%);
}
4.2% {
clip-path: polygon(0% 72.3132221545%, 100% 72.3132221545%, 100% 82.0895239909%, 0% 82.0895239909%);
transform: translate(-0.9863924672%, -0.3707842042%);
}
4.4% {
clip-path: polygon(0% 40.2164104465%, 100% 40.2164104465%, 100% 45.3966580301%, 0% 45.3966580301%);
transform: translate(4.3732123485%, -0.3564938793%);
}
4.6% {
clip-path: polygon(0% 35.950264629%, 100% 35.950264629%, 100% 44.2330238171%, 0% 44.2330238171%);
transform: translate(-5.5313576601%, 0.1269802194%);
}
4.8% {
clip-path: polygon(0% 3.6391198398%, 100% 3.6391198398%, 100% 8.9607033873%, 0% 8.9607033873%);
transform: translate(-6.6367389747%, 0.2835017031%);
}
5% {
clip-path: polygon(0% 61.9952640934%, 100% 61.9952640934%, 100% 71.3644080922%, 0% 71.3644080922%);
transform: translate(-2.0944881428%, 0.4811092966%);
}
5.2% {
clip-path: polygon(0% 80.1575509273%, 100% 80.1575509273%, 100% 84.0677866589%, 0% 84.0677866589%);
transform: translate(-6.9974638909%, -0.2694073348%);
}
5.4% {
clip-path: polygon(0% 73.9547357164%, 100% 73.9547357164%, 100% 75.3143060999%, 0% 75.3143060999%);
transform: translate(-2.5556420127%, -0.0311974114%);
}
5.6% {
clip-path: polygon(0% 27.4344747224%, 100% 27.4344747224%, 100% 36.4620632563%, 0% 36.4620632563%);
transform: translate(-3.9471151044%, -0.0936635972%);
}
5.8% {
clip-path: polygon(0% 62.3671166952%, 100% 62.3671166952%, 100% 71.9933199408%, 0% 71.9933199408%);
transform: translate(1.7365872856%, 0.2594878287%);
}
6% {
clip-path: polygon(0% 79.4693870524%, 100% 79.4693870524%, 100% 86.6648066114%, 0% 86.6648066114%);
transform: translate(-4.813201183%, -0.104734432%);
}
6.2% {
clip-path: polygon(0% 52.174477432%, 100% 52.174477432%, 100% 53.4341838882%, 0% 53.4341838882%);
transform: translate(-2.3307098616%, -0.014872416%);
}
6.4% {
clip-path: polygon(0% 61.7344043499%, 100% 61.7344043499%, 100% 63.3991810082%, 0% 63.3991810082%);
transform: translate(-0.3433822994%, 0.2951265145%);
}
6.6% {
clip-path: polygon(0% 58.7668476898%, 100% 58.7668476898%, 100% 61.3002544842%, 0% 61.3002544842%);
transform: translate(4.9633736898%, 0.3023209765%);
}
6.8% {
clip-path: polygon(0% 27.7282723197%, 100% 27.7282723197%, 100% 29.831963363%, 0% 29.831963363%);
transform: translate(-2.2778224184%, -0.3670479772%);
}
7% {
clip-path: polygon(0% 10.5575223431%, 100% 10.5575223431%, 100% 19.2100201203%, 0% 19.2100201203%);
transform: translate(-5.878528786%, -0.0334841538%);
}
7.2% {
clip-path: polygon(0% 84.1984326066%, 100% 84.1984326066%, 100% 88.650026816%, 0% 88.650026816%);
transform: translate(-5.3156153587%, -0.2498308379%);
}
7.4% {
clip-path: polygon(0% 52.3995172958%, 100% 52.3995172958%, 100% 57.7152942614%, 0% 57.7152942614%);
transform: translate(6.7517643257%, 0.1821079517%);
}
7.6% {
clip-path: polygon(0% 28.7953277631%, 100% 28.7953277631%, 100% 33.580228933%, 0% 33.580228933%);
transform: translate(1.7175171467%, 0.0150892078%);
}
7.8% {
clip-path: polygon(0% 86.4252261493%, 100% 86.4252261493%, 100% 91.7913979098%, 0% 91.7913979098%);
transform: translate(1.5795384692%, 0.2269784657%);
}
8% {
clip-path: polygon(0% 70.2300155607%, 100% 70.2300155607%, 100% 75.7174102616%, 0% 75.7174102616%);
transform: translate(2.5748063425%, -0.3697375097%);
}
8.2% {
clip-path: polygon(0% 77.227474385%, 100% 77.227474385%, 100% 84.3628143567%, 0% 84.3628143567%);
transform: translate(-2.5234772959%, -0.2577464845%);
}
8.4% {
clip-path: polygon(0% 40.7231866417%, 100% 40.7231866417%, 100% 49.4852286993%, 0% 49.4852286993%);
transform: translate(5.5133504209%, 0.0584279942%);
}
8.6% {
clip-path: polygon(0% 30.3880226894%, 100% 30.3880226894%, 100% 40.1848090236%, 0% 40.1848090236%);
transform: translate(1.1641983909%, -0.2598176795%);
}
8.8% {
clip-path: polygon(0% 78.229559642%, 100% 78.229559642%, 100% 84.8044661592%, 0% 84.8044661592%);
transform: translate(-4.3176527397%, 0.0135381404%);
}
9% {
clip-path: polygon(0% 62.5173464918%, 100% 62.5173464918%, 100% 66.3267474562%, 0% 66.3267474562%);
transform: translate(3.5709729723%, 0.1232961907%);
}
9.2% {
clip-path: polygon(0% 76.7952917648%, 100% 76.7952917648%, 100% 81.6191317209%, 0% 81.6191317209%);
transform: translate(0.1690525115%, 0.2437022105%);
}
9.4% {
clip-path: polygon(0% 18.8536874448%, 100% 18.8536874448%, 100% 19.9446674773%, 0% 19.9446674773%);
transform: translate(1.3664696434%, 0.2003551889%);
}
9.6% {
clip-path: polygon(0% 67.9319848358%, 100% 67.9319848358%, 100% 70.9785782088%, 0% 70.9785782088%);
transform: translate(4.8552173871%, 0.4527289888%);
}
9.8% {
clip-path: polygon(0% 76.0133087447%, 100% 76.0133087447%, 100% 83.0648682599%, 0% 83.0648682599%);
transform: translate(-0.6505718119%, -0.0039730485%);
}
10% {
clip-path: polygon(0% 18.1582140882%, 100% 18.1582140882%, 100% 22.6363001636%, 0% 22.6363001636%);
transform: translate(1.0678877858%, -0.0027534307%);
}
10.2% {
clip-path: polygon(0% 85.1474988457%, 100% 85.1474988457%, 100% 89.9101594806%, 0% 89.9101594806%);
transform: translate(7.7556598569%, 0.400846415%);
}
10.4% {
clip-path: polygon(0% 8.7867344455%, 100% 8.7867344455%, 100% 13.7418818339%, 0% 13.7418818339%);
transform: translate(-1.7138747206%, -0.0280701608%);
}
10.6% {
clip-path: polygon(0% 60.9816172483%, 100% 60.9816172483%, 100% 64.635942681%, 0% 64.635942681%);
transform: translate(-6.7497998255%, -0.492763833%);
}
10.8% {
clip-path: polygon(0% 30.5225543463%, 100% 30.5225543463%, 100% 32.5567543727%, 0% 32.5567543727%);
transform: translate(2.2359979785%, -0.2887172062%);
}
11% {
clip-path: polygon(0% 48.8274491988%, 100% 48.8274491988%, 100% 54.0404343737%, 0% 54.0404343737%);
transform: translate(2.1501052329%, 0.3074990637%);
}
11.2% {
clip-path: polygon(0% 51.8508124198%, 100% 51.8508124198%, 100% 61.6201538636%, 0% 61.6201538636%);
transform: translate(0.8622568233%, 0.3612137627%);
}
11.4% {
clip-path: polygon(0% 54.9748864644%, 100% 54.9748864644%, 100% 56.6577246574%, 0% 56.6577246574%);
transform: translate(-1.3980409609%, 0.445429508%);
}
11.6% {
clip-path: polygon(0% 81.3505678013%, 100% 81.3505678013%, 100% 83.0924507236%, 0% 83.0924507236%);
transform: translate(1.8821972339%, -0.3629136495%);
}
11.8% {
clip-path: polygon(0% 47.2020209835%, 100% 47.2020209835%, 100% 56.5002180834%, 0% 56.5002180834%);
transform: translate(7.1918937665%, -0.4849717483%);
}
12% {
clip-path: polygon(0% 54.2227479933%, 100% 54.2227479933%, 100% 63.5195590986%, 0% 63.5195590986%);
transform: translate(-6.3551742168%, 0.3815192059%);
}
12.2% {
clip-path: polygon(0% 62.1059628105%, 100% 62.1059628105%, 100% 66.6854246065%, 0% 66.6854246065%);
transform: translate(5.1812515827%, 0.415920301%);
}
12.4% {
clip-path: polygon(0% 77.637826235%, 100% 77.637826235%, 100% 82.2245558611%, 0% 82.2245558611%);
transform: translate(-6.8368689395%, 0.0645840038%);
}
12.6% {
clip-path: polygon(0% 13.223876822%, 100% 13.223876822%, 100% 16.0721360986%, 0% 16.0721360986%);
transform: translate(0.3953353715%, -0.1360287741%);
}
12.8% {
clip-path: polygon(0% 46.3352824667%, 100% 46.3352824667%, 100% 52.9009844609%, 0% 52.9009844609%);
transform: translate(2.4055533102%, -0.2958655299%);
}
13% {
clip-path: polygon(0% 29.5948299064%, 100% 29.5948299064%, 100% 30.8722449424%, 0% 30.8722449424%);
transform: translate(2.507101028%, -0.0318286605%);
}
13.2% {
clip-path: polygon(0% 78.7172341424%, 100% 78.7172341424%, 100% 83.2521622495%, 0% 83.2521622495%);
transform: translate(4.7218731709%, -0.2235921725%);
}
13.4% {
clip-path: polygon(0% 59.7077230061%, 100% 59.7077230061%, 100% 65.9234420306%, 0% 65.9234420306%);
transform: translate(-1.1947454108%, 0.2054905054%);
}
13.6% {
clip-path: polygon(0% 88.1754126791%, 100% 88.1754126791%, 100% 97.4486817127%, 0% 97.4486817127%);
transform: translate(-5.0087161192%, -0.4373851025%);
}
13.8% {
clip-path: polygon(0% 44.4103781033%, 100% 44.4103781033%, 100% 53.1496655124%, 0% 53.1496655124%);
transform: translate(-1.0245193398%, -0.3385009044%);
}
14% {
clip-path: polygon(0% 65.8588205759%, 100% 65.8588205759%, 100% 70.6009119617%, 0% 70.6009119617%);
transform: translate(4.7272913048%, -0.1025965491%);
}
14.2% {
clip-path: polygon(0% 16.1500044325%, 100% 16.1500044325%, 100% 25.9782923086%, 0% 25.9782923086%);
transform: translate(-3.3199985322%, 0.3548245929%);
}
14.4% {
clip-path: polygon(0% 52.7215435534%, 100% 52.7215435534%, 100% 58.663409341%, 0% 58.663409341%);
transform: translate(1.4667273616%, -0.4591125168%);
}
14.6% {
clip-path: polygon(0% 79.9008875362%, 100% 79.9008875362%, 100% 89.8690455166%, 0% 89.8690455166%);
transform: translate(5.4234577015%, 0.3614312361%);
}
14.8% {
clip-path: polygon(0% 28.6075975938%, 100% 28.6075975938%, 100% 37.2925602321%, 0% 37.2925602321%);
transform: translate(3.9640220752%, -0.1620282887%);
}
15% {
clip-path: polygon(0% 59.7719471312%, 100% 59.7719471312%, 100% 64.8416141173%, 0% 64.8416141173%);
transform: translate(5.5932712609%, 0.2423764564%);
}
15.2% {
clip-path: polygon(0% 73.8116102412%, 100% 73.8116102412%, 100% 74.8586834732%, 0% 74.8586834732%);
transform: translate(-2.4183358407%, 0.0044582902%);
}
15.4% {
clip-path: polygon(0% 49.8580527473%, 100% 49.8580527473%, 100% 59.2683346449%, 0% 59.2683346449%);
transform: translate(0.0529363319%, -0.1200019053%);
}
15.6% {
clip-path: polygon(0% 27.7357651822%, 100% 27.7357651822%, 100% 33.4248165723%, 0% 33.4248165723%);
transform: translate(6.5345900285%, 0.243975261%);
}
15.8% {
clip-path: polygon(0% 12.615474602%, 100% 12.615474602%, 100% 17.3186492651%, 0% 17.3186492651%);
transform: translate(-5.2724544922%, -0.2425725446%);
}
16% {
clip-path: polygon(0% 10.5686594113%, 100% 10.5686594113%, 100% 11.9630957686%, 0% 11.9630957686%);
transform: translate(-7.505925992%, -0.2625182643%);
}
16.2% {
clip-path: polygon(0% 54.3921203514%, 100% 54.3921203514%, 100% 60.5640508936%, 0% 60.5640508936%);
transform: translate(4.5841021609%, -0.0297821601%);
}
16.4% {
clip-path: polygon(0% 1.0945096766%, 100% 1.0945096766%, 100% 9.0831337331%, 0% 9.0831337331%);
transform: translate(-0.9232774605%, 0.1004920221%);
}
16.6% {
clip-path: polygon(0% 55.3032709855%, 100% 55.3032709855%, 100% 63.3722219054%, 0% 63.3722219054%);
transform: translate(-0.0648705165%, -0.2087756407%);
}
16.8% {
clip-path: polygon(0% 22.7405454008%, 100% 22.7405454008%, 100% 29.0787074121%, 0% 29.0787074121%);
transform: translate(-2.5384092323%, 0.0117705184%);
}
17% {
clip-path: polygon(0% 34.6607356456%, 100% 34.6607356456%, 100% 41.5980191118%, 0% 41.5980191118%);
transform: translate(-0.9602094082%, 0.2551430581%);
}
17.2% {
clip-path: polygon(0% 38.5287401058%, 100% 38.5287401058%, 100% 46.0619758633%, 0% 46.0619758633%);
transform: translate(-0.0239721844%, -0.1665699989%);
}
17.4% {
clip-path: polygon(0% 17.1244358182%, 100% 17.1244358182%, 100% 23.9584096735%, 0% 23.9584096735%);
transform: translate(-1.0769710876%, -0.277424818%);
}
17.6% {
clip-path: polygon(0% 40.6968478387%, 100% 40.6968478387%, 100% 48.6917984891%, 0% 48.6917984891%);
transform: translate(4.702496514%, -0.2252906209%);
}
17.8% {
clip-path: polygon(0% 57.3450513279%, 100% 57.3450513279%, 100% 63.9408994476%, 0% 63.9408994476%);
transform: translate(-0.4221338851%, -0.1964611208%);
}
18% {
clip-path: polygon(0% 8.232312514%, 100% 8.232312514%, 100% 15.4332760412%, 0% 15.4332760412%);
transform: translate(-3.1154653342%, -0.1492292101%);
}
18.2% {
clip-path: polygon(0% 34.7852946722%, 100% 34.7852946722%, 100% 42.5180990501%, 0% 42.5180990501%);
transform: translate(-7.4226516164%, -0.2801574995%);
}
18.4% {
clip-path: polygon(0% 36.2393403516%, 100% 36.2393403516%, 100% 43.8568745116%, 0% 43.8568745116%);
transform: translate(4.1491662957%, -0.1465048622%);
}
18.6% {
clip-path: polygon(0% 24.3879410967%, 100% 24.3879410967%, 100% 34.0009443854%, 0% 34.0009443854%);
transform: translate(-1.7272399217%, 0.4575598713%);
}
18.8% {
clip-path: polygon(0% 49.7822082232%, 100% 49.7822082232%, 100% 58.3565665888%, 0% 58.3565665888%);
transform: translate(-7.8251374353%, -0.3735523271%);
}
19% {
clip-path: polygon(0% 60.2943155991%, 100% 60.2943155991%, 100% 68.4641963774%, 0% 68.4641963774%);
transform: translate(-2.6344199951%, 0.1279454524%);
}
19.2% {
clip-path: polygon(0% 27.5085289235%, 100% 27.5085289235%, 100% 33.2803433534%, 0% 33.2803433534%);
transform: translate(1.6086145656%, 0.3680777253%);
}
19.4% {
clip-path: polygon(0% 86.9898342245%, 100% 86.9898342245%, 100% 91.6531344476%, 0% 91.6531344476%);
transform: translate(-0.2767641185%, 0.491700641%);
}
19.6% {
clip-path: polygon(0% 88.5546808416%, 100% 88.5546808416%, 100% 94.2690853654%, 0% 94.2690853654%);
transform: translate(1.7925450901%, 0.2754897905%);
}
19.8% {
clip-path: polygon(0% 51.9434107522%, 100% 51.9434107522%, 100% 56.975101517%, 0% 56.975101517%);
transform: translate(0.3254669036%, -0.0722270486%);
}
20%, 100% {
clip-path: none;
transform: none;
}
}
.glitch .channel {
mix-blend-mode: screen;
}
.glitch .channel::before {
bottom: 0;
content: "";
display: block;
mix-blend-mode: multiply;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.glitch .r {
animation: rgb-shift-r 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
0% {
transform: translate(-1.570833903%, -0.190051034%);
}
0.2% {
transform: translate(-1.2089584348%, -0.177897312%);
}
0.4% {
transform: translate(-0.2971849215%, -0.3243555937%);
}
0.6% {
transform: translate(-1.72859892%, -0.3050044718%);
}
0.8% {
transform: translate(-1.8421487013%, 0.1431700733%);
}
1% {
transform: translate(0.4122377427%, 0.0709173292%);
}
1.2% {
transform: translate(1.9509172228%, -0.1254194746%);
}
1.4% {
transform: translate(-0.8076334308%, 0.4967141061%);
}
1.6% {
transform: translate(-0.9139175585%, -0.4945755323%);
}
1.8% {
transform: translate(0.5982264926%, -0.4782926279%);
}
2% {
transform: translate(-1.4631111592%, -0.3651987289%);
}
2.2% {
transform: translate(1.822870233%, -0.4642487918%);
}
2.4% {
transform: translate(1.8595071035%, -0.0351578552%);
}
2.6% {
transform: translate(-0.7486396694%, 0.4158369063%);
}
2.8% {
transform: translate(0.3654118422%, -0.0791305198%);
}
3% {
transform: translate(-1.1703644809%, 0.1443455193%);
}
3.2% {
transform: translate(1.0141970236%, 0.0941213351%);
}
3.4% {
transform: translate(-0.7686328474%, -0.1932821757%);
}
3.6% {
transform: translate(-0.3722804032%, -0.0207008887%);
}
3.8% {
transform: translate(1.0730919059%, -0.281999047%);
}
4% {
transform: translate(-0.9560877352%, 0.4250523568%);
}
4.2% {
transform: translate(1.976773889%, 0.1328616963%);
}
4.4% {
transform: translate(-1.3168490097%, 0.1322536657%);
}
4.6% {
transform: translate(1.9061798053%, 0.4335547375%);
}
4.8% {
transform: translate(0.041955273%, -0.0175821673%);
}
5% {
transform: translate(0.863874105%, 0.3547510015%);
}
5.2% {
transform: translate(0.3634157085%, 0.4705004347%);
}
5.4% {
transform: translate(-0.189866489%, 0.1679089225%);
}
5.6% {
transform: translate(-0.0507723579%, -0.3703513187%);
}
5.8% {
transform: translate(0.1205882323%, -0.1512662173%);
}
6% {
transform: translate(0.9872042572%, -0.2635197812%);
}
6.2% {
transform: translate(1.0416651984%, 0.236453445%);
}
6.4% {
transform: translate(1.7566659717%, -0.1027495669%);
}
6.6% {
transform: translate(1.0550023734%, -0.3552905902%);
}
6.8% {
transform: translate(-1.0983291283%, -0.4419201527%);
}
7% {
transform: translate(-0.9377157901%, 0.0144206055%);
}
7.2% {
transform: translate(0.5941421507%, -0.001820403%);
}
7.4% {
transform: translate(1.9399247871%, 0.1357335006%);
}
7.6% {
transform: translate(-0.3869089007%, 0.1005434227%);
}
7.8% {
transform: translate(-0.6601468711%, 0.1570944061%);
}
8% {
transform: translate(-1.0271388223%, 0.2204441047%);
}
8.2% {
transform: translate(0.1933026508%, -0.2637865505%);
}
8.4% {
transform: translate(-1.3542477611%, 0.2447222078%);
}
8.6% {
transform: translate(-1.6770389018%, -0.2565261627%);
}
8.8% {
transform: translate(1.7758755001%, -0.2472668219%);
}
9% {
transform: translate(-0.875453489%, 0.1064785253%);
}
9.2% {
transform: translate(-0.9034282666%, 0.0967691269%);
}
9.4% {
transform: translate(-1.8100267299%, 0.23898675%);
}
9.6% {
transform: translate(0.970905809%, -0.0917453265%);
}
9.8% {
transform: translate(-0.8301293319%, -0.0492940763%);
}
10% {
transform: translate(0.8416531317%, 0.3514250663%);
}
10.2% {
transform: translate(1.5838535008%, -0.2050604265%);
}
10.4% {
transform: translate(0.9627237679%, 0.4529756335%);
}
10.6% {
transform: translate(0.4798649864%, -0.2048380194%);
}
10.8% {
transform: translate(-1.6550265491%, 0.3418880152%);
}
11% {
transform: translate(0.7943332541%, 0.448958395%);
}
11.2% {
transform: translate(-0.8072561986%, 0.3902068573%);
}
11.4% {
transform: translate(0.9402070411%, -0.2853270279%);
}
11.6% {
transform: translate(-0.7574039598%, -0.4176610203%);
}
11.8% {
transform: translate(0.7438044344%, 0.3894834934%);
}
12% {
transform: translate(0.3661274226%, -0.2488767856%);
}
12.2% {
transform: translate(-0.7755395892%, 0.1878144434%);
}
12.4% {
transform: translate(-1.8361053687%, -0.3881847081%);
}
12.6% {
transform: translate(-0.2062490505%, 0.3140545777%);
}
12.8% {
transform: translate(-1.382504692%, -0.023222738%);
}
13% {
transform: translate(1.9940756002%, 0.1299678259%);
}
13.2% {
transform: translate(1.6074846838%, 0.4490182052%);
}
13.4% {
transform: translate(-1.9251103087%, -0.3590191816%);
}
13.6% {
transform: translate(-0.1954167715%, 0.0972047819%);
}
13.8% {
transform: translate(-1.3356009701%, 0.1281093446%);
}
14% {
transform: translate(0.4796109591%, 0.0796522694%);
}
14.2% {
transform: translate(-0.9677046374%, -0.3296775827%);
}
14.4% {
transform: translate(-1.0650237457%, -0.312046632%);
}
14.6% {
transform: translate(-0.9854558499%, -0.2871993452%);
}
14.8% {
transform: translate(-1.0854800715%, 0.0321292303%);
}
15% {
transform: translate(1.9978391181%, 0.0958236379%);
}
15.2% {
transform: translate(-0.641267684%, 0.2414531055%);
}
15.4% {
transform: translate(-1.1773548729%, -0.2098262593%);
}
15.6% {
transform: translate(-1.7636382844%, 0.2935476966%);
}
15.8% {
transform: translate(-0.4592110392%, 0.4332748984%);
}
16% {
transform: translate(1.9563843929%, 0.2039138861%);
}
16.2% {
transform: translate(-0.2445405845%, -0.3272734991%);
}
16.4% {
transform: translate(-0.5488657938%, -0.059234023%);
}
16.6% {
transform: translate(0.5734460516%, -0.3321774013%);
}
16.8% {
transform: translate(0.5986600669%, -0.4789285018%);
}
17% {
transform: translate(-0.4137197608%, 0.4311401317%);
}
17.2% {
transform: translate(0.3927145358%, 0.1653578119%);
}
17.4% {
transform: translate(1.9395074462%, 0.4172662773%);
}
17.6% {
transform: translate(1.4580825784%, -0.1680866017%);
}
17.8% {
transform: translate(1.9541861801%, 0.1810978687%);
}
18% {
transform: translate(0.7018408769%, -0.3417218727%);
}
18.2% {
transform: translate(-1.7715289389%, 0.0181722207%);
}
18.4% {
transform: translate(0.5742116841%, -0.2627115116%);
}
18.6% {
transform: translate(1.1946093225%, -0.3661838982%);
}
18.8% {
transform: translate(0.4114315293%, 0.2006779962%);
}
19% {
transform: translate(-1.8944090907%, 0.0227482544%);
}
19.2% {
transform: translate(0.9906817609%, 0.388111216%);
}
19.4% {
transform: translate(0.3582738839%, -0.4859034465%);
}
19.6% {
transform: translate(-0.5995813369%, 0.2508407356%);
}
19.8% {
transform: translate(-0.3086934282%, -0.0590285226%);
}
20%, 100% {
transform: none;
}
}
.glitch .r::before {
background: #f00;
}
.glitch .g {
animation: rgb-shift-g 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
0% {
transform: translate(-0.5014587562%, 0.2068704766%);
}
0.2% {
transform: translate(-0.5228544668%, 0.396637328%);
}
0.4% {
transform: translate(0.9373612422%, -0.4883878992%);
}
0.6% {
transform: translate(-0.1570607182%, -0.1757285427%);
}
0.8% {
transform: translate(-1.2511310408%, -0.4055438765%);
}
1% {
transform: translate(-0.4834597878%, 0.3510446106%);
}
1.2% {
transform: translate(1.0506327076%, 0.492644059%);
}
1.4% {
transform: translate(-0.895417937%, 0.022573142%);
}
1.6% {
transform: translate(-1.3578095838%, 0.0900781433%);
}
1.8% {
transform: translate(-1.0323645994%, 0.1577252161%);
}
2% {
transform: translate(0.1650825126%, -0.3136566816%);
}
2.2% {
transform: translate(-1.3576099645%, -0.077444623%);
}
2.4% {
transform: translate(1.2898824657%, 0.2166223572%);
}
2.6% {
transform: translate(-0.6087564287%, 0.035999823%);
}
2.8% {
transform: translate(-0.4534198292%, 0.4529076928%);
}
3% {
transform: translate(-1.8321763953%, 0.444603924%);
}
3.2% {
transform: translate(0.4319087878%, 0.2339950584%);
}
3.4% {
transform: translate(1.618684933%, 0.341818789%);
}
3.6% {
transform: translate(0.2883618519%, 0.3130957586%);
}
3.8% {
transform: translate(0.5587567716%, 0.3215374508%);
}
4% {
transform: translate(1.7132170726%, 0.213448946%);
}
4.2% {
transform: translate(1.7139156883%, 0.474150018%);
}
4.4% {
transform: translate(0.6112049591%, -0.3176378678%);
}
4.6% {
transform: translate(-0.6434827458%, -0.2742689542%);
}
4.8% {
transform: translate(-0.4298386362%, -0.0719865336%);
}
5% {
transform: translate(1.7180084663%, -0.4872331009%);
}
5.2% {
transform: translate(-0.3428270729%, 0.3265146887%);
}
5.4% {
transform: translate(0.8565650271%, 0.441442201%);
}
5.6% {
transform: translate(1.4506433513%, 0.3295623034%);
}
5.8% {
transform: translate(0.6268756997%, 0.4775351912%);
}
6% {
transform: translate(-0.8347434538%, -0.1381007526%);
}
6.2% {
transform: translate(1.5676436171%, 0.1541372684%);
}
6.4% {
transform: translate(-1.3015263387%, 0.3655455514%);
}
6.6% {
transform: translate(0.9535624015%, -0.161780213%);
}
6.8% {
transform: translate(-0.2458865124%, 0.4174694773%);
}
7% {
transform: translate(0.9605699329%, 0.0588124807%);
}
7.2% {
transform: translate(1.2085618958%, -0.0849042944%);
}
7.4% {
transform: translate(1.5426775322%, -0.2460047258%);
}
7.6% {
transform: translate(0.9203110213%, 0.4438719797%);
}
7.8% {
transform: translate(-0.3847164285%, 0.1239248558%);
}
8% {
transform: translate(-1.9381375403%, 0.0169283264%);
}
8.2% {
transform: translate(1.3801161646%, 0.2757811074%);
}
8.4% {
transform: translate(-0.8364733071%, -0.2993314566%);
}
8.6% {
transform: translate(-0.8609665897%, -0.0445388485%);
}
8.8% {
transform: translate(0.3012083456%, 0.3283417466%);
}
9% {
transform: translate(0.8640713394%, 0.2914402084%);
}
9.2% {
transform: translate(-1.375090908%, -0.2697471568%);
}
9.4% {
transform: translate(-1.6568198037%, -0.3409157955%);
}
9.6% {
transform: translate(-1.0782346582%, -0.3215840757%);
}
9.8% {
transform: translate(-0.3890409053%, 0.0436607924%);
}
10% {
transform: translate(1.3710795558%, 0.015339717%);
}
10.2% {
transform: translate(0.2003545025%, 0.1813571012%);
}
10.4% {
transform: translate(1.6994437249%, -0.1687388316%);
}
10.6% {
transform: translate(-0.2624965473%, -0.4059418273%);
}
10.8% {
transform: translate(1.9110443842%, -0.0883837291%);
}
11% {
transform: translate(-0.1706929691%, -0.4220547603%);
}
11.2% {
transform: translate(-0.3859991996%, 0.0892219406%);
}
11.4% {
transform: translate(0.1293361073%, -0.4262926521%);
}
11.6% {
transform: translate(-1.3796011262%, 0.0364379567%);
}
11.8% {
transform: translate(0.8094626016%, -0.4629194495%);
}
12% {
transform: translate(0.3517580856%, -0.30341033%);
}
12.2% {
transform: translate(-1.3424131595%, 0.3247314447%);
}
12.4% {
transform: translate(-1.9538698275%, -0.3624280752%);
}
12.6% {
transform: translate(0.2237652234%, -0.3783902292%);
}
12.8% {
transform: translate(-1.8892390311%, -0.1615385643%);
}
13% {
transform: translate(-0.4654387468%, 0.4174102388%);
}
13.2% {
transform: translate(1.716707895%, -0.469117045%);
}
13.4% {
transform: translate(-1.1962309605%, -0.3749527835%);
}
13.6% {
transform: translate(-1.7313256222%, 0.389258602%);
}
13.8% {
transform: translate(-0.3205053324%, 0.3560169134%);
}
14% {
transform: translate(1.0746981885%, -0.1438548245%);
}
14.2% {
transform: translate(-0.6259003727%, 0.0730324529%);
}
14.4% {
transform: translate(1.4615049824%, -0.4552369992%);
}
14.6% {
transform: translate(1.851935924%, -0.2007156976%);
}
14.8% {
transform: translate(-1.5595146899%, -0.4129756359%);
}
15% {
transform: translate(1.553794818%, 0.0970705067%);
}
15.2% {
transform: translate(0.9634536617%, -0.0927064059%);
}
15.4% {
transform: translate(-1.3176074061%, 0.2463387237%);
}
15.6% {
transform: translate(-0.671312925%, -0.3463243482%);
}
15.8% {
transform: translate(-1.6983783821%, -0.0363579678%);
}
16% {
transform: translate(-0.5572856783%, 0.390484069%);
}
16.2% {
transform: translate(0.0877771432%, 0.4712329439%);
}
16.4% {
transform: translate(-1.5708125116%, 0.0003542173%);
}
16.6% {
transform: translate(0.315713911%, -0.3806902121%);
}
16.8% {
transform: translate(0.1306347901%, 0.4285960772%);
}
17% {
transform: translate(1.0644090809%, -0.0852852745%);
}
17.2% {
transform: translate(1.6016241474%, -0.3751336842%);
}
17.4% {
transform: translate(-0.8173948771%, 0.0795091093%);
}
17.6% {
transform: translate(0.3460651819%, 0.4596931896%);
}
17.8% {
transform: translate(0.737629795%, 0.0164903247%);
}
18% {
transform: translate(-1.7405389629%, -0.3485992316%);
}
18.2% {
transform: translate(-0.9098437063%, 0.1879998237%);
}
18.4% {
transform: translate(-0.3956176875%, -0.2060831051%);
}
18.6% {
transform: translate(0.8261335368%, 0.4050024861%);
}
18.8% {
transform: translate(0.2581814601%, -0.1639184798%);
}
19% {
transform: translate(1.4676013503%, 0.4854943117%);
}
19.2% {
transform: translate(1.9568304356%, 0.1284387864%);
}
19.4% {
transform: translate(0.0198673542%, 0.1931998212%);
}
19.6% {
transform: translate(-1.583005826%, 0.0722073585%);
}
19.8% {
transform: translate(1.1720038723%, 0.0387385863%);
}
20%, 100% {
transform: none;
}
}
.glitch .g::before {
background: #0f0;
}
.glitch .b {
animation: rgb-shift-b 1s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
0% {
transform: translate(1.467008759%, 0.2964567648%);
}
0.2% {
transform: translate(1.5255536877%, 0.2036836885%);
}
0.4% {
transform: translate(1.8838032132%, -0.0913226436%);
}
0.6% {
transform: translate(-1.1226526943%, 0.4975177869%);
}
0.8% {
transform: translate(0.7020732976%, 0.2691633214%);
}
1% {
transform: translate(-1.0354460074%, 0.3822622413%);
}
1.2% {
transform: translate(1.5221081917%, -0.4035370238%);
}
1.4% {
transform: translate(-1.3051462962%, -0.0729269564%);
}
1.6% {
transform: translate(0.1885961541%, 0.3225285056%);
}
1.8% {
transform: translate(-0.0534238181%, -0.2600210219%);
}
2% {
transform: translate(1.3882802001%, 0.162470853%);
}
2.2% {
transform: translate(-1.5351559322%, -0.4420258469%);
}
2.4% {
transform: translate(-1.1383647244%, 0.3223580026%);
}
2.6% {
transform: translate(-1.8700137475%, -0.0016514485%);
}
2.8% {
transform: translate(-1.400085774%, 0.209383717%);
}
3% {
transform: translate(1.1662289377%, -0.4154027204%);
}
3.2% {
transform: translate(-0.358114857%, -0.2735974466%);
}
3.4% {
transform: translate(-1.490420132%, 0.396863936%);
}
3.6% {
transform: translate(0.1739741827%, -0.0981860122%);
}
3.8% {
transform: translate(0.2649996226%, -0.4601457137%);
}
4% {
transform: translate(0.9765930851%, 0.0283378605%);
}
4.2% {
transform: translate(-1.4816236032%, 0.4020943942%);
}
4.4% {
transform: translate(-0.4690191034%, 0.3610244223%);
}
4.6% {
transform: translate(-1.5446016179%, -0.218895015%);
}
4.8% {
transform: translate(0.8312515912%, -0.1660755092%);
}
5% {
transform: translate(1.2702198942%, 0.3707856363%);
}
5.2% {
transform: translate(1.2192653449%, 0.1511308804%);
}
5.4% {
transform: translate(-1.9694393104%, -0.2412841443%);
}
5.6% {
transform: translate(-1.4909594592%, -0.3557908208%);
}
5.8% {
transform: translate(0.1050708346%, 0.157699232%);
}
6% {
transform: translate(-0.6730239502%, 0.4258942687%);
}
6.2% {
transform: translate(-1.8665291343%, 0.403422953%);
}
6.4% {
transform: translate(-0.019179074%, -0.4375287786%);
}
6.6% {
transform: translate(-0.7399195999%, -0.0024006217%);
}
6.8% {
transform: translate(1.4609241238%, -0.202727803%);
}
7% {
transform: translate(-1.593229511%, -0.4887890421%);
}
7.2% {
transform: translate(0.3247559296%, -0.3383723798%);
}
7.4% {
transform: translate(0.9709739751%, 0.2836947888%);
}
7.6% {
transform: translate(-0.0758270963%, 0.2123273638%);
}
7.8% {
transform: translate(1.9527932136%, 0.4275917596%);
}
8% {
transform: translate(1.5920176291%, -0.4124089335%);
}
8.2% {
transform: translate(0.4800850995%, 0.4958170011%);
}
8.4% {
transform: translate(0.1843924142%, -0.4502059847%);
}
8.6% {
transform: translate(1.0083751004%, 0.1676688643%);
}
8.8% {
transform: translate(-0.5107001267%, -0.441799762%);
}
9% {
transform: translate(1.5413797853%, -0.2765490015%);
}
9.2% {
transform: translate(1.2029085596%, -0.0090773663%);
}
9.4% {
transform: translate(-0.8255734547%, 0.2422735135%);
}
9.6% {
transform: translate(-1.8545293875%, -0.0450440928%);
}
9.8% {
transform: translate(0.2908138924%, 0.0405099898%);
}
10% {
transform: translate(0.9983275666%, -0.2464781453%);
}
10.2% {
transform: translate(-0.2161814921%, -0.2876616695%);
}
10.4% {
transform: translate(-1.4494798644%, 0.4792991801%);
}
10.6% {
transform: translate(1.7298413352%, -0.1080752088%);
}
10.8% {
transform: translate(-1.6707765461%, 0.4094601393%);
}
11% {
transform: translate(-1.2881933147%, -0.2379855484%);
}
11.2% {
transform: translate(1.7348921328%, 0.4979135187%);
}
11.4% {
transform: translate(-0.3570754652%, 0.3753678157%);
}
11.6% {
transform: translate(-1.7807466849%, -0.1317693366%);
}
11.8% {
transform: translate(-0.6143750979%, 0.3794802315%);
}
12% {
transform: translate(-0.9654750903%, 0.0138064775%);
}
12.2% {
transform: translate(1.4987235634%, -0.2705051421%);
}
12.4% {
transform: translate(0.5366407772%, -0.0651751795%);
}
12.6% {
transform: translate(0.6122262071%, 0.4044696316%);
}
12.8% {
transform: translate(-1.2824504724%, -0.20661956%);
}
13% {
transform: translate(1.7583711566%, 0.286513382%);
}
13.2% {
transform: translate(0.3216770539%, -0.2398843619%);
}
13.4% {
transform: translate(1.8370910353%, -0.1765906933%);
}
13.6% {
transform: translate(-1.5675169286%, 0.37193055%);
}
13.8% {
transform: translate(-0.15916839%, 0.4892574958%);
}
14% {
transform: translate(-1.1616326621%, 0.2546198413%);
}
14.2% {
transform: translate(-1.3914094819%, -0.4098718237%);
}
14.4% {
transform: translate(1.49484345%, -0.0283118857%);
}
14.6% {
transform: translate(-1.3655478657%, -0.2980043423%);
}
14.8% {
transform: translate(1.3435076751%, -0.1146284915%);
}
15% {
transform: translate(-1.0807046155%, -0.2891546538%);
}
15.2% {
transform: translate(1.0374378213%, 0.2472272258%);
}
15.4% {
transform: translate(-1.5587933639%, -0.2918812529%);
}
15.6% {
transform: translate(1.2761001453%, 0.116248068%);
}
15.8% {
transform: translate(-0.8944139282%, 0.4882766195%);
}
16% {
transform: translate(-0.2561612918%, -0.2574372676%);
}
16.2% {
transform: translate(-1.4157865255%, -0.4403314496%);
}
16.4% {
transform: translate(0.6725480579%, 0.4651263148%);
}
16.6% {
transform: translate(1.1807620964%, 0.2166344579%);
}
16.8% {
transform: translate(-1.0311659521%, 0.3992594999%);
}
17% {
transform: translate(0.2780171819%, -0.0477474908%);
}
17.2% {
transform: translate(0.2112552813%, 0.0022150869%);
}
17.4% {
transform: translate(1.2248047655%, -0.2307770205%);
}
17.6% {
transform: translate(-0.8346911667%, -0.0464190867%);
}
17.8% {
transform: translate(-1.9330781796%, -0.1531805803%);
}
18% {
transform: translate(1.8648475033%, 0.2923813338%);
}
18.2% {
transform: translate(1.8928431359%, -0.453539703%);
}
18.4% {
transform: translate(1.7078390709%, 0.0326985638%);
}
18.6% {
transform: translate(-1.4567192647%, 0.0633706127%);
}
18.8% {
transform: translate(-0.7537021688%, -0.2860001432%);
}
19% {
transform: translate(1.1251676996%, -0.3347436392%);
}
19.2% {
transform: translate(1.7994013157%, -0.1921155938%);
}
19.4% {
transform: translate(1.0088999223%, 0.2837181421%);
}
19.6% {
transform: translate(-1.492796346%, -0.3710005536%);
}
19.8% {
transform: translate(1.9643998086%, 0.322514779%);
}
20%, 100% {
transform: none;
}
}
.glitch .b::before {
background: #00f;
}
div.glitch {
position: relative;
}
@keyframes noise-anim {
0% {
clip: rect(97px, 9999px, 74px, 0);
}
1.6666666667% {
clip: rect(201px, 9999px, 13px, 0);
}
3.3333333333% {
clip: rect(158px, 9999px, 62px, 0);
}
5% {
clip: rect(169px, 9999px, 102px, 0);
}
6.6666666667% {
clip: rect(15px, 9999px, 6px, 0);
}
8.3333333333% {
clip: rect(195px, 9999px, 96px, 0);
}
10% {
clip: rect(123px, 9999px, 119px, 0);
}
11.6666666667% {
clip: rect(38px, 9999px, 104px, 0);
}
13.3333333333% {
clip: rect(146px, 9999px, 2px, 0);
}
15% {
clip: rect(118px, 9999px, 122px, 0);
}
16.6666666667% {
clip: rect(80px, 9999px, 38px, 0);
}
18.3333333333% {
clip: rect(22px, 9999px, 140px, 0);
}
20% {
clip: rect(5px, 9999px, 53px, 0);
}
21.6666666667% {
clip: rect(182px, 9999px, 66px, 0);
}
23.3333333333% {
clip: rect(30px, 9999px, 61px, 0);
}
25% {
clip: rect(106px, 9999px, 84px, 0);
}
26.6666666667% {
clip: rect(138px, 9999px, 141px, 0);
}
28.3333333333% {
clip: rect(117px, 9999px, 50px, 0);
}
30% {
clip: rect(121px, 9999px, 63px, 0);
}
31.6666666667% {
clip: rect(15px, 9999px, 100px, 0);
}
33.3333333333% {
clip: rect(61px, 9999px, 77px, 0);
}
35% {
clip: rect(9px, 9999px, 92px, 0);
}
36.6666666667% {
clip: rect(59px, 9999px, 11px, 0);
}
38.3333333333% {
clip: rect(133px, 9999px, 132px, 0);
}
40% {
clip: rect(125px, 9999px, 10px, 0);
}
41.6666666667% {
clip: rect(209px, 9999px, 97px, 0);
}
43.3333333333% {
clip: rect(160px, 9999px, 76px, 0);
}
45% {
clip: rect(126px, 9999px, 24px, 0);
}
46.6666666667% {
clip: rect(125px, 9999px, 125px, 0);
}
48.3333333333% {
clip: rect(30px, 9999px, 1px, 0);
}
50% {
clip: rect(46px, 9999px, 142px, 0);
}
51.6666666667% {
clip: rect(77px, 9999px, 130px, 0);
}
53.3333333333% {
clip: rect(192px, 9999px, 98px, 0);
}
55% {
clip: rect(46px, 9999px, 133px, 0);
}
56.6666666667% {
clip: rect(138px, 9999px, 106px, 0);
}
58.3333333333% {
clip: rect(75px, 9999px, 72px, 0);
}
60% {
clip: rect(190px, 9999px, 142px, 0);
}
61.6666666667% {
clip: rect(40px, 9999px, 33px, 0);
}
63.3333333333% {
clip: rect(61px, 9999px, 11px, 0);
}
65% {
clip: rect(152px, 9999px, 34px, 0);
}
66.6666666667% {
clip: rect(50px, 9999px, 143px, 0);
}
68.3333333333% {
clip: rect(201px, 9999px, 53px, 0);
}
70% {
clip: rect(14px, 9999px, 18px, 0);
}
71.6666666667% {
clip: rect(178px, 9999px, 56px, 0);
}
73.3333333333% {
clip: rect(192px, 9999px, 115px, 0);
}
75% {
clip: rect(115px, 9999px, 10px, 0);
}
76.6666666667% {
clip: rect(80px, 9999px, 107px, 0);
}
78.3333333333% {
clip: rect(114px, 9999px, 142px, 0);
}
80% {
clip: rect(56px, 9999px, 119px, 0);
}
81.6666666667% {
clip: rect(110px, 9999px, 125px, 0);
}
83.3333333333% {
clip: rect(155px, 9999px, 63px, 0);
}
85% {
clip: rect(85px, 9999px, 87px, 0);
}
86.6666666667% {
clip: rect(58px, 9999px, 87px, 0);
}
88.3333333333% {
clip: rect(171px, 9999px, 66px, 0);
}
90% {
clip: rect(206px, 9999px, 124px, 0);
}
91.6666666667% {
clip: rect(153px, 9999px, 137px, 0);
}
93.3333333333% {
clip: rect(35px, 9999px, 56px, 0);
}
95% {
clip: rect(22px, 9999px, 40px, 0);
}
96.6666666667% {
clip: rect(139px, 9999px, 62px, 0);
}
98.3333333333% {
clip: rect(190px, 9999px, 62px, 0);
}
100% {
clip: rect(158px, 9999px, 89px, 0);
}
}
.glitch-effect {
position: absolute;
left: -5px;
clip: rect(0, 9000px, 0, 0);
animation: noise-anim 3s infinite linear alternate-reverse;
}
.txtglitch {
position: relative;
animation: glitch-skew 4s infinite linear alternate-reverse;
}
.txtglitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 2px;
text-shadow: -2px 0 #00fff2;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.txtglitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -2px;
text-shadow: -2px 0 #717e7d, 2px 2px #ff00c1;
animation: glitch-anim2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% {
clip: rect(47px, 9999px, 50px, 0);
transform: skew(0.2deg);
}
5% {
clip: rect(95px, 9999px, 82px, 0);
transform: skew(0.76deg);
}
10% {
clip: rect(52px, 9999px, 95px, 0);
transform: skew(0.9deg);
}
15% {
clip: rect(35px, 9999px, 80px, 0);
transform: skew(0.84deg);
}
20% {
clip: rect(28px, 9999px, 20px, 0);
transform: skew(0.31deg);
}
25% {
clip: rect(10px, 9999px, 36px, 0);
transform: skew(0.62deg);
}
30% {
clip: rect(55px, 9999px, 45px, 0);
transform: skew(0.43deg);
}
35% {
clip: rect(74px, 9999px, 69px, 0);
transform: skew(0.12deg);
}
40% {
clip: rect(21px, 9999px, 85px, 0);
transform: skew(0.69deg);
}
45% {
clip: rect(21px, 9999px, 46px, 0);
transform: skew(0.03deg);
}
50% {
clip: rect(86px, 9999px, 97px, 0);
transform: skew(0.31deg);
}
55% {
clip: rect(89px, 9999px, 55px, 0);
transform: skew(0.34deg);
}
60% {
clip: rect(50px, 9999px, 77px, 0);
transform: skew(0.26deg);
}
65% {
clip: rect(65px, 9999px, 56px, 0);
transform: skew(0.73deg);
}
70% {
clip: rect(22px, 9999px, 91px, 0);
transform: skew(0.75deg);
}
75% {
clip: rect(28px, 9999px, 87px, 0);
transform: skew(0.08deg);
}
80% {
clip: rect(22px, 9999px, 2px, 0);
transform: skew(0.53deg);
}
85% {
clip: rect(28px, 9999px, 42px, 0);
transform: skew(0.43deg);
}
90% {
clip: rect(88px, 9999px, 51px, 0);
transform: skew(0.95deg);
}
95% {
clip: rect(96px, 9999px, 82px, 0);
transform: skew(0.35deg);
}
100% {
clip: rect(14px, 9999px, 42px, 0);
transform: skew(0.71deg);
}
}
@keyframes glitch-anim2 {
0% {
clip: rect(52px, 9999px, 84px, 0);
transform: skew(0.83deg);
}
5% {
clip: rect(68px, 9999px, 62px, 0);
transform: skew(0.36deg);
}
10% {
clip: rect(62px, 9999px, 49px, 0);
transform: skew(0.86deg);
}
15% {
clip: rect(25px, 9999px, 72px, 0);
transform: skew(0.82deg);
}
20% {
clip: rect(37px, 9999px, 90px, 0);
transform: skew(0.03deg);
}
25% {
clip: rect(15px, 9999px, 4px, 0);
transform: skew(0.02deg);
}
30% {
clip: rect(27px, 9999px, 15px, 0);
transform: skew(0.77deg);
}
35% {
clip: rect(29px, 9999px, 21px, 0);
transform: skew(0.66deg);
}
40% {
clip: rect(9px, 9999px, 90px, 0);
transform: skew(0.57deg);
}
45% {
clip: rect(28px, 9999px, 11px, 0);
transform: skew(0.97deg);
}
50% {
clip: rect(22px, 9999px, 84px, 0);
transform: skew(0.23deg);
}
55% {
clip: rect(63px, 9999px, 82px, 0);
transform: skew(0.12deg);
}
60% {
clip: rect(80px, 9999px, 79px, 0);
transform: skew(0.42deg);
}
65% {
clip: rect(81px, 9999px, 85px, 0);
transform: skew(0.34deg);
}
70% {
clip: rect(70px, 9999px, 27px, 0);
transform: skew(0.64deg);
}
75% {
clip: rect(96px, 9999px, 54px, 0);
transform: skew(0.87deg);
}
80% {
clip: rect(23px, 9999px, 6px, 0);
transform: skew(0.27deg);
}
85% {
clip: rect(61px, 9999px, 38px, 0);
transform: skew(0.25deg);
}
90% {
clip: rect(70px, 9999px, 81px, 0);
transform: skew(0.93deg);
}
95% {
clip: rect(96px, 9999px, 37px, 0);
transform: skew(0.04deg);
}
100% {
clip: rect(99px, 9999px, 86px, 0);
transform: skew(0.21deg);
}
}
@keyframes glitch-skew {
0% {
transform: skew(-2deg);
}
10% {
transform: skew(-2deg);
}
20% {
transform: skew(-2deg);
}
30% {
transform: skew(-1deg);
}
40% {
transform: skew(-3deg);
}
50% {
transform: skew(0deg);
}
60% {
transform: skew(-1deg);
}
70% {
transform: skew(0deg);
}
80% {
transform: skew(-3deg);
}
90% {
transform: skew(-3deg);
}
100% {
transform: skew(-2deg);
}
}
/*title*/
.page--home {
/* delighter */
}
.page--home section {
border-bottom: 1px solid #444444;
}
.page--home section:last-child {
border-bottom: none;
}
.page--home .block--title {
display: inline-block;
height: min-content;
}
.page--home .block--title .section-tit {
font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem);
font-weight: 600;
color: #fff;
line-height: 1;
margin: 0;
}
.page--home .block--title .section-subtit {
color: #fff;
font-weight: 500;
font-size: 14px;
position: relative;
text-indent: 1.5em;
line-height: 1;
margin: 0 0 2em 0;
}
.page--home .block--title .section-subtit::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50px;
top: 50%;
left: 0;
transform: translateY(-50%);
background: #fff;
}
.page--home .block--title .list__more {
margin-top: 2em;
}
.page--home .block--title .list__more a {
color: #fff;
font-weight: 600;
text-decoration: none;
font-size: 20px;
position: relative;
padding-right: 1.5em;
line-height: 1;
}
.page--home .block--title .list__more a img {
position: absolute;
right: 0;
top: 0;
margin-top: 4px;
transform-origin: center;
}
.page--home .limited .block--title .section-tit {
font-size: clamp(3.125rem, 2.4038rem + 3.2051vw, 6.25rem);
}
.page--home .limited .block--title .section-subtit {
color: #7B64D6;
font-weight: 500;
font-size: 14px;
position: relative;
text-indent: 1.5em;
line-height: 1;
margin: 0 0 2em 0;
}
.page--home .limited .block--title .section-subtit::after {
position: absolute;
content: "";
width: 12px;
height: 12px;
border-radius: 0px;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: transparent;
background-image: url("/static/original/fanclub/img/fc.svg");
background-position: center;
background-size: cover;
}
.page--home .limited .block--title .list__more {
margin-top: 2em;
}
@keyframes arrow {
0% {
transform: translate(0%, 0%);
opacity: 1;
}
33% {
transform: translate(100%, -100%);
opacity: 0;
}
65% {
opacity: 0;
}
66% {
transform: translate(-100%, 100%);
opacity: 0;
}
100% {
transform: translate(0%, 0%);
}
}
.page--home .delighter {
opacity: 0;
position: relative;
}
.page--home .delighter::after {
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mix-blend-mode: difference;
}
.page--home .delighter.started {
opacity: 1;
}
.page--home .delighter > * {
opacity: 0;
}
.page--home .delighter.started > * {
animation: contentAnim 0.8s forwards;
}
@keyframes contentAnim {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.page--home .delighter.started::after {
animation: titFade2 0.8s forwards;
}
@keyframes titFade2 {
0% {
transform: scaleX(0);
transform-origin: left;
}
49% {
transform: scaleX(1);
transform-origin: left;
}
51% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
body:not(.page--home) {
/* delighter */
}
body:not(.page--home) section .block--title {
display: block;
width: fit-content;
height: min-content;
margin: 0 auto;
margin-bottom: 80px;
text-align: center;
}
body:not(.page--home) section .block--title .section-tit {
font-size: clamp(1.875rem, 0.8654rem + 4.4872vw, 6.25rem);
font-weight: 600;
color: #fff;
line-height: 1;
}
body:not(.page--home) section .block--title .section-subtit {
color: #fff;
font-weight: 500;
font-size: 14px;
position: relative;
text-indent: 1.5em;
line-height: 1;
margin: 0 auto 1em auto;
width: fit-content;
display: block;
}
body:not(.page--home) section .block--title .section-subtit::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50px;
top: 50%;
left: 0;
transform: translateY(-50%);
background: #fff;
}
body:not(.page--home) section.limited .block--title .section-tit {
font-size: clamp(1.875rem, 0.8654rem + 4.4872vw, 6.25rem);
}
body:not(.page--home) section.limited .block--title .section-subtit {
color: #7B64D6;
font-weight: 500;
font-size: 14px;
position: relative;
text-indent: 1.5em;
line-height: 1;
margin: 0 auto 1em auto;
width: fit-content;
display: block;
}
body:not(.page--home) section.limited .block--title .section-subtit::after {
position: absolute;
content: "";
width: 12px;
height: 12px;
border-radius: 0px;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: transparent;
background-image: url("/static/original/fanclub/img/fc.svg");
background-position: center;
background-size: cover;
}
body:not(.page--home) .delighter {
opacity: 0;
position: relative;
}
body:not(.page--home) .delighter::after {
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mix-blend-mode: difference;
}
body:not(.page--home) .delighter.started {
opacity: 1;
}
body:not(.page--home) .delighter > * {
opacity: 0;
}
body:not(.page--home) .delighter.started > * {
animation: contentAnim 0.8s forwards;
}
@keyframes contentAnim {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body:not(.page--home) .delighter.started::after {
animation: titFade2 0.8s forwards;
}
@keyframes titFade2 {
0% {
transform: scaleX(0);
transform-origin: left;
}
49% {
transform: scaleX(1);
transform-origin: left;
}
51% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
/* input */
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=number],
button {
-webkit-appearance: none;
display: inline-block;
width: 100%;
max-width: 100%;
background: #fff;
box-shadow: none;
border: 1px solid #ffffff;
padding: 0.5em 0.8em;
color: #ffffff;
color: #000;
}
@media screen and (min-width: 961px) {
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=number],
button {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
font-feature-settings: "palt";
letter-spacing: 0.04em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=number],
button {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
}
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
button:focus {
border-color: inherit;
}
input[type=text].form__error,
input[type=tel].form__error,
input[type=email].form__error,
input[type=password].form__error,
input[type=number].form__error,
button.form__error {
background: #fff0ea;
color: #ff77bc;
border-color: #ff77bc;
}
input[type=text].form__error:focus,
input[type=tel].form__error:focus,
input[type=email].form__error:focus,
input[type=password].form__error:focus,
input[type=number].form__error:focus,
button.form__error:focus {
background: transparent;
color: inherit;
border-color: inherit;
}
input[type=text][disabled],
input[type=tel][disabled],
input[type=email][disabled],
input[type=password][disabled],
input[type=number][disabled],
button[disabled] {
background: #ddd;
border: none;
opacity: 0.5;
}
input[readonly=readonly],
input[readonly=readonly] {
border: none;
background: #fff;
}
.input--half {
width: 50% !important;
}
.input--quarter {
width: 25% !important;
}
button {
border: none;
line-height: 1;
}
.btn {
text-align: center;
}
.btn--main {
color: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
min-width: 250px;
text-align: center;
text-decoration: none;
border-radius: 40px;
padding: 20px 1.5em;
cursor: pointer;
border: 1px solid #7B64D6;
color: #fff;
background: #7B64D6;
margin-bottom: 1em;
}
.btn--sub {
min-width: 250px;
color: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
text-decoration: none;
border-radius: 40px;
padding: 20px 1.5em;
cursor: pointer;
border: #ffffff solid 1px;
color: #ffffff;
margin-bottom: 1em;
}
.block--submit {
text-align: center;
}
.form--post dd {
margin-bottom: 20px;
}
/* textarea */
textarea {
-webkit-appearance: none;
display: inline-block;
width: 100%;
max-width: 100%;
background: #fff;
box-shadow: none;
border: 1px solid #ffffff;
padding: 0.5em 0.8em;
color: #ffffff;
height: 10em;
color: #000;
}
@media screen and (min-width: 961px) {
textarea {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
font-feature-settings: "palt";
letter-spacing: 0.04em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
textarea {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
}
textarea:focus {
border-color: inherit;
}
textarea.form__error {
background: #fff0ea;
color: #ff77bc;
border-color: #ff77bc;
}
textarea.form__error:focus {
background: transparent;
color: inherit;
border-color: inherit;
}
textarea[disabled] {
background: #ddd;
border: none;
opacity: 0.5;
}
/* select */
.form__select {
display: inline-block;
position: relative;
}
.form__select select {
padding: 4px 40px 4px 10px;
padding-right: 1.5em;
color: #000;
}
.form__select::after {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 1px solid #fff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
vertical-align: middle;
right: 0;
}
.form__select::after {
position: absolute;
border-color: #ffffff;
top: 15px;
right: 9px;
z-index: -1;
}
/* checkbox */
.form__checkbox label p {
display: block;
padding: 0.5em;
position: relative;
cursor: pointer;
}
@media screen and (min-width: 961px) {
.form__checkbox label p {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
font-feature-settings: "palt";
letter-spacing: 0.04em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.form__checkbox label p {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
}
.form__checkbox input[type=checkbox],
.form__checkbox input[type=radio] {
-webkit-appearance: none;
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
.form__checkbox.form__error {
color: #f33;
}
.form__checkbox label p {
padding-left: 1.6em;
}
.form__checkbox label p::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
border-radius: 0.3em;
border: 1px solid #ffffff;
margin: -0.6em 0 0;
position: absolute;
top: 50%;
left: 0;
}
.form__checkbox label p::after {
content: "";
display: inline-block;
width: 0.8em;
height: 0.4em;
border: 2px solid #fff;
border-top: none;
border-right: none;
margin: -0.25em 0 0;
position: absolute;
top: 70%;
left: 0.2em;
transform: rotate(-45deg);
opacity: 0;
}
.form__checkbox :checked ~ p::before {
background: #ffffff;
border-color: #ffffff;
}
.form__checkbox :checked ~ p::after {
top: 50%;
opacity: 1;
}
/* radio */
.form__radio label p {
display: block;
padding: 0.5em;
position: relative;
cursor: pointer;
}
@media screen and (min-width: 961px) {
.form__radio label p {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
font-feature-settings: "palt";
letter-spacing: 0.04em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.form__radio label p {
font-family: "din-2014", sans-serif, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
}
.form__radio input[type=checkbox],
.form__radio input[type=radio] {
-webkit-appearance: none;
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
.form__radio.form__error {
color: #f33;
}
.form__radio label p {
padding: 0 0.5em 0 1.6em;
}
.form__radio label p::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
border: 1px solid;
margin: -0.6em 0 0;
position: absolute;
top: 50%;
left: 0;
}
.form__radio :checked ~ p::before {
border-color: #ffffff;
border-width: 0.3em;
}
.block--complete > p {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.block--complete > p.text-sub {
text-align: center;
font-weight: normal;
font-size: 12px;
}
.line__btn {
position: relative;
}
.line__btn input,
.line__btn a {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
font-size: 16px;
padding: 16px 20px;
border-radius: 50px;
border: #fff solid 1px;
}
.line__btn .icon__arrow {
display: flex;
width: 20px;
height: 20px;
position: relative;
}
.line__btn .icon__arrow::before {
content: "";
display: block;
width: 14px;
height: 1px;
position: absolute;
background-color: #ffffff;
left: 50%;
top: 50%;
transform: rotate(-45deg) translate(-50%, -50%);
transform-origin: top left;
}
.line__btn .icon__arrow::after {
content: "";
display: block;
width: 12px;
height: 12px;
position: absolute;
left: 50%;
top: 50%;
border-right: #ffffff solid 1px;
border-bottom: #ffffff solid 1px;
transform: rotate(-90deg) translate(-50%, -50%);
transform-origin: left top;
}
.line__btn.submit {
display: inline-block;
font-size: 14px;
margin-right: 20px;
}
.line__btn.submit a {
border: #ffffff solid 1px;
}
.line__btn input {
padding-right: 70px;
}
.line__btn input + .icon__arrow {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.none {
opacity: 0.3;
}
.wrap {
min-height: 100%;
position: relative;
/*padding-bottom: 220px;*/
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.wrap {
/*padding-bottom: 380px;*/
}
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 5;
color: #707070;
font-size: 15px;
font-weight: bold;
}
.header .header-menu {
max-width: 1100px;
width: 100%;
margin: 0 auto;
background: #242424;
overflow: hidden;
border-radius: 0 0 1em 1em;
}
.header .header-menu .header-menu__list {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .header-menu .header-menu__list li a:hover {
color: #fff;
}
.header .header-menu .header-menu__list li:first-child {
padding-left: 2em;
}
.header .header-menu .header-menu__list li.nav__login {
padding: 1em;
color: #fff;
background: #270F87;
}
.header .header-menu .header-menu__list li.nav__login a {
padding: 0.5em;
}
.form__select {
width: fit-content;
position: relative;
}
.form__select select {
-webkit-appearance: none;
position: relative;
}
.form__select::after {
content: "";
display: block;
width: 6px;
height: 6px;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
border-bottom: #ffffff solid 1px;
border-left: #ffffff solid 1px;
z-index: 2;
}
.thumb {
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
margin: 1em 0;
}
.thumb img {
width: 100%;
height: 100%;
background-size: contain;
background-position: center center;
position: relative;
left: 0;
top: 0;
z-index: 2;
}
.thumb img.blur {
background-size: cover;
filter: blur(30px);
transform: scale(1.5);
position: absolute;
z-index: 0;
}
li.new a .tit::after {
content: "NEW";
color: #7B64D6;
margin-left: 1em;
}
.section--mainvisual {
position: relative;
}
.section--mainvisual .logo {
position: absolute;
height: 135px;
width: 165px;
left: 50%;
top: 0;
z-index: 3;
transform: translate(-50%, -50%);
}
.section--mainvisual .block--mainvisual_photo {
margin-bottom: 4em;
position: relative;
font-size: 0;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 16/10.56;
}
.section--mainvisual .block--mainvisual_photo img {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
.section--mainvisual .block--mainvisual_photo img.main-img {
background-size: contain;
background-position: top;
position: relative;
z-index: 2;
}
.section--mainvisual .block--mainvisual_photo img.cover-img {
position: absolute;
filter: blur(30px);
background: no-repeat;
background-size: cover;
transform: scale(1.5);
z-index: 1;
left: 0;
}
.drawer {
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
position: fixed;
left: 0;
top: 0;
z-index: 4;
transition-delay: 1s;
transition: all 0.6s cubic-bezier(0.035, 0.675, 0.225, 1.025) 0.3s;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.drawer::-webkit-scrollbar {
display: none;
}
.drawer .g-nav {
padding-top: 8vw;
color: #fff;
width: 50%;
height: fit-content;
padding-bottom: 80px;
}
.drawer .g-nav li.tit {
margin-bottom: 20px;
}
.drawer .g-nav li.nav__login {
font-size: 2vw;
}
.drawer .g-nav li.nav__login span {
margin: 0 10px;
}
.drawer .g-nav li a {
line-height: 2;
display: flex;
align-items: center;
justify-content: flex-start;
}
.drawer .g-nav li a img {
margin-top: -4px;
margin-right: 10px;
}
.drawer-visible .drawer {
opacity: 1;
visibility: visible;
pointer-events: all;
overflow-y: scroll;
}
.drawer-visible .drawer::after {
height: 100vh;
visibility: visible;
}
.footer {
background: #270F87;
width: 100%;
color: #fff;
position: absolute;
bottom: 0;
z-index: 2;
}
.footer .inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 5em 2em;
max-width: 1180px;
width: 100%;
margin: 0 auto;
}
.footer .inner .footer-nav span {
min-width: 170px;
margin-right: 1em;
}
.footer .inner .footer-nav .block-nav ul {
flex-wrap: wrap;
}
.footer .inner .footer-nav .block-nav ul li::after {
content: "/";
margin-left: 1em;
}
.footer .inner .footer-nav .block-nav ul li:last-child::after {
content: none;
}
.footer .inner .logo--footer {
max-width: 260px;
}
.footer .inner .logo--footer a {
display: block;
height: auto;
object-fit: contain;
object-position: top;
}
.footer .inner .logo--footer a img {
mix-blend-mode: lighten;
}
.footer .inner .logo--footer a svg {
height: auto;
aspect-ratio: 2/0.7;
fill: #fff;
}
.footer .inner .block-nav {
width: 100%;
display: flex;
height: fit-content;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1em;
}
.footer .inner .block-nav ul {
display: flex;
height: fit-content;
}
.footer .inner .block-nav ul li {
font-size: 12px;
line-height: 1;
margin-right: 1em;
}
.footer .inner .block-nav ul.nav--sns {
width: 100%;
margin-top: 4em;
}
.footer .inner .block-nav ul.nav--sns li {
font-size: 16px;
}
.footer .inner .block-nav .copyright {
margin-top: 1em;
}
.page--home .loading {
animation: loading 3s forwards ease-out;
opacity: 1;
position: fixed;
top: 0;
height: 100vh;
width: 100%;
z-index: 10;
}
.page--home .loading::after {
content: "";
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background: black;
z-index: 11;
opacity: 0;
animation: loadingBg 3s forwards;
}
@keyframes loading {
0% {
transform: scale(1);
opacity: 1;
}
75% {
opacity: 1;
transform: scale(1.2);
}
99% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 0;
display: none;
visibility: hidden;
}
}
@keyframes loadingBg {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
display: none;
visibility: hidden;
}
}
.page--home .anim_logo {
position: absolute;
z-index: 10;
top: 50svh;
left: 50%;
transform: translate(-50%, -50%);
z-index: 19;
}
.page--home .wrapper {
overflow: hidden;
}
.page--home .wrapper .block--contents {
max-width: 1180px;
padding: 0 2em;
margin: 155px auto 0 auto;
}
.page--home .wrapper .tit-wrap {
line-height: 1;
}
.page--home .wrapper .tit-wrap .limited {
color: #7B64D6;
}
.page--home .wrapper .tit-wrap .section-tit {
color: #fff;
font-size: 100px;
}
.page--home .wrapper .tit-wrap .list__more {
color: #fff;
}
.page--home .section--banner {
padding: 6em 0 0 0;
}
.page--home .section--banner .block--banner-swiper {
position: relative;
}
.page--home .section--banner .block--banner-swiper .swiper-wrapper .swiper-slide {
text-align: center;
font-size: 18px;
border-radius: 10px;
aspect-ratio: 16/9;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.page--home .section--banner .block--banner-swiper .swiper-wrapper .swiper-slide a {
display: block;
}
.page--home .section--banner .block--banner-swiper .swiper-wrapper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.page--home .section--banner .swiper--custom-stat {
display: flex;
align-items: center;
width: 100%;
height: 100%;
max-width: 1180px;
margin: 2em auto;
gap: 1.5em;
}
.page--home .section--banner .swiper--custom-stat .swiper-pagination-c {
color: #fff;
margin-top: -4px;
}
.page--home .section--banner .swiper--custom-stat .swiper-button-next-c,
.page--home .section--banner .swiper--custom-stat .swiper-button-prev-c {
color: #fff;
cursor: pointer;
}
.page--home .section--news {
padding: 4em 0 1em 0;
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.page--home .section--news .list--information {
max-width: calc(100% - 440px);
padding-left: 100px;
}
.page--home .section--news .list--information li {
display: flex;
min-height: 70px;
align-items: center;
}
.page--home .section--news .list--information li a .list__inner {
display: flex;
width: 100%;
gap: 40px;
font-size: 1em;
}
.page--home .section--news .list--information li a .list__inner .block--sub--info {
line-height: 1.4;
}
.page--home .section--news .list--information li a .list__inner .tit {
line-height: 1.4;
}
.page--home .section--movie, .page--home .section--blog {
padding: 4em 0 8em 0;
}
.page--home .section--movie .block--tit, .page--home .section--blog .block--tit {
margin-bottom: 4em;
}
.page--home .section--movie .block--tit .block--title, .page--home .section--blog .block--tit .block--title {
width: 100%;
position: relative;
}
.page--home .section--movie .block--tit .block--title .list__more, .page--home .section--blog .block--tit .block--title .list__more {
position: absolute;
bottom: 0;
right: 0;
}
.page--home .section--movie figure, .page--home .section--movie .thumbnail, .page--home .section--blog figure, .page--home .section--blog .thumbnail {
background: #270F87;
aspect-ratio: 16/9;
display: flex;
justify-content: center;
}
.page--home .section--movie .noimage, .page--home .section--blog .noimage {
width: 50%;
height: 50%;
mix-blend-mode: color-dodge;
}
.page--home .section--movie .block--txt .tit, .page--home .section--blog .block--txt .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--movie .block--txt .block--sub--info, .page--home .section--blog .block--txt .block--sub--info {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--movie .item_detail .entrytitle, .page--home .section--blog .item_detail .entrytitle {
color: #fff;
display: block;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--movie .item_update, .page--home .section--blog .item_update {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--movie figure, .page--home .section--movie .thumbnail {
align-items: center;
}
.page--home .section--blog figure, .page--home .section--blog .thumbnail {
align-items: flex-start;
}
.page--home .section--stream {
padding: 4em 0 8em 0;
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: space-between;
}
.page--home .section--stream .block--banner-swiper {
width: 60%;
overflow: hidden;
}
.page--home .section--stream .block--banner-swiper figure {
background: transparent;
aspect-ratio: 16/9;
display: flex;
justify-content: center;
align-items: center;
border-radius: 28vw 0 0 28vw;
}
.page--home .section--stream .block--banner-swiper .block--txt .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--stream .block--banner-swiper .block--txt .block--sub--info {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--photo {
padding: 4em 0 8em 0;
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: space-between;
}
.page--home .section--photo .block--banner-swiper {
width: 60%;
overflow: hidden;
margin-left: 100px;
}
.page--home .section--photo .block--banner-swiper figure {
background: #270F87;
aspect-ratio: 16/9;
display: flex;
justify-content: center;
align-items: center;
}
.page--home .section--photo .block--banner-swiper figure img {
background-position-y: top;
background-size: contain;
}
.page--home .section--photo .block--banner-swiper .img--blur img {
filter: blur(30px);
}
.page--home .section--photo .block--banner-swiper .block--txt .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
.page--home .section--photo .block--banner-swiper .block--txt .block--sub--info {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
body:not(.page--home) .section--detail, body:not(.page--home) .section--list {
padding-top: 120px;
max-width: 1180px;
min-height: 50vh;
padding: 155px 2em 80px 2em;
margin: 0 auto;
}
body:not(.page--home) .section--detail .block--player, body:not(.page--home) .section--detail .video {
padding-top: 56.25%;
position: relative;
margin-bottom: 1.5em;
}
body:not(.page--home) .section--detail .block--player iframe, body:not(.page--home) .section--detail .video iframe {
position: absolute;
top: 0;
}
body:not(.page--home) .section--detail .ph, body:not(.page--home) .section--detail .video {
margin: 1em 0;
}
body:not(.page--home) .section--detail .date {
font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
}
body:not(.page--home) .section--detail .tit {
font-weight: 700;
font-size: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);
padding: 1em 0;
margin-bottom: 1.5em;
border-bottom: 1px solid #444;
}
body:not(.page--home) .section--detail .txt * {
position: relative;
}
body:not(.page--home) .section--detail .detail__btn {
margin-top: 10vh;
}
body:not(.page--home) .section--detail .detail__btn a {
padding-left: 30px;
font-size: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);
position: relative;
}
body:not(.page--home) .section--detail .detail__btn a::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);
height: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);
background-repeat: no-repeat;
background-image: url("/static/original/fanclub/img/back-ico.svg");
}
body:not(.page--home) .section--detail .detail__btn.archive__btn {
margin-top: 5vh;
}
body.page--info .section--list .list--large li {
padding: 27px 0;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
}
body.page--info .section--list .list--large li a .block--data {
display: flex;
font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
line-height: 1.4;
}
body.page--info .section--list .list--large li a .block--data .date {
min-width: 120px;
}
body.page--info .section--list .list--large li a .block--data .tit {
font-weight: 700;
}
body.page--info .section--detail .content--main .txt img {
height: 100% !important;
width: 100% !important;
aspect-ratio: auto !important;
}
body.page--info .section--detail .content--main .txt iframe {
aspect-ratio: 16/9 !important;
width: 100% !important;
height: auto !important;
}
body.page--info .section--detail .content--main .txt a {
color: #7B64D6;
text-decoration: underline;
}
body.page--info .section--detail .content--main .txt .btn--main.primary {
display: block;
background: #270F87;
line-height: 48px;
height: 48px;
border-radius: 2em;
width: 100%;
max-width: 360px;
text-align: center;
font-weight: bold;
color: #fff;
text-decoration: none;
padding: 0;
border: none;
font-size: inherit;
}
body.page--schedule .section--list .content--main .block--title .block--month {
margin-bottom: 40px;
}
body.page--schedule .section--list .content--main .block--title .block--month .tit {
font-family: mr-eaves-xl-modern, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 30px;
}
body.page--schedule .section--list .content--main .block--title .block--month .tit span {
font-size: 12px;
margin-left: 10px;
}
body.page--schedule .section--list .content--main .block--title .list--sort {
display: flex;
flex-wrap: wrap;
gap: 0.5em 0;
padding-right: 2em;
}
body.page--schedule .section--list .content--main .block--title .list--sort li input[type=checkbox] {
display: none;
}
body.page--schedule .section--list .content--main .block--title .list--sort li .category {
font-size: 12px;
padding: 5px 14px 6px;
color: #ffffff;
border: 1px solid;
background: #ffffff;
color: #fff;
border-radius: 30px;
line-height: 1;
display: block;
transition: 0.3s;
margin-left: 0;
margin-right: 0.25em;
}
body.page--schedule .section--list .content--main .block--title .list--sort li input[type=checkbox]:not(:checked) + .category {
background: none;
color: #ffffff;
opacity: 0.6;
}
@media screen and (min-width: 961px) {
body.page--schedule .section--list .content--main .block--title .list--sort li:hover input[type=checkbox]:checked + .category {
cursor: pointer;
background: transparent;
color: #ffffff;
opacity: 0.6;
}
body.page--schedule .section--list .content--main .block--title .list--sort li:hover input[type=checkbox]:not(:checked) + .category {
cursor: pointer;
background: #ffffff;
color: #fff;
opacity: 1;
}
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule {
border-radius: 15px;
box-shadow: 0px 0px 60px 10px rgba(206, 223, 233, 0.2784313725);
margin-bottom: 20px;
overflow: hidden;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li {
display: flex;
justify-content: right;
flex-wrap: wrap;
position: relative;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li::before {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
background-color: #efefef;
left: 0;
bottom: 0;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li.no-data {
padding: 20vh 25px;
text-align: center;
justify-content: center;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li:last-child {
border: none;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li .date--event {
line-height: 1;
position: absolute;
left: 0;
top: 0;
padding: 20px 0 0 30px;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li .date--event strong {
font-family: mr-eaves-xl-modern, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 40px;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li .date--event .week {
display: block;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li .list__txt {
width: 70%;
border-bottom: #efefef solid 1px;
margin-left: 30%;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li .list__txt:last-child {
border: none;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li a {
display: block;
padding: 20px 25px;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li a .category {
display: inline-block;
background-color: #f0f0f0;
margin-bottom: 10px;
padding: 4px 8px;
font-size: 10px;
border-radius: 20px;
}
body.page--schedule .section--list .content--main .block--list ul.list--schedule li a .tit {
line-height: 1.5;
}
.page--profile .block--txt figure {
margin-bottom: 20px;
box-shadow: 0px 0px 60px 10px rgba(206, 223, 233, 0.2784313725);
border: #efefef solid 1px;
margin-bottom: 20px;
}
.page--profile .block--txt figure img {
display: block;
}
.page--profile .block--txt .block--txt__body {
margin-bottom: 80px;
}
.page--profile .block--list figure {
position: relative;
line-height: 0;
margin-bottom: 1em;
overflow: hidden;
border-radius: 8px;
width: 100%;
}
.page--profile .block--list figure img {
width: 100%;
}
.page--profile .block--list figure .dummy {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.page--profile .block--list .txt {
margin-bottom: 40px;
}
.page--profile .block--list .list--member {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: space-between;
}
.page--profile .block--list .list--member li {
width: calc(33.3333333333% - 1em);
transition: all 0.5s;
/*
&:nth-child(3n) {
margin: 0;
}
*/
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--profile .block--list .list--member li {
/*
width: calc(50% - 1em);
*/
width: calc(50% - 0.75em);
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--profile .block--list .list--member li {
margin-bottom: 1em;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--profile .block--list .list--member li:last-child {
margin-bottom: 0;
}
}
.page--profile .block--list .list--member li .thumb {
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.page--profile .block--list .list--member li .thumb img {
display: block;
pointer-events: none;
width: 100%;
height: 100%;
background-position: top center;
background-size: cover;
}
.page--profile .block--list .list--member li .name {
font-size: 1.2em;
}
.page--profile .block--list .list--member li .name span {
margin-left: 1em;
font-size: 15px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--profile .block--list .list--member li .name span {
display: block;
line-height: 1;
font-size: 13px;
margin: 0 0 5px;
}
}
.page--profile .block--list .list--member li .txt {
margin-bottom: 20px;
}
.page--profile .block--list .list--member li a {
margin-right: 1em;
}
body.page--disco .section--list .content--main .block--category {
background: #000;
padding: 10px 3% 15px;
white-space: nowrap;
overflow: scroll;
}
body.page--disco .section--list .content--main .block--category li {
display: inline-block;
margin-right: 2px;
}
body.page--disco .section--list .content--main .block--category li a {
font-size: 10px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.06em;
display: block;
min-width: 70px;
text-align: center;
padding: 0.5em 1em;
position: relative;
cursor: pointer;
color: #999;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.2);
}
body.page--disco .section--list .content--main .block--category li.current a {
background: #fff;
color: #000;
}
body.page--disco .section--list .content--main .list--discography {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
body.page--disco .section--list .content--main .list--discography li {
width: calc(50% - 10px);
margin-bottom: 30px;
overflow: hidden;
}
body.page--disco .section--list .content--main .list--discography li.no-data {
padding: 20vh 25px;
text-align: center;
width: 100%;
}
body.page--disco .section--list .content--main .list--discography li .thumb {
width: 100%;
aspect-ratio: 1/1;
border-radius: 0;
border-radius: 15px;
overflow: hidden;
}
body.page--disco .section--list .content--main .list--discography li .thumb img {
width: 100%;
height: 100%;
}
body.page--disco .section--list .content--main .list--discography li .block--text p {
margin-bottom: 10px;
}
body.page--disco .section--list .content--main .list--discography li .block--text p.category {
display: inline-block;
font-size: 10px;
border-radius: 20px;
}
body.page--disco .section--list .content--main .list--discography li .block--text p.tit {
font-size: 14px;
font-weight: 500;
}
body.page--disco .section--detail .content--main .area--disco-detail .date {
margin-bottom: 20px;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--jacket li .thumb .dummy {
position: absolute;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--comment {
margin-bottom: 20px;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .title-shoplist {
margin-top: 2em;
margin-bottom: 1em;
padding: 10px 0;
border-bottom: solid 1px;
font-size: 1rem;
font-weight: bold;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist {
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
gap: 1em 3%;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist a,
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist span {
display: inline-block;
width: 14.16%;
min-width: 83px;
overflow: hidden;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist a img,
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist span img {
border-radius: 3px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist a,
body.page--disco .section--detail .content--main .area--disco-detail .block--comment .shoplist span {
width: 22%;
min-width: 79px;
}
}
body.page--disco .section--detail .content--main .area--disco-detail .block--detail .block--track > li {
border-bottom: #efefef solid 1px;
margin-bottom: 20px;
padding-bottom: 20px;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--detail .block--track > li .title {
font-weight: bold;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--detail .block--track > li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
body.page--disco .section--detail .content--main .area--disco-detail .block--detail .block--track > li .list--track .num {
margin-right: 10px;
opacity: 0.4;
}
body.page--blog .section--list .content--main .list--large {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
body.page--blog .section--list .content--main .list--large li {
width: calc(50% - 30px);
}
body.page--blog .section--list .content--main .list--large li .thumb {
background: #2e2e2e;
}
body.page--blog .section--list .content--main .list--large li .block--data {
line-height: 1.4;
}
body.page--blog .section--list .content--main .list--large li .block--data .date {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--blog .section--list .content--main .list--large li .block--data .date {
margin-top: 0;
}
}
body.page--blog .section--list .content--main .list--large li .block--data .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
body.page--blog .section--detail .content--main .txt * {
white-space: normal !important;
}
body.page--blog.page--aopBlog .section--list .content--main .list--large li .thumb {
aspect-ratio: 16/9;
/*
img {
background-size: cover;
background-position: top center;
}
*/
}
body.page--blog.page--aopBlog .archiveBtn a {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
display: block;
width: 250px;
text-align: center;
text-decoration: none;
border-radius: 40px;
padding: 20px 1.5em;
cursor: pointer;
border: 1px solid #270f87;
color: #fff;
background: #270f87;
margin: 5vh auto 0;
transition: all 0.5s ease;
}
body.page--blog.page--aopBlog .archiveBtn a:hover {
opacity: 0.7;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js {
position: absolute;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-big-play-button {
position: absolute;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-control-bar {
position: absolute;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-control-text {
position: absolute;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-icon-placeholder:before {
position: relative;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-load-progress {
position: absolute;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-picture-in-picture-control.vjs-button:before {
font-family: "Material Symbols Outlined";
font-size: 16px;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .block--player .video-js .vjs-subs-caps-button {
display: flex;
justify-items: center;
align-items: center;
}
body.page--blog.page--aopBlog.page--aopBlog--detail .section--detail .content--main .txt p img {
margin: 1em 0;
width: 100% !important;
border-radius: 15px;
overflow: hidden;
}
body.page--movie .section--list .content--main .block--category-list .list--large, body.page--favorite .section--list .content--main .block--category-list .list--large {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
body.page--movie .section--list .content--main .block--category-list .list--large li, body.page--favorite .section--list .content--main .block--category-list .list--large li {
width: calc(50% - 30px);
}
body.page--movie .section--list .content--main .block--category-list .list--large li .block--data, body.page--favorite .section--list .content--main .block--category-list .list--large li .block--data {
line-height: 1.4;
}
body.page--movie .section--list .content--main .block--category-list .list--large li .block--data .date, body.page--favorite .section--list .content--main .block--category-list .list--large li .block--data .date {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--movie .section--list .content--main .block--category-list .list--large li .block--data .date, body.page--favorite .section--list .content--main .block--category-list .list--large li .block--data .date {
margin-top: 0;
}
}
body.page--movie .section--list .content--main .block--category-list .list--large li .block--data .tit, body.page--favorite .section--list .content--main .block--category-list .list--large li .block--data .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
body.page--movie .section--list .content--main .block--category-list .list--large li .thumb, body.page--favorite .section--list .content--main .block--category-list .list--large li .thumb {
background: #2e2e2e;
}
body.page--movie .section--list .content--main .searchBox, body.page--favorite .section--list .content--main .searchBox {
display: flex;
align-items: center;
width: 70%;
position: relative;
border: #ffffff solid 1px;
border-radius: 30px;
margin: 0 auto 30px auto;
overflow: hidden;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--movie .section--list .content--main .searchBox, body.page--favorite .section--list .content--main .searchBox {
width: 100%;
}
}
body.page--movie .section--list .content--main .searchBox form, body.page--favorite .section--list .content--main .searchBox form {
width: 100%;
background: #fff;
}
body.page--movie .section--list .content--main .searchBox input[type=text], body.page--favorite .section--list .content--main .searchBox input[type=text] {
width: calc(100% - 40px);
border: none;
padding: 15px;
}
body.page--movie .section--list .content--main .searchBox input[type=submit], body.page--favorite .section--list .content--main .searchBox input[type=submit] {
width: 40px;
font-family: FontAwesome;
font-size: 20px;
line-height: 40px;
color: #000;
background: transparent;
border: none;
border-radius: 30px;
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
}
body.page--movie .section--detail .favorite, body.page--favorite .section--detail .favorite {
position: relative;
display: flex;
align-items: center;
}
body.page--movie .section--detail .favorite .btnSelected, body.page--favorite .section--detail .favorite .btnSelected {
position: relative;
background: none;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
z-index: 0;
}
body.page--movie .section--detail .favorite .btnSelected .icon-white, body.page--favorite .section--detail .favorite .btnSelected .icon-white {
display: inline-block !important;
z-index: 20;
position: absolute;
width: 20px;
height: 18px;
}
body.page--movie .section--detail .favorite .btnSelected .icon-red, body.page--favorite .section--detail .favorite .btnSelected .icon-red {
display: inline-block !important;
z-index: 20;
width: 20px;
height: 18px;
opacity: 0;
}
body.page--movie .section--detail .favorite .favorite__btn.like .icon-red, body.page--favorite .section--detail .favorite .favorite__btn.like .icon-red {
opacity: 1;
}
body.page--movie .section--detail .favorite .favorite__btn.like .icon-white, body.page--favorite .section--detail .favorite .favorite__btn.like .icon-white {
opacity: 0;
}
body.page--movie .section--detail .favorite .favoriteList__btn, body.page--favorite .section--detail .favorite .favoriteList__btn {
display: inline-block;
line-height: 0;
vertical-align: 6px;
margin-left: 5px;
}
body.page--movie .section--detail .favorite .favoriteList__btn a, body.page--favorite .section--detail .favorite .favoriteList__btn a {
color: #fff;
font-size: 12px;
border-radius: 10px;
border: 1px solid #fff;
line-height: 1;
padding: 2px 5px;
}
body.page--stream .section--list .content--main .block--sort-category {
background: #fff;
border-radius: 10px;
overflow: hidden;
max-width: 240px;
width: 75%;
height: 55px;
display: flex;
margin-bottom: 2em;
}
body.page--stream .section--list .content--main .block--sort-category .block--sorttit {
background: #7B64D6;
width: 40%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
body.page--stream .section--list .content--main .block--sort-category .block--sort {
width: 60%;
display: flex;
align-items: center;
justify-content: center;
}
body.page--stream .section--list .content--main .block--sort-category .block--sort .form__select select {
background: transparent;
border: none;
outline: none;
padding-right: 30px;
color: #270F87;
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
background-image: url("/static/original/fanclub/img/chevron_bottom.svg");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: center;
}
body.page--stream .section--list .content--main .block--sort-category .block--sort .form__select::after {
content: none;
display: none;
background: transparent;
color: transparent;
visibility: hidden;
}
body.page--stream .section--list .content--main .block--category-list .list--large {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
body.page--stream .section--list .content--main .block--category-list .list--large li {
width: calc(50% - 30px);
}
body.page--stream .section--list .content--main .block--category-list .list--large li .thumb {
background: transparent;
aspect-ratio: 16/9;
border-radius: 11vw 0 0 11vw;
}
body.page--stream .section--list .content--main .block--category-list .list--large li .block--data {
line-height: 1.4;
}
body.page--stream .section--list .content--main .block--category-list .list--large li .block--data .date {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--stream .section--list .content--main .block--category-list .list--large li .block--data .date {
margin-top: 0;
}
}
body.page--stream .section--list .content--main .block--category-list .list--large li .block--data .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
body.page--photo .section--list .content--main .list--large {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
body.page--photo .section--list .content--main .list--large li {
width: calc(50% - 30px);
}
body.page--photo .section--list .content--main .list--large li a .thumb {
aspect-ratio: 16/9;
background: #2e2e2e;
}
body.page--photo .section--list .content--main .list--large li a .block--data {
line-height: 1.4;
}
body.page--photo .section--list .content--main .list--large li a .block--data .date {
color: #777777;
margin-top: 1em;
font-size: 15px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--photo .section--list .content--main .list--large li a .block--data .date {
margin-top: 0;
}
}
body.page--photo .section--list .content--main .list--large li a .block--data .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
body.page--photo .section--detail .content--main .list--tile {
display: flex;
flex-wrap: wrap;
gap: 3%;
}
body.page--photo .section--detail .content--main .list--tile li {
width: 31.33%;
}
body.page--photo .section--detail .content--main .list--tile li a .thumb {
background: #2e2e2e;
}
body.page--photo #swipebox-slider .slide-loading {
background-image: none !important;
}
body.page--photo #swipebox-slider .slide img {
max-height: 80%;
}
body.page--photo #swipebox-overlay {
background: rgba(25, 25, 25, 0.8);
}
body.page--photo #swipebox-overlay #swipebox-close {
top: 3vw;
right: 4vw;
width: 30px;
height: 30px;
background: none;
}
body.page--photo #swipebox-overlay #swipebox-close::before, body.page--photo #swipebox-overlay #swipebox-close::after {
content: "";
width: 30px;
height: 1px;
background: #fff;
position: absolute;
top: 14px;
transition: all 0.6s ease-out 0s;
-webkit-transition: all 0.6s ease-out 0s;
}
body.page--photo #swipebox-overlay #swipebox-close::before {
transform: rotate(45deg);
}
body.page--photo #swipebox-overlay #swipebox-close::after {
transform: rotate(-45deg);
}
body.page--photo #swipebox-bottom-bar {
background: none;
transform: translate3d(0, -50%, 0);
top: 50%;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--photo #swipebox-bottom-bar {
top: inherit;
bottom: 0;
}
}
body.page--photo #swipebox-bottom-bar #swipebox-prev,
body.page--photo #swipebox-bottom-bar #swipebox-next {
background: none;
color: #fff;
}
body.page--photo #swipebox-bottom-bar #swipebox-prev::after,
body.page--photo #swipebox-bottom-bar #swipebox-next::after {
content: "";
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid;
border-top: none;
border-right: none;
vertical-align: middle;
pointer-events: none;
margin-top: -0.25em;
margin-right: 0.25em;
margin-top: 1em;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--photo #swipebox-bottom-bar #swipebox-prev::after,
body.page--photo #swipebox-bottom-bar #swipebox-next::after {
width: 20px;
height: 20px;
}
}
body.page--photo #swipebox-bottom-bar #swipebox-prev {
left: 3%;
}
body.page--photo #swipebox-bottom-bar #swipebox-prev::after {
transform: rotate(45deg);
margin-left: 1em;
}
body.page--photo #swipebox-bottom-bar #swipebox-next {
right: 3%;
}
body.page--photo #swipebox-bottom-bar #swipebox-next::after {
transform: rotate(-135deg);
}
@media screen and (min-width: 800px) {
body.page--photo #swipebox-arrows {
max-width: none;
}
}
body.page--wallpaper .section--list .content--main .list--large {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
body.page--wallpaper .section--list .content--main .list--large li {
width: calc(50% - 30px);
}
body.page--wallpaper .section--list .content--main .list--large li a .thumb {
aspect-ratio: 16/9;
background: #2e2e2e;
}
body.page--wallpaper .section--list .content--main .list--large li a .block--txt {
line-height: 1.4;
}
body.page--wallpaper .section--list .content--main .list--large li a .block--txt .tit {
color: #fff;
margin-top: 1em;
font-size: 15px;
}
body.page--wallpaper .section--detail .content--main .section--inner .block--txt .ph {
margin: 1em auto;
max-width: 768px;
}
body.page--wallpaper .section--detail .content--main .section--inner .block--txt .ph img {
pointer-events: all;
}
body.page--wallpaper .section--detail .content--main .list--tile li a .thumb {
aspect-ratio: 16/9;
}
body.page--wallpaper #swipebox-slider .slide-loading {
background-image: none !important;
}
body.page--wallpaper #swipebox-slider .slide img {
max-height: 80%;
}
body.page--wallpaper #swipebox-overlay {
background: rgba(25, 25, 25, 0.8);
}
body.page--wallpaper #swipebox-overlay #swipebox-close {
top: 3vw;
right: 4vw;
width: 30px;
height: 30px;
background: none;
}
body.page--wallpaper #swipebox-overlay #swipebox-close::before, body.page--wallpaper #swipebox-overlay #swipebox-close::after {
content: "";
width: 30px;
height: 1px;
background: #fff;
position: absolute;
top: 14px;
transition: all 0.6s ease-out 0s;
-webkit-transition: all 0.6s ease-out 0s;
}
body.page--wallpaper #swipebox-overlay #swipebox-close::before {
transform: rotate(45deg);
}
body.page--wallpaper #swipebox-overlay #swipebox-close::after {
transform: rotate(-45deg);
}
body.page--wallpaper.page--list .content--main .block--list .list--contents {
justify-content: space-between;
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li {
width: calc(50% - 10px);
margin: 0 0 20px 0;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--wallpaper.page--list .content--main .block--list .list--contents > li {
width: calc(50% - 10px);
margin-right: 0;
}
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li .thumb {
position: relative;
aspect-ratio: 16/9;
margin-bottom: 15px;
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li .list__txt {
padding-bottom: 15px;
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li .tit {
margin-bottom: 5px;
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li .date {
color: #888;
padding: 0 20px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--wallpaper.page--list .content--main .block--list .list--contents > li .date {
padding: 0 10px;
}
}
body.page--wallpaper.page--list .content--main .block--list .list--contents > li:nth-child(2n) {
transform: translateY(60px);
}
body.page--qa .section--list .content--list .list--qa {
margin: 5vw auto 0 auto;
max-width: 768px;
}
body.page--qa .section--list .content--list .list--qa li {
padding: 27px 0;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
}
body.page--qa .section--list .content--list .list--qa li a {
flex-wrap: wrap;
display: flex;
font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
line-height: 1.4;
}
body.page--qa .section--list .content--list .list--qa li a .date {
color: #888;
margin-right: 20px;
}
body.page--qa .section--list .content--list .list--qa li a .tit {
width: 100%;
font-weight: bold;
margin-bottom: 10px;
}
body.page--qa .section--list .content--list .list--qa li a .tit::before {
content: "Q";
font-size: 20px;
font-weight: normal;
margin-right: 10px;
}
body.page--qa .section--detail .content--list .txt {
margin-bottom: 1em;
}
body.page--qa .section--detail .content--list .form--post {
max-width: 768px;
margin: 0 auto;
}
body.page--qa .section--detail .content--list .confirm dd {
border-bottom: 1px solid #444;
margin-bottom: 1em;
padding-bottom: 1em;
}
body.page--qa .section--detail .content--list .block__question {
border: 1px solid #fff;
padding: 2em;
margin-bottom: 2em;
}
body.page--qa .section--detail .content--list .block__question .tit--q {
width: 100%;
font-weight: bold;
margin-bottom: 10px;
font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
display: flex;
padding-left: 35px;
position: relative;
}
body.page--qa .section--detail .content--list .block__question .tit--q span {
position: absolute;
left: 0;
width: 26px;
height: 26px;
border-radius: 50px;
background: #7B64D6;
display: flex;
align-items: center;
justify-content: center;
}
body.page--qa .section--detail .content--list .block__question .name {
padding-left: 35px;
}
body.page--qa .section--detail .content--list .block__answer {
margin-bottom: 2em;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li {
padding-bottom: 1em;
padding-top: 1.5em;
margin-bottom: 1em;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt {
position: relative;
display: flex;
width: fit-content;
flex-direction: column-reverse;
flex-wrap: wrap;
box-sizing: border-box;
line-height: 1.6;
margin-left: calc(50px + 1em);
padding: 0.5em 0.75em;
border-radius: 10px;
background: #fff;
color: #000;
z-index: 1;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt::before {
content: "";
position: absolute;
left: -16px;
top: 8px;
border-top: 2px solid transparent;
border-left: 7px solid transparent;
border-right: 10px solid #fff;
border-bottom: 7px solid transparent;
z-index: 1;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt span {
width: 100%;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt span:first-child {
width: 100%;
display: block;
position: absolute;
left: calc(-50px - 1em);
top: -16px;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt span:first-child::before {
content: "";
width: 50px;
height: 50px;
position: absolute;
border-radius: 50px;
background-size: cover;
}
body.page--qa .section--detail .content--list .block__answer .list--answer li .block--txt .name {
display: block;
color: #fff;
margin-bottom: 0;
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
white-space: nowrap;
}
body.page--faq .section--list .content--main .block--list .list--tag {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5em;
flex-wrap: wrap;
margin-bottom: 60px;
}
body.page--faq .section--list .content--main .block--list .list--tag li a {
display: block;
background: #7B64D6;
line-height: 1;
font-size: 12px;
border-radius: 2em;
padding: 0.5em 0.7em;
}
body.page--faq .section--list .content--main .block--list .tit--category {
font-weight: bold;
margin-bottom: 15px;
}
body.page--faq .section--list .content--main .block--list ul.list--faq {
margin-bottom: 40px;
border-radius: 15px;
background: #242424;
margin-bottom: 20px;
overflow: hidden;
}
body.page--faq .section--list .content--main .block--list ul.list--faq li {
position: relative;
border-bottom: 1px solid #444;
}
body.page--faq .section--list .content--main .block--list ul.list--faq li:last-child {
border-bottom: none;
}
body.page--faq .section--list .content--main .block--list ul.list--faq li a {
display: flex;
padding: 20px 25px;
line-height: 1.5;
}
body.page--faq .section--list .content--main .block--list ul.list--faq li a .icon--q {
font-weight: bold;
margin-right: 5px;
}
body.page--faq .section--list .content--main .block--list ul.list--faq li a .tit {
width: 100%;
}
body.page--faq .section--detail .content--main .txt--basic {
margin-bottom: 40px;
}
body.page--faq .section--detail .content--main .block--faq-detail {
background-color: #270F87;
height: fit-content;
border-radius: 15px;
padding: 30px 25px;
overflow: hidden;
margin-bottom: 30px;
}
body.page--faq .section--detail .content--main .block--faq-detail .icon--q {
width: 30px;
height: 30px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background: #7B64D6;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
body.page--faq .section--detail .content--main .block--faq-detail .icon--a {
width: 30px;
height: 30px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background: #fff;
color: #7B64D6;
margin-top: 30px;
margin-bottom: 10px;
font-size: 18px;
}
body.page--faq .section--detail .content--main .tit--category {
font-weight: bold;
padding: 20px 25px;
}
body.page--faq .section--detail .content--main .list--faq {
margin-bottom: 40px;
border-radius: 15px;
background: #242424;
margin-bottom: 20px;
overflow: hidden;
}
body.page--faq .section--detail .content--main .list--faq li {
position: relative;
border-bottom: 1px solid #444;
}
body.page--faq .section--detail .content--main .list--faq li:last-child {
border-bottom: none;
}
body.page--faq .section--detail .content--main .list--faq li a {
display: flex;
padding: 20px 25px;
line-height: 1.5;
}
body.page--faq .section--detail .content--main .list--faq li a .icon--q {
font-weight: bold;
margin-right: 5px;
}
body.page--faq .section--detail .content--main .list--faq li a .tit {
width: 100%;
}
body.page--faq .searchBox {
display: flex;
align-items: center;
width: 70%;
position: relative;
border: #ffffff solid 1px;
border-radius: 30px;
margin: 0 auto 30px auto;
overflow: hidden;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body.page--faq .searchBox {
width: 100%;
}
}
body.page--faq .searchBox form {
width: 100%;
background: #fff;
}
body.page--faq .searchBox input[type=text] {
width: calc(100% - 40px);
border: none;
padding: 15px;
}
body.page--faq .searchBox input[type=submit] {
width: 40px;
font-family: FontAwesome;
font-size: 20px;
line-height: 40px;
color: #000;
background: transparent;
border: none;
border-radius: 30px;
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
}
/* 4.3 カレンダー
------------------------------ */
body.page--calendar .wrapper {
padding: 0;
overflow: hidden;
}
body.page--calendar #header, body.page--calendar footer {
display: none;
}
body.page--calendar .block--refine {
width: 100%;
background: #000;
overflow: hidden;
}
body.page--calendar .block--refine ul {
width: 100%;
padding: 0 3% 15px;
white-space: nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
body.page--calendar .block--refine li {
display: inline-block;
margin-right: 2px;
}
body.page--calendar .block--refine input[type=checkbox] {
-webkit-appearance: none;
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
body.page--calendar .block--refine label p {
font-size: 10px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.06em;
display: block;
min-width: 70px;
text-align: center;
padding: 0.5em 1em;
position: relative;
cursor: pointer;
color: #999;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.2);
}
body.page--calendar .block--refine input[type=checkbox]:checked + p {
background: #fff;
color: #000;
}
body.page--calendar .block--month {
background: #000;
color: #fff;
}
body.page--calendar .block--month p {
position: relative;
float: left;
height: 55px;
line-height: 55px;
font-size: 12px;
font-weight: bold;
}
body.page--calendar .block--month a {
display: block;
color: #fff;
}
body.page--calendar .block--month .tit {
width: 60%;
text-align: center;
}
body.page--calendar .block--month .tit span {
padding: 0 10px;
font-size: 24px;
vertical-align: -4px;
}
body.page--calendar .block--month .prev {
width: 20%;
text-align: left;
}
body.page--calendar .block--month .prev a {
padding-left: 20px;
}
body.page--calendar .block--month .prev::after {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 2px solid #000;
border-top: none;
border-right: none;
margin: -0.5em 0 0;
position: absolute;
right: 0.25em;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: auto;
left: 10px;
margin: -0.27em 0 0;
border-color: #fff;
}
body.page--calendar .block--month .next {
width: 20%;
text-align: right;
}
body.page--calendar .block--month .next a {
padding-right: 20px;
}
body.page--calendar .block--month .next::before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 2px solid #000;
border-top: none;
border-right: none;
margin: -0.5em 0 0;
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
margin: -0.27em 0 0;
border-color: #fff;
}
body.page--calendar .block--week ul {
color: inherit;
font-size: 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #999;
background: #fff;
border-bottom: 0.5px solid rgba(150, 150, 150, 0.5);
padding: 5px 0 3px;
}
body.page--calendar .block--week ul li {
width: 100%;
text-align: center;
}
body.page--calendar .block--week ul li:nth-child(6) {
color: #4cafff;
}
body.page--calendar .block--week ul li:nth-child(7) {
color: #ff6d6f;
}
body.page--calendar .block--day ul {
color: inherit;
font-size: 10px;
font-weight: 300;
line-height: 1.3;
letter-spacing: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
background: #fff;
border-bottom: 0.5px solid rgba(150, 150, 150, 0.5);
}
body.page--calendar .block--day ul li {
position: relative;
width: 14.28571429%;
min-height: 65px;
padding-bottom: 5px;
}
body.page--calendar .block--day ul li:nth-child(6) .day {
color: #0098ff;
}
body.page--calendar .block--day ul li:nth-child(7) .day {
color: #ff4346;
}
body.page--calendar .block--day ul a {
display: block;
}
body.page--calendar .block--day ul a + a {
margin-top: 5px;
}
body.page--calendar .block--day ul span {
display: block;
padding: 0 2px;
word-break: break-all;
}
body.page--calendar .block--day ul span span {
display: inline;
font-weight: bold;
}
body.page--calendar .block--day ul .box {
padding-top: 20px;
width: 100%;
line-height: 1.2;
}
body.page--calendar .block--day ul .category {
display: inline-block;
margin: 0 0 5px;
background: #000;
color: #fff;
}
body.page--calendar .block--day ul .day {
position: absolute;
left: 0;
top: 5px;
color: #000;
width: 100%;
text-align: center;
font-weight: 500;
}
body.page--feature .section--detail .block--title .section-subtit {
text-indent: 1em;
}
.page--error .tit {
font-family: mr-eaves-xl-modern, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 40px;
}
.page--error .txt {
margin-bottom: 40px;
}
.page--questionnaire .btn {
margin: 1.5em auto 0;
}
.page--questionnaire .btn .btn--main {
min-width: 250px;
}
.page--questionnaire .wrap .content--main > section {
padding: 0 clamp(150px, 15vw, 800px) 120px;
}
.page--questionnaire .section-tit {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
margin-bottom: 1em;
}
.page--questionnaire .form--post {
max-width: 768px;
margin: 0 auto;
}
.page--questionnaire .form--confirm {
max-width: 768px;
margin: 0 auto;
}
.page--questionnaire .form--confirm dd {
border-bottom: 1px solid #444;
margin-bottom: 1em;
padding-bottom: 1em;
}
.page--questionnaire .ph {
position: relative;
line-height: 0;
font-size: 0;
margin-bottom: 3vw;
text-align: center;
}
.page--questionnaire .ph::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.page--questionnaire .form--post {
margin-bottom: 5em;
}
.page--questionnaire .form--post dt {
margin: 2em 0 1em;
}
.page--questionnaire .form--post .icon--required::before {
content: "必須";
font-size: 11px;
color: #fff;
background: #7B64D6;
padding: 4px 8px;
margin-left: 1em;
}
.page--questionnaire .form--post .form__select::after {
z-index: 10;
}
.page--questionnaire .form--post .form__select select {
padding: 4px 40px 3px 10px;
}
.page--questionnaire .form--post .form__radio label p {
padding: 0.5em 0.5em 0.5em 1.6em;
}
.page--questionnaire .form--post textarea {
color: #000;
}
.page--questionnaire .form--post ul.form--horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page--questionnaire .form--post ul.form--horizontal li {
margin-right: 0.3em;
}
.page--questionnaire .block--error {
background: #fdfbfd;
color: #ef1717;
font-weight: 500;
padding: 10px;
margin-bottom: 3em;
}
.page--questionnaire .block--error li + li {
margin-top: 0.3em;
}
.page--questionnaire.confirm .wrap .content--main > section form {
border-radius: 15px;
-webkit-box-shadow: 0px 0px 60px 10px rgba(206, 223, 233, 0.2784313725);
box-shadow: 0px 0px 60px 10px rgba(206, 223, 233, 0.2784313725);
margin-bottom: 20px;
overflow: hidden;
padding: 30px 25px 60px;
}
.page--questionnaire.confirm .wrap .content--main > section form dt {
margin-bottom: 0;
opacity: 0.6;
font-size: 0.8em;
}
.page--questionnaire.confirm .wrap .content--main > section form dd {
margin: 0 0 30px;
}
body:not(.page--home) .section--detail.support .block--title .section-tit,
body:not(.page--home) .section--list.support .block--title .section-tit {
font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem);
}
body:not(.page--home) .section--detail.support .block--txt .txt,
body:not(.page--home) .section--list.support .block--txt .txt {
margin-bottom: 40px;
}
body:not(.page--home) .section--detail.support .block--txt .list--support dt,
body:not(.page--home) .section--list.support .block--txt .list--support dt {
font-weight: bold;
border-bottom: #efefef 1px solid;
line-height: 1.5;
padding-bottom: 10px;
margin-bottom: 10px;
}
body:not(.page--home) .section--detail.support .block--txt .list--support dd,
body:not(.page--home) .section--list.support .block--txt .list--support dd {
margin-bottom: 3em;
}
body:not(.page--home) .section--detail.support .block--txt .list--support .supportTable,
body:not(.page--home) .section--list.support .block--txt .list--support .supportTable {
display: block;
text-align: left;
}
body:not(.page--home) .section--detail.support .block--txt .list--support .supportTable *,
body:not(.page--home) .section--list.support .block--txt .list--support .supportTable * {
display: block;
}
body:not(.page--home) .section--detail.support .block--txt .list--support .supportTable tr,
body:not(.page--home) .section--list.support .block--txt .list--support .supportTable tr {
margin-bottom: 2.5em;
}
body:not(.page--home) .section--detail.support .course_box,
body:not(.page--home) .section--list.support .course_box {
margin-bottom: 40px;
}
body:not(.page--home) .section--detail.support .course_box .support-tit_sub,
body:not(.page--home) .section--list.support .course_box .support-tit_sub {
background-color: #ffffff;
color: #fff;
font-size: 24px;
font-weight: bold;
line-height: 1;
border-radius: 30px;
padding: 12px 20px;
margin-bottom: 20px;
}
body:not(.page--home) .section--detail.support .course_box .support-list dt,
body:not(.page--home) .section--list.support .course_box .support-list dt {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
body:not(.page--home) .section--detail.support .detail_table,
body:not(.page--home) .section--list.support .detail_table {
margin: 0 0 30px;
width: 100%;
background: #fff;
border-collapse: separate;
border-spacing: 0;
}
body:not(.page--home) .section--detail.support .detail_table tr:first-child th,
body:not(.page--home) .section--detail.support .detail_table tr:first-child td,
body:not(.page--home) .section--list.support .detail_table tr:first-child th,
body:not(.page--home) .section--list.support .detail_table tr:first-child td {
border-top: 1px solid #ffffff;
}
body:not(.page--home) .section--detail.support .support-list:last-child .detail_table,
body:not(.page--home) .section--list.support .support-list:last-child .detail_table {
margin-bottom: 0;
}
body:not(.page--home) .section--detail.support .detail_table th,
body:not(.page--home) .section--list.support .detail_table th {
width: 150px;
background: #efefef;
font-size: 13px;
font-weight: bold;
border-right: 1px solid #ffffff;
padding: 20px;
text-align: left;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
body:not(.page--home) .section--detail.support .detail_table td,
body:not(.page--home) .section--list.support .detail_table td {
border-right: 1px solid #ffffff;
padding: 20px;
text-align: left;
border-bottom: 1px solid #ffffff;
font-size: 13px;
}
body:not(.page--home) .section--detail.support .detail_sub,
body:not(.page--home) .section--list.support .detail_sub {
background-color: #efefef;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
}
body:not(.page--home) .section--detail.support .detail_sub .tit,
body:not(.page--home) .section--list.support .detail_sub .tit {
margin-bottom: 5px;
font-weight: bold;
}
body:not(.page--home) .section--detail.support .rule,
body:not(.page--home) .section--list.support .rule {
color: #ff77bc;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.support .detail_table th,
body:not(.page--home) .section--list.support .detail_table th {
width: 100px;
font-size: 12px;
padding: 10px;
text-align: center;
}
body:not(.page--home) .section--detail.support .detail_table td,
body:not(.page--home) .section--list.support .detail_table td {
font-size: 12px;
padding: 10px;
}
}
body:not(.page--home) .section--detail.support .terms-list li,
body:not(.page--home) .section--list.support .terms-list li {
margin-bottom: 1em;
}
body:not(.page--home) .section--detail.page--entry .inner .block--title .section-tit,
body:not(.page--home) .section--list.page--entry .inner .block--title .section-tit {
font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem);
}
body:not(.page--home) .section--detail.page--entry .inner .block-tit,
body:not(.page--home) .section--list.page--entry .inner .block-tit {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
margin-top: 80px;
text-align: center;
}
body:not(.page--home) .section--detail.page--entry .inner .logo--block div,
body:not(.page--home) .section--list.page--entry .inner .logo--block div {
font-size: 21px;
letter-spacing: 0.3em;
text-align: center;
position: relative;
margin-top: 1em;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .list--contents--list,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .list--contents--list {
display: flex;
gap: 2em;
flex-wrap: wrap;
justify-content: center;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .list--contents--list li,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .list--contents--list li {
width: 60%;
background: #242424;
padding: 40px 30px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .list--contents--list li,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .list--contents--list li {
width: 100% !important;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .list--contents--list li .tit,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .list--contents--list li .tit {
text-align: center;
font-weight: 700;
padding-top: 0;
font-size: 18px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .benefits li,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .benefits li {
width: calc(50% - 1em);
background: #270F87;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents-notice .benefits li .tit,
body:not(.page--home) .section--list.page--entry .inner .block--contents-notice .benefits li .tit {
border-bottom-color: #7B64D6;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents .list--contents--list,
body:not(.page--home) .section--list.page--entry .inner .block--contents .list--contents--list {
display: flex;
gap: 2em;
flex-wrap: wrap;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents .list--contents--list li,
body:not(.page--home) .section--list.page--entry .inner .block--contents .list--contents--list li {
width: calc(33.33% - 1.333em);
background: #242424;
padding: 40px 30px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--contents .list--contents--list li,
body:not(.page--home) .section--list.page--entry .inner .block--contents .list--contents--list li {
width: 100% !important;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents .list--contents--list li .tit,
body:not(.page--home) .section--list.page--entry .inner .block--contents .list--contents--list li .tit {
text-align: center;
font-weight: 700;
padding-top: 0;
font-size: 18px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents .benefits li,
body:not(.page--home) .section--list.page--entry .inner .block--contents .benefits li {
width: calc(50% - 1em);
background: #270F87;
}
body:not(.page--home) .section--detail.page--entry .inner .block--contents .benefits li .tit,
body:not(.page--home) .section--list.page--entry .inner .block--contents .benefits li .tit {
border-bottom-color: #7B64D6;
}
body:not(.page--home) .section--detail.page--entry .inner .block--spec .list--payment,
body:not(.page--home) .section--list.page--entry .inner .block--spec .list--payment {
margin: 0 auto;
width: 80%;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--spec .list--payment,
body:not(.page--home) .section--list.page--entry .inner .block--spec .list--payment {
width: 100% !important;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--spec .list--payment th,
body:not(.page--home) .section--list.page--entry .inner .block--spec .list--payment th {
width: 190px;
padding: 10px 3%;
text-align: center;
border: 2px solid #fff;
font-weight: 400;
font-size: 16px;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--spec .list--payment th,
body:not(.page--home) .section--list.page--entry .inner .block--spec .list--payment th {
width: 50%;
max-width: 190px;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--spec .list--payment td,
body:not(.page--home) .section--list.page--entry .inner .block--spec .list--payment td {
border: 2px solid #fff;
font-size: 16px;
padding: 20px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--spec .half--width,
body:not(.page--home) .section--list.page--entry .inner .block--spec .half--width {
width: 60%;
}
body:not(.page--home) .section--detail.page--entry .inner .block--entry,
body:not(.page--home) .section--list.page--entry .inner .block--entry {
width: 80%;
letter-spacing: 0.02em;
background: #ffeded;
color: #000;
padding: 28px;
border: 2px solid #de1a1a;
margin: 80px auto 40px auto;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--entry,
body:not(.page--home) .section--list.page--entry .inner .block--entry {
width: 100%;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--entry .txt,
body:not(.page--home) .section--list.page--entry .inner .block--entry .txt {
border-bottom: none;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 18px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--entry ul p,
body:not(.page--home) .section--list.page--entry .inner .block--entry ul p {
margin-bottom: 10px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--entry ul p li,
body:not(.page--home) .section--list.page--entry .inner .block--entry ul p li {
margin-bottom: 0.8em;
position: relative;
padding-left: 1em;
text-indent: -0.5em;
font-size: 0.85em;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn,
body:not(.page--home) .section--list.page--entry .inner .block--btn {
width: 80%;
margin: 0 auto;
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--btn,
body:not(.page--home) .section--list.page--entry .inner .block--btn {
width: 100%;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box {
display: flex;
flex-wrap: wrap;
gap: 4em;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner {
width: calc(50% - 2em);
}
@media screen and (min-width: 1px) and (max-width: 960px) {
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner {
width: 100%;
}
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner .tit,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner .tit {
font-size: 16px;
font-weight: bold;
text-align: center;
border-bottom: none;
margin-bottom: 0;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner .tit span,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner .tit span {
display: block;
font-size: 12px;
font-weight: normal;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner:last-child .tit,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner:last-child .tit {
margin-bottom: 21px;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner .btn,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner .btn {
width: 100%;
}
body:not(.page--home) .section--detail.page--entry .inner .block--btn .btn-box .inner .btn a,
body:not(.page--home) .section--list.page--entry .inner .block--btn .btn-box .inner .btn a {
width: 100%;
}
@media screen and (min-width: 960px) {
.btn .btn--main,
.btn .btn--sub {
-webkit-transition: 0.2s;
transition: 0.2s;
}
.btn .btn--main:hover,
.btn .btn--sub:hover {
opacity: 0.6;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--questionnaire .wrap .content--main > section {
padding: 0 0 150px;
}
.page--questionnaire .wrap .content--main > section .input--half {
width: 75% !important;
}
.page--questionnaire .wrap .content--main > section .input--quarter {
width: 30% !important;
}
.page--questionnaire .wrap .content--main > section .input--quarter.postal_code {
width: 75% !important;
}
}
.block--pager {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10vh;
}
.block--pager li {
font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
margin: 1em;
width: 32px;
height: 32px;
}
.block--pager li a {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.block--pager .pager__item--newer a {
background-image: url("/static/original/fanclub/img/prev.svg");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
}
.block--pager .pager__item--older a {
background-image: url("/static/original/fanclub/img/next.svg");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
}
.block--pager .pager__item--number {
width: fit-content;
}
.block--pager .pager__item--other {
border-radius: 50px;
background: #444444;
font-weight: 700;
}
.block--pager .pager__item--current {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background: #7B64D6;
font-weight: 700;
}
.txt--basic {
margin: 0 0 1em;
}
.txt--sub {
font-size: 0.85em;
line-height: 1.6em;
margin-top: 0.5em;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
.page--notice .section--list .list--info {
width: 100%;
border-top: 1px solid rgba(36, 9, 104, 0.1450980392);
}
.page--notice .section--list .list--info li {
border-bottom: 1px solid rgba(36, 9, 104, 0.1450980392);
}
.page--notice .section--list .list--info li a {
display: block;
padding: 15px 0 20px;
}
.page--notice .section--list .list--info li a .txt {
font-size: 16px;
font-weight: bold;
margin: 0 0 5px;
line-height: 1.5;
}
.page--notice .section--list .list--info li a .date {
font-size: 12px;
}
@media screen and (min-width: 961px) {
.sp {
display: none !important;
}
a {
transition: all 0.2s 0s ease;
}
.page--home .block--title .list__more a:hover img {
animation: arrow 1s forwards;
}
.page--home .section--news .list--information li a .list__inner {
transition: 0.3s;
}
.page--home .section--news .list--information li a:hover .list__inner {
opacity: 0.6;
}
body.page--qa .section--list .content--list .list--qa li a {
transition: 0.3s;
}
body.page--qa .section--list .content--list .list--qa li a:hover {
opacity: 0.6;
}
body.page--info .section--list .list--large li a .block--data {
transition: 0.3s;
}
body.page--info .section--list .list--large li a:hover .block--data {
opacity: 0.6;
}
.section--list a figure, .section--list a .thumbnail, .page--home a figure, .page--home a .thumbnail {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 1em;
}
.section--list a figure::after, .section--list a .thumbnail::after, .page--home a figure::after, .page--home a .thumbnail::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: 2;
top: 0;
opacity: 0;
background-image: url("/static/original/fanclub/img/noise.gif");
transition: 0.3s opacity;
}
.section--list a:hover figure::after, .section--list a:hover .thumbnail::after, .page--home a:hover figure::after, .page--home a:hover .thumbnail::after {
opacity: 0.35;
}
.section--banner .swiper-slide a::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
background-image: url("/static/original/fanclub/img/noise.gif");
transition: 0.3s opacity;
}
.section--banner .swiper-slide a:hover::after {
opacity: 0.35;
}
.page--movie.new-movie.movie--point--list .section--list {
max-width: 1180px;
width: initial;
}
.page--movie.new-movie.movie--point--list .section--list .section-tit {
margin-bottom: 0;
}
body.point--contents--detail .section--detail .block--tit .date {
color: #777777;
margin-top: 0;
}
body.point--contents--detail .section--detail .block--tit .tit {
padding: 0 0 1em;
margin-bottom: 3em;
}
body.point--contents--detail .section--detail .txtArea .pointList {
text-align: center;
width: 350px;
margin: 0 auto 3em;
display: flex;
border: 1px solid #270f87;
}
body.point--contents--detail .section--detail .txtArea .pointList:first-child {
margin: 0 auto 1px;
border-bottom: none;
}
body.point--contents--detail .section--detail .txtArea .pointList:last-of-type {
border-top: none;
}
body.point--contents--detail .section--detail .txtArea .pointList dt {
width: 50%;
background: #270f87;
padding: 5px 10px;
}
body.point--contents--detail .section--detail .txtArea .pointList:first-child dd:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: -1px;
left: 0;
background: #270f87;
}
body.point--contents--detail .section--detail .txtArea .pointList dd {
width: 50%;
padding: 5px 10px;
position: relative;
}
body.point--contents--detail .section--detail .txtArea form .btn input {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
min-width: 250px;
text-align: center;
text-decoration: none;
border-radius: 40px;
padding: 20px 1.5em;
cursor: pointer;
border: 1px solid #7B64D6;
color: #fff;
background: #7B64D6;
-webkit-transition: 0.2s;
transition: 0.2s;
}
body.point--contents--detail .section--detail .txtArea form .btn input:hover {
opacity: 0.6;
}
body.point--contents--detail .section--detail .noPoint {
margin-bottom: 1em;
text-align: center;
}
body.point--contents--detail .section--detail .noPointBtn {
text-align: center;
}
body.point--contents--detail .section--detail .noPointBtn a {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
min-width: 250px;
text-align: center;
text-decoration: none;
border-radius: 40px;
padding: 20px 1.5em;
cursor: pointer;
border: 1px solid #7B64D6;
color: #fff;
background: #7B64D6;
-webkit-transition: 0.2s;
transition: 0.2s;
margin: 0 auto;
}
body.point--contents--detail .section--detail .noPointBtn a:hover {
opacity: 0.6;
}
.list__more a:hover::after,
.detail__btn a:hover::after {
animation: scroll_btn 0.5s;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
/* common.scss
============================== */
body {
padding-bottom: 500px;
}
.drop--bg {
background-size: cover;
background-position: center;
}
.pc {
display: none !important;
}
.header svg {
width: 90px;
}
.header .header-menu {
width: fit-content;
}
.header .header-menu .drawer__btn {
width: 64px;
height: 54px;
position: relative;
}
.header .header-menu .drawer__btn .drawer-line {
display: block;
position: absolute;
width: 20px;
height: 1px;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.header .header-menu .drawer__btn .top {
top: 40%;
}
.header .header-menu .drawer__btn .btm {
top: 60%;
}
.header h1 {
display: flex;
}
.menuopen .header .header-menu .drawer__btn .top {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.menuopen .header .header-menu .drawer__btn .mid {
opacity: 0;
transform: translate(150%, -50%);
}
.menuopen .header .header-menu .drawer__btn .btm {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
a figure, a .thumbnail {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 1em;
}
.drawer {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
border-radius: 0;
}
.drawer .g-nav {
margin-top: 8vh;
padding-left: 8vh;
width: 100%;
}
.drawer .g-nav li.tit {
margin-bottom: 10px;
}
.drawer .g-nav li:not(.tit) {
font-size: 6.5vw;
font-weight: bold;
}
.drawer .g-nav li.nav__login {
font-size: 6vw;
margin-bottom: 10px;
}
.drawer .g-nav li.nav__login a:first-child::after {
height: 14px;
}
.drawer-visible .drawer::after {
height: 100%;
}
.footer .inner {
padding: 10vw 6vw;
}
.footer .inner .footer-nav .block-nav span {
display: block;
width: 100%;
}
.footer .inner .footer-nav .block-nav ul {
margin-bottom: 2em;
}
.footer .inner .footer-nav .block-nav ul li {
margin-top: 1em;
}
.btn--main,
.btn--sub {
width: 100%;
padding: 0.9em 20px;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) and (min-width: 458px) and (max-width: 961px) {
.btn--main,
.btn--sub {
min-width: 40%;
}
}
@media screen and (min-width: 1px) and (max-width: 960px) {
.page--home .wrapper .block--contents {
margin: 310px auto 0 auto;
}
.page--home .section--mainvisual {
transform: scale(1.2);
}
.page--home .section--mainvisual .logo {
top: -19%;
}
.page--home .section--banner {
padding: 10em 0 0 0;
}
.page--home .section--news .list--information {
max-width: 100%;
padding-left: 0;
}
.page--home .section--news .list--information li {
min-height: 50px;
margin: 1em 0;
}
.page--home .section--news .list--information li a .list__inner .block--sub--info {
line-height: 1.8;
}
.page--home .section--news .list--information li a .list__inner .tit {
line-height: 1.8;
}
.page--home .section--stream .block--banner-swiper {
width: 100%;
}
.page--home .section--photo .block--banner-swiper {
width: 100%;
margin-left: 0;
}
.page--home .section--stream, .page--home .section--movie, .page--home .section--blog {
padding: 4em 0 4em 0;
}
.block--tit {
width: 100%;
}
.block--tit .block--title {
width: 100%;
position: relative;
}
.block--tit .block--title .section-subtit {
font-size: 12px;
margin-bottom: 1em !important;
}
.block--tit .block--title .list__more {
position: absolute;
bottom: auto;
top: 0;
right: 0;
margin-top: 0 !important;
}
.block--tit .block--title .list__more a {
font-size: 15px;
}
.block--tit .block--title .list__more a img {
width: 12px;
}
body:not(.page--home) section .block--title {
margin-bottom: 40px !important;
}
body:not(.page--home) .section--detail, body:not(.page--home) .section--list {
padding: 100px 2em 80px 2em;
margin: 0 auto;
}
.page--movie .section--list .content--main .list--large, .page--favorite .section--list .content--main .list--large, .page--blog .section--list .content--main .list--large, .page--photo .section--list .content--main .list--large, .page--wallpaper .section--list .content--main .list--large {
gap: 30px !important;
}
.page--movie .section--list .content--main .list--large li, .page--favorite .section--list .content--main .list--large li, .page--blog .section--list .content--main .list--large li, .page--photo .section--list .content--main .list--large li, .page--wallpaper .section--list .content--main .list--large li {
width: calc(50% - 15px) !important;
}
.page--stream .section--list .content--main .list--large {
gap: 30px !important;
}
.page--stream .section--list .content--main .list--large li {
width: 100% !important;
}
.page--movie.new-movie.movie--point--list .section--list {
padding: 100px 2em 80px 2em;
margin: 0 auto;
}
.page--movie.new-movie.movie--point--list .section--list .section-tit {
margin-bottom: 0;
}
body.point--contents--detail .section--detail .block--tit .date {
color: #777777;
margin-top: 0;
}
body.point--contents--detail .section--detail .block--tit .tit {
padding: 0 0 1em;
margin-bottom: 2.5em;
}
body.point--contents--detail .section--detail .txtArea .pointList {
text-align: center;
width: 100%;
max-width: 350px;
margin: 0 auto 2.5em;
display: flex;
border: 1px solid #270f87;
}
body.point--contents--detail .section--detail .txtArea .pointList:first-child {
margin: 0 auto 1px;
border-bottom: none;
}
body.point--contents--detail .section--detail .txtArea .pointList:last-of-type {
border-top: none;
}
body.point--contents--detail .section--detail .txtArea .pointList dt {
width: 50%;
background: #270f87;
padding: 5px 10px;
}
body.point--contents--detail .section--detail .txtArea .pointList:first-child dd:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: -1px;
left: 0;
background: #270f87;
}
body.point--contents--detail .section--detail .txtArea .pointList dd {
width: 50%;
padding: 5px 10px;
position: relative;
}
body.point--contents--detail .section--detail .txtArea form .btn input {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
width: 100%;
padding: 0.9em 20px;
text-align: center;
text-decoration: none;
border-radius: 40px;
cursor: pointer;
border: 1px solid #7B64D6;
color: #fff;
background: #7B64D6;
}
body.point--contents--detail .section--detail .noPoint {
margin-bottom: 1em;
text-align: center;
}
body.point--contents--detail .section--detail .noPointBtn {
text-align: center;
}
body.point--contents--detail .section--detail .noPointBtn a {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
width: 100%;
padding: 0.9em 20px;
text-align: center;
text-decoration: none;
border-radius: 40px;
cursor: pointer;
border: 1px solid #7B64D6;
color: #fff;
background: #7B64D6;
}
.page--info .section--list .list--large li a .block--data .date {
min-width: 80px !important;
}
}
.block--pager li {
margin: 0.5em;
}/*# sourceMappingURL=service.css.map */