@charset 'utf-8';

/* top */
.top {
overflow-x:hidden;
text-align:center; text-shadow:0 1px 1px rgb(0,0,0,75%);
opacity:0; transform:translateY(8px);
animation:top_fadein 1s 1s forwards;
}
@keyframes top_fadein { to { opacity:1; transform:translateY(0)}}
.top > 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;
}
.top > 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%);
}
.top > h2 a:before {
position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px;
display:block;
content:'';
}
.top > h2 a:hover:before { animation:top-h2-a 0.5s forwards;}
@keyframes top-h2-a { 0% { background:#FFF;}}
.top > 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 ){
.top > h2 { font-size:16px; text-align:left; padding:12px 16px;}
.top > h2 a { font-size:12px;}
}
/* top */

/* anniv */
.anniv {
background:#FEE000 url('/project/egg/img/top/anniv/bg.png') center 0 / 304px auto;
text-align:center;
}
.anniv:hover { animation:anniv 1s forwards;}
@keyframes anniv { 0% { filter:brightness(1.5);}}
.anniv a { display:block; color:#FFF; text-decoration:none;}
.anniv ul { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
.anniv li { display:flex; justify-content:center; align-items:center; width:100%; padding:4px;}
.anniv li.logo { max-width:208px;}
.anniv li.text { max-width:512px;}
.anniv li.logo img { display:block; max-width:200px; width:100%;}
.anniv .text div {
display:flex; flex-direction:column; justify-content:center;
width:100%; height:100%;
background:linear-gradient(#FF3906,#920);
border:solid 3px; border-color:#FD1 #DB2 #B83; border-radius:8px;
box-shadow:inset 0 2px 3px rgba(0,0,0,50%), 0 2px 8px rgba(0,0,0,75%);
padding:12px;
}
.anniv .text h2 { font-size:16px; line-height:1.25;}
.anniv .text h3 { color:#FF6; font-size:18px; margin-top:8px;}
@media screen and ( min-width:1024px ){
.anniv li:nth-child(2) { order:3;}
.anniv li:nth-child(3) { order:2;}
}
@media screen and ( max-width:768px ){
.anniv .text h2 { font-size:14px;}
.anniv .text h3 { font-size:16px;}
.anniv .text br { display:none;}
}
/* anniv */

/* 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 { position:relative; display:block; text-align:center; text-decoration:none; padding:0 0 0 384px;}
.ac4free ul { position:absolute; left:0; top:0; bottom:0; width:384px; display:flex;}
.ac4free li {
display:block; width:25%; height:100%;
background:#000 no-repeat center center / cover;
}
.ac4free p { font-size:14px; color:#FFF; line-height:1.25; padding:0.75em;}
.ac4free p span { color:#3F0;}
@media screen and ( max-width:768px ){
.ac4free a { padding:72px 0 0 0;}
.ac4free ul { right:0; bottom:initial; width:100%; height:72px;}
.ac4free p { font-size:12px;}
}
@media screen and ( max-width:384px ){
.ac4free a { padding:calc(25vw * 0.75) 0 0 0;}
.ac4free ul { height:calc(25vw * 0.75);}
}
/* 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,50%);}
.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 .item { width:320px;}
.hero .item { width:480px;}
.mall a,
.hero a {
position:relative;
display:block; overflow:hidden;
color:#FFF; text-decoration:none;
}
.mall a { height:160px;}
.hero a { height:360px;}
.mall img,
.hero img { position:relative; width:auto; height:100%;}
.mall p,
.hero p { overflow:hidden; white-space:nowrap; padding:8px 1em;}
.mall p { font-size:12px;}
.hero p { font-size:14px;}
@media screen and ( max-width:480px ){
.hero .item { width:100vw;}
.hero a { height:calc(100vw * 0.75);}
}
@media screen and ( max-width:320px ){
.mall .item { width:100vw;}
.mall a { height:calc(100vw * 0.5);}
}
/* mall and hero */
/* hero */
.hero .blur {
display:block; background:no-repeat center center / cover;
position:absolute; left:-8px; right:-8px; top:-8px; bottom:-8px;
opacity:0.25; filter:blur(4px);
}
.hero a.windows:before, .hero a.windows:after,
.hero a.console:before, .hero a.console:after { position:absolute; z-index:2; display:block; background:no-repeat center center / cover; content:'';}
.hero a.windows:after, .hero a.console:after { left:16px; bottom:16px; width:150px; height:75px; filter:drop-shadow(0 2px 2px #000);}
.hero a.windows:before {
right:0; top:0;
background:#0067B8;
font-size:16px; color:#FFF; text-shadow:none;
padding:10px; content:'Windows 11';
}
/*.hero a.windows:after { background-image:url('../img/logo/egg_top_hero.png');}*/
.hero a.console:before { right:0; top:0; width:80px; height:80px; background-image:url('../console/img/logo_switch_sq.png');}
.hero a.console:after { background-image:url('../console/img/logo_econ.png');}

@media screen and ( max-width:480px ){
.hero a.windows:before { font-size:14px;}
}
@media screen and ( max-width:480px ){
.hero a.console:before { width:20vw; height:20vw;}
.hero a.console:after { width:40vw; height:20vw;}
.hero a.windows:before { font-size:12px;}
}
/* hero */

/* mid */
.mid h3 { font-size:14px; padding:16px 16px 8px;}
@media screen and ( max-width:768px ){
.mid h3 { font-size:12px;}
}
/* mid */

/* 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 */