@charset 'utf-8';

/*↓reset↓*/
*, *:before, *:after {
box-sizing:border-box;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
text-overflow:ellipsis;
padding:0; margin:0;
outline:none;
}
html { -webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5 { font-weight:normal;}
a:link,a:visited { text-decoration:underline;}
a:hover,a:active { text-decoration:none;}
a:focus {}
ul { list-style:none;}
img, iframe { border:none;}
button,select,input,textarea { border:none;}
button,select,input[type='checkbox'],label { cursor:pointer;}/* 指 */
button,select { line-height:1;}
button::-moz-focus-inner,
input::-moz-focus-inner { padding:0 !important; border:0 !important;}/* 呪 */
/*↑reset↑*/
/*↓body↓*/
body {
overflow-y:scroll; overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
background:#000;
color:#FFF; font-size:0; line-height:1; text-shadow:0 1px 1px rgb(0,0,0,75%); text-align:center; -webkit-text-size-adjust:100%;
}
body,
body > .inner {
position:relative;
width:100vw; overflow-x:hidden;
min-height:100vh;
}
/*↑body↑*/
/*↓header,section,footer↓*/
header,section,footer { position:relative; width:100%;}
/*↑header,section,footer↑*/
/*↓背景↓*/
.demo {
position:fixed; left:0; top:0;
width:100vw; height:100vh; overflow:hidden;
opacity:0; animation:demo 2s forwards 1s;
}
@keyframes demo { to { opacity:0.25;}}
.demo li {/* スライド */
position:absolute; left:0; right:0; top:0; bottom:0;
background:no-repeat center center / cover;
opacity:0; animation:30s infinite;
}
.demo li:nth-child(1) { animation-name:demo1;} @keyframes demo1 {  0%, 20% { opacity:0;}  2%,18% { opacity:1;}}
.demo li:nth-child(2) { animation-name:demo2;} @keyframes demo2 { 20%, 40% { opacity:0;} 22%,38% { opacity:1;}}
.demo li:nth-child(3) { animation-name:demo3;} @keyframes demo3 { 40%, 60% { opacity:0;} 42%,58% { opacity:1;}}
.demo li:nth-child(4) { animation-name:demo4;} @keyframes demo4 { 60%, 80% { opacity:0;} 62%,78% { opacity:1;}}
.demo li:nth-child(5) { animation-name:demo5;} @keyframes demo5 { 80%,100% { opacity:0;} 82%,98% { opacity:1;}}
/*↑背景↑*/
/*↓slick：共通↓*/
.slick {
position:relative;
opacity:0; transition:opacity 1s;
}
.slick.slick-initialized { opacity:1;}
.slick-dots button { font-size:0;}
.slick-track { display:flex;}
.slick-arrow { position:absolute; z-index:2;}
/*↑slick：共通↑*/
/*↓slick-arrow：1型↓*/
.arw1 .slick-arrow {
top:50%;
display:flex; justify-content:center; align-items:center;
width:64px; height:64px;
background:rgba(0,0,0,75%);
border:#FFF 1px solid;
transform:translateY(-50%);
}
.arw1 .slick-prev {  left:24px;}
.arw1 .slick-next { right:32px;}
.arw1 .slick-arrow:hover { animation:top10-arrow 1s forwards;}
@keyframes top10-arrow { 0% { background:#FFF;}}
.arw1 .slick-arrow:after {/* 矢印 */
width:33.33%; height:33.33%;
background:url( ../img/common/arrow.png?2021-1125 ) 0 0 / auto 100%;
content:'';
}
.arw1 .slick-arrow.slick-next:after { background-position:-100% 0;}
@media screen and ( max-width:768px ){
.arw1 .slick-arrow { width:44px; height:44px;}
.arw1 .slick-prev {  left:8px;}
.arw1 .slick-next { right:8px;}
}
/*↑slick-arrow：1型↑*/
/*↓slick-arrow：2型↓*/
.arw2 .slick-arrow {
top:0; bottom:0;
width:64px;
background:rgba(0,0,0,50%);
}
.arw2 .slick-arrow:hover { animation:s-slick-arrow 0.5s forwards;}
@keyframes s-slick-arrow { 0% { background:#FFF;}}
.arw2 .slick-arrow:before {
position:absolute; left:33.33%; top:0; bottom:0;
width:33.33%;
background:url('../img/common/arrow.png?2021-1125') no-repeat left center / 200% auto;
content:'';
}
.arw2 .slick-arrow.slick-prev { left:0;}
.arw2 .slick-arrow.slick-next { right:0; transform:scaleX(-1);}
.arw2 .slick-arrow:before { animation:arw2 0.5s infinite alternate;}
@keyframes arw2 { 0% { transform:translateX(-4px);} to { transform:translateX( 4px);}}
@media screen and ( max-width:768px ){
.arw2 .slick-arrow { width:48px; background:rgba(0,0,0,25%);}
}
/*↑slick-arrow：2型↑*/
/*↓動画再生↓*/
.video-open { cursor:pointer;}
.video-over {
position:fixed; z-index:100; left:0; right:0; top:0; bottom:0;
display:flex; justify-content:center; align-items:center;
overflow:hidden;
background:rgba(0,0,0,0.8);
opacity:0; visibility:hidden;
transition:opacity 0.5s, visibility 0.5s;
}
.video-over.show { opacity:1; visibility:visible;}
.video-over .dark { position:absolute; left:0; right:0; top:0; bottom:0; }
.video-over .item { position:relative; z-index:9; background:#000;}
.video-over img { max-width:calc(100vw - 64px); max-height:calc(100vh - 64px);}
.video-over iframe { width:640px; height:400px;}
@media screen and ( max-width:1024px ){
.video-over img { max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);}
}
@media screen and ( max-width:768px ){
.video-over iframe { width:calc(100vw - 32px); height:calc((100vw - 32px)/16*10);}
}
/*↑動画再生↑*/
/*↓登録へ進む↓*/
.go-reg {
position:fixed; z-index:2; left:calc(50vw - 80px); top:-56px;
width:160px; overflow:hidden;
background:linear-gradient(#000,#023); box-shadow:0 2px 2px rgba(0,0,0,50%);
border-radius:0 0 8px 8px;
font-size:16px;
padding:16px; white-space:nowrap;
cursor:pointer;
transition:top 1s;
}
.go-reg.show { top:0;}
.go-reg:before {
position:absolute; left:2px; right:2px; top:0; bottom:2px;
border:solid #FFF; border-width:0 2px 2px; border-radius:0 0 6px 6px;
content:'';
}
/*↑登録へ進む↑*/
/*↓ツイート／EGGへ↓*/
.go-twi,
.go-home {
position:absolute; z-index:1; top:0;
display:block; width:48px; height:48px;
border-radius:0 0 8px 8px;
cursor:pointer;
}
.go-twi {
right:32px;
background:url( ../img/common/sns-1.png ) 0 0 / auto 100%;
}
.go-home {
left:32px;
background:url( ../img/common/home.png ) 0 0 / auto 100%;
}
.go-twi:hover,
.go-home:hover { animation:go-flash 1s forwards;}
@keyframes go-flash {
0% { background-color:#0C9; box-shadow:0 0 8px #0C9;}
to { }
}
@media screen and ( max-width:768px ){
.go-twi { right:0; border-radius:0 0 0 8px;}
.go-home { left:0; border-radius:0 0 8px 0;}
}
/*↑ツイート／EGGへ↑*/
/*↓ヘッダ↓*/
header {
max-width:1024px; width:100%;
padding:56px 24px 8px; margin:0 auto;
opacity:0;
}
.completed header { animation:header 1s forwards 1s;}
@keyframes header { 0% { transform:translate(0,-8px);} to { opacity:1;}}
header ul { display:flex; justify-content:center; align-items:center; text-align:left;}
header li { padding:8px;}
header img { width:200px; filter:drop-shadow(0 2px 2px rgb(0,0,0,50%));}
header .text { width:100%;}
header .text > :nth-child(n+2) { margin-top:8px;}
header .text > :empty { display:none;}
header h3 { color:#0FC; font-size:20px; animation:header-h3 1s linear infinite;}/* キラキラ */
@keyframes header-h3 { 0% { filter:hue-rotate(0deg);} to { filter:hue-rotate(360deg);}}
header h1 { font-size:28px;}
header p { font-size:16px; line-height:1.25; color:#BCC;}
@media screen and ( max-width:768px ){
header { padding:56px 8px 8px}
header ul { flex-direction:column; text-align:center;}
header br { display:none;}
header h3 { font-size:16px;}
header h1 { font-size:20px;}
header p { font-size:14px;}
}
@media screen and ( max-width:512px ){
header img { width:100px;}
}
/*↑ヘッダ↑*/
/*↓最下導線↓*/
.goto-egg {
background:radial-gradient(ellipse at center top,#356 0%,#011 75%);
border-top:solid 2px #FFF;
}
.goto-egg a {
position:relative;
display:block;
color:#FFF; font-size:16px; text-decoration:none;
padding:16px;
}
.goto-egg a:before {
position:absolute; left:0; right:0; top:0; bottom:0;
content:'';
}
.goto-egg a:hover:before { animation:mk-more-before 0.5s forwards;}
@keyframes mk-more-before { 0% { background:#FFF;}}
@media screen and ( max-width:768px ){
.goto-egg a { font-size:14px;}
}
/*↑最下導線↑*/
/*↓登録↓*/
.register {
position:relative;
background:linear-gradient(#FFF,#DEE);
padding:8px 24px;
}
.register:before {/* EGGY */
display:inline-block; width:72px; height:84px;/* 24:28 */
background:url( ../img/common/eggy-walk.png ) 0 0 / auto 100%;
animation:register-eggy-walk 0.8s steps(4) infinite;
content:'';
margin:8px;
}
@keyframes register-eggy-walk { to { background-position:-400% 0;}}
.register:after {
position:absolute; z-index:0; left:0; right:0; bottom:0;
height:128px;
background:url('../img/common/eggy-bg.png') center 0 / auto 100%;
content:'';
}
.register > * { position:relative; z-index:1;}
.register > p {/* キャッチ */ color:#677; font-size:28px; text-shadow:0 0 2px #ABB; padding:8px;}
.register .kinds {/* 会員種別 */ display:flex; justify-content:center;}
.register .kinds div { max-width:504px; width:100%; padding:8px;}
.register .kinds a {
position:relative;
display:block; width:100%; height:100%;
box-shadow:inset 0 4px 4px rgb(0,0,0,50%), 0 0 4px #899;
border-radius:16px;
color:#FFF; text-decoration:none;
padding:12px; padding-left:calc(16px + 150px + 12px);
}
.register .kinds a:hover { animation:register-a 1s;}
@keyframes register-a { 0% { filter:brightness(150%);}}
.register .kinds :nth-child(1) a { background:radial-gradient(circle at 20% 80%,#1DE 0%,#369 75%,#29C 125%);}
.register .kinds :nth-child(2) a { background:radial-gradient(circle at 80% 20%,#47B 0%,#123 75%,#259 125%);}
.register .kinds a > * { position:relative; z-index:1; padding:4px;}
.register .kinds .logo {/* ロゴ */
position:absolute; left:16px; top:calc(50% - 48px);
display:inline-block; width:150px; height:90px;
filter:drop-shadow(0 2px 2px rgb(0,0,0,50%));
background:no-repeat center center; background-size:contain;
padding:0;
}
.register .kinds sup { font-size:10px;}
.register .kinds h3 { font-size:16px; color:#DEE;}/* 概要 */
.register .kinds h2 { font-size:20px;}/* 品名 */
.register .kinds h4 { font-size:12px; color:#BCC; }/* 補足 */
.register .kinds p { font-size:16px;}/* 料金 */
.register .kinds p:after {
display:block;
box-shadow:0 2px 2px rgb(0,0,0,50%);
background:#FFF; height:2px;
border-top:solid 2px #FFF;
margin-top:4px;
content:'';
}
.register .kinds p span { font-size:200%; margin:0 4px;}
.register .kinds ul {/* 特典 */
display:flex; flex-wrap:wrap; justify-content:center; align-items:end;
padding:0;
}
.register .kinds li { font-size:12px; padding:4px;}
.register .notes {/* 注意 */
display:inline-block; counter-reset:num;
color:#566; font-size:12px; line-height:1.25; text-align:left; text-shadow:0 0 1px #677;
padding:4px;
}
.register .notes li { position:relative; padding:4px; padding-left:calc(2em + 4px);}
.register .notes li:before {
position:absolute; left:4px; top:4px;
display:block;
width:2em;
text-align:right;
counter-increment:num;
content:'\203b'counter(num)'.';
}
.register .notes a { color:#079;}
@media screen and ( max-width:960px ){
.register .kinds a { padding-left:12px;}
.register .kinds .logo { position:relative; left:initial; top:initial; margin:4px;}
}
@media screen and ( max-width:768px ){
.register { padding:8px;}
.register:before { width:48px; height:56px;}
.register > p { font-size:24px;}
.register .kinds h3 { font-size:14px;}
.register .kinds h2 { font-size:16px;}
.register .kinds h4 { font-size:12px;}
.register .notes { font-size:10px;}
}
@media screen and ( max-width:512px ){
.register .kinds { flex-wrap:wrap;}
.register .kinds div { max-width:100%;}
}
/*↑登録↑*/
/*↓フッタ↓*/
footer {
position:relative;
background:rgba(0,0,0,25%);
border-top:solid 2px #FFF;
padding:8px;
}
footer a:hover { animation:footer-a 1s forwards;}
@keyframes footer-a {
0% { filter:drop-shadow(0 0 4px #CFF) drop-shadow(0 0 4px #0FC) drop-shadow(0 0 4px #069);}
}
footer .navi {
display:flex; flex-wrap:wrap; justify-content:center;
color:#899; font-size:12px;
}
footer .navi a {
display:block;
color:#FFF; text-decoration:none;
padding:8px;
}
footer .logo a { display:inline-block; padding:8px;}
footer .logo a:before {
display:block; width:64px; height:64px;
background:url(../img/logo/d4e.png) no-repeat center center / contain;
content:'';
}
footer .copy { display:flex; flex-wrap:wrap; justify-content:center;}
footer .copy p { font-size:10px; color:#FFF; padding:8px;}
/*↑フッタ↑*/