@charset 'utf-8';

.index {
overflow-x:hidden;
text-align:center; text-shadow:0 1px 1px rgb(0,0,0,75%);
opacity:0; animation:index 1s 1s forwards;
}
@keyframes index { to { opacity:1;}}
.index > h2 {
position:relative;
display:block;
background:linear-gradient(rgb(0,0,0,50%),rgb(0,0,0,12.5%));
box-shadow:inset 0 2px 2px rgb(0,0,0,50%);
border-top:solid 2px rgb(255,255,255,12.5%);
border-bottom:solid 2px rgb(255,255,255,25%);
font-size:20px;
padding:16px 32px;
}
.index > h2 a {
position:absolute; right:16px; top:50%;
display:block; overflow:hidden;
background:linear-gradient(rgb(255,255,255,10%),transparent);
border:solid 1px; border-color:rgb(255,255,255,50%) rgb(255,255,255,30%) rgb(255,255,255,10%);
border-radius:4px;
box-shadow:0 1px 2px rgb(0,0,0,75%);
font-size:14px; color:#FFF; text-decoration:none;
padding:8px;
transform:translateY(-50%);
}
.index > h2 a:before {
position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px;
display:block;
content:'';
}
.index > h2 a:hover:before { animation:top-h2-a 0.5s forwards;}
@keyframes top-h2-a { 0% { background:#FFF;}}
.index > hr {
border:0;
border-top:solid 1px rgb(0,0,0,80%);
border-bottom:solid 1px rgb(255,255,255,20%);
}
@media screen and ( max-width:768px ){
.index > h2 { font-size:16px; text-align:left; padding:12px 16px;}
.index > h2 a { font-size:12px;}
}

/* ac4free */
.ac4free {
background:linear-gradient(#300,#903);
border-bottom:solid 2px #FF6; border-top:solid 2px #C90;
box-shadow:inset 0 2px 4px rgb(51,0,0,75%);
}
.ac4free a {
display:flex; justify-content:center; align-items:center;
text-align:center; text-decoration:none;
padding:0 8px;
}
.ac4free div { padding:8px;}
.ac4free h3 { font-size:16px; color:#FC0;}
.ac4free p { font-size:14px; color:#FFF; line-height:1.25; margin-top:4px;}
.ac4free p span { color:#3F0;}
.ac4free ul { display:flex; padding:4px;}
.ac4free li {
display:block; width:80px; height:60px;
background:#000 no-repeat center center / cover;
box-shadow:0 2px 2px rgb(51,0,0,75%);
margin:4px;
}
@media screen and ( max-width:768px ){
.ac4free a { flex-wrap:wrap;}
.ac4free h3 { font-size:14px;}
.ac4free p { font-size:12px;}
}
@media screen and ( max-width:384px ){
.ac4free li { width:64px; height:48px;}
}
/* ac4free */

/* slick */
.slick-track:after { display:block; clear:both; content:'';}/* 重要 */
.slick-slide { float:left;}/* 重要 */
.slick-arrow { position:absolute; z-index:9; overflow:hidden; font-size:0;}
.slick-arrow,
.slick-arrow:hover,
.slick-arrow:focus { background:rgb(0,0,0,75%);}
.slick-arrow:before {
position:absolute;
background:url('/project/egg/img/arrow.png?220921') no-repeat center center / contain;
content:'';
}
.slick-arrow.slick-next:before { transform:scaleX(-1);}

.sk_hero .slick-next { right:0;}
.sk_hero .slick-prev { left:0;}
.sk_hero .slick-arrow { top:0; bottom:0; width:64px;}
.sk_hero .slick-arrow:before { left:calc(50% - 16px); top:calc(50% - 16px); width:32px; height:32px;}
.sk_hero .slick-arrow:hover { animation:slick_ver1 0.5s forwards;} @keyframes slick_ver1 { 0% { background:#FFF;}}
@media screen and ( max-width:480px ){ .sk_hero .slick-arrow { display:none !important;}}
.sk_mall .slick-next, .sk_normal .slick-next { right:16px;}
.sk_mall .slick-prev, .sk_normal .slick-prev { left:16px;}
.sk_mall .slick-arrow,
.sk_normal .slick-arrow {
top:calc(50% - 20px);
width:40px; height:40px;
box-shadow:0 2px 3px rgb(0,0,0,50%);
border:solid 1px #FFF;
}
.sk_mall .slick-arrow:before,
.sk_normal .slick-arrow:before {
left:calc(50% - 12px); top:calc(50% - 12px);
width:24px; height:24px;
}
.sk_mall .slick-arrow:hover,
.sk_normal .slick-arrow:hover { animation:sk_normal-arrow 0.5s forwards;}
@keyframes sk_normal-arrow { 0% { background:#FFF; transform:scale(1.25);}}
@media screen and ( max-width:768px ){
.sk_mall .slick-next, .sk_normal .slick-next { right:8px;}
.sk_mall .slick-prev, .sk_normal .slick-prev { left:8px;}
}
/* slick */

/* mall and hero */
.mall,
.hero { position:relative; background:#000; text-align:center;}
.mall a,
.hero a { display:block; color:#FFF; text-decoration:none;}
.mall img { width:auto; height:160px;}
.hero img { width:auto; height:360px;}
.mall p,
.hero p { overflow:hidden; white-space:nowrap; padding:0.75em;}
.mall p { font-size:12px;}
.hero p { font-size:14px;}
.mall .item { max-width:320px; width:100%;}
.hero .item { max-width:480px; width:100%;}
@media screen and ( max-width:480px ){ .hero img { height:calc(100vw * 0.75);}}
@media screen and ( max-width:320px ){ .mall img { height:calc(100vw * 0.5);}}
/* mall and hero */

/* top-news */
.top-news {
display:flex;
background:linear-gradient(#455,#122 50%,#011 50%,#233);
border:#000 solid; border-width:2px 0;
}
.top-news .sk_news { width:100%; overflow-x:hidden;}

.top-news a { text-decoration:none;}
.top-news .item a {
display:flex; justify-content:center;
color:#FFF; font-size:16px;
padding:0.75em 1em;
}
.top-news .item p:nth-child(1) { color:rgb(255,255,255,67%); white-space:nowrap;}
.top-news .item p:nth-child(2) { text-align:left;}
.top-news a.more {
display:flex; justify-content:center; align-items:center;
background:linear-gradient(rgb(102,255,204,25%),transparent);
font-size:12px;
padding:0 16px;
}
.top-news a.more p { white-space:nowrap;}
@media screen and ( max-width:768px ){
.top-news .item a { font-size:14px;}
}
@media screen and ( max-width:480px ){
.top-news .item a { font-size:12px;}
.top-news .more p:nth-child(1) { display:none;}
}
/* top-news */

/* game,music */
.g-digital, .g-product,
.m-product, .m-digital {
position:relative;
background:radial-gradient(farthest-side at center top,rgb(255,255,255,5%),transparent,rgb(0,0,0,5%));
padding:8px;
}
.m-product .item, .m-digital .item,
.g-digital .item, .g-product .item { padding:8px;}
/* game,music */

/* game */
.g-digital h3 { font-size:14px; padding:8px;}
.g-digital h3 a { color:#6FC;}
.g-digital .item a {
position:relative;
display:block; width:192px; height:144px;
background:#000 no-repeat center center / cover;
box-shadow:0 2px 3px rgb(0,0,0,50%);
text-decoration:none !important;
}
.g-digital .item h4 {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(transparent, rgb(0,0,0,75%) 8px);
color:#FFF; font-size:14px;
padding:16px 8px 8px;
}
.g-digital .item p {
position:absolute; left:-4px; top:-4px;
background:rgb(0,0,0,75%);
border:solid 1px #FFF;
box-shadow: 0 2px 3px #000;
color:#FFF; font-size:12px;
padding:0.5em;
}
.g-product .item a { display:block; width:192px;}
.g-product .item figure {
display:flex; justify-content:center; align-items:center;
width:192px; height:192px;
}
.g-product .item img { max-width:100%; max-height:100%;}
.g-product .item h4 { font-size:14px; line-height:1.25; margin-top:8px;}
.g-product p { color:rgb(255,255,255,75%); font-size:12px; margin-top:8px;}
.g-product p:before { content:'\ffe5';}
/* game */

/* music */
.m-digital a {
position:relative;
display:block;
background:#000 no-repeat center center / cover;
width:192px; height:192px;
color:#FFF;
}
.m-product a { display:block; width:192px;}
.m-product figure {
position:relative;
display:flex; justify-content:center; align-items:center;
width:192px; height:192px;
}
.m-product img { max-width:100%; max-height:100%;}
.m-product figcaption {
position:absolute; left:-4px; top:-4px;
background:rgb(0,0,0,75%);
border:solid 1px #FFF;
box-shadow: 0 2px 3px #000;
color:#FFF; font-size:12px;
padding:0.5em;
}
.m-digital h4 {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(rgb(0,0,0,00%), rgb(0,0,0,75%) 8px);
font-size:14px; line-height:1.25;
padding:16px 8px 8px;
}
.m-product h4 { font-size:14px; line-height:1.25; margin-top:8px;}
.m-product p { color:rgb(255,255,255,75%); font-size:12px; margin-top:8px;}
.m-product p:before { content:'\ffe5';}
/* music */

/* others */
.others { position:relative;}
.others .item { width:192px;}
.others a {
display:block; width:192px; height:96px;
background:no-repeat center center / cover;
}
/* others */