@charset 'utf-8';

/* video */
.video-open { cursor:pointer;}
.video-open:before {/* ư��ޡ��� */
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
background:rgb(0,0,0,50%) url('/project/egg/img/icon_movie.png') no-repeat center center / cover;
content:'';
}
.video-over {
position:fixed; z-index:9999; left:0; top:0;
display:flex; justify-content:center; align-items:center;
width:100%; height:100%; overflow:hidden;
background:rgb(0,0,0,75%);
opacity:0; visibility:hidden;
transition:opacity 0.5s, visibility 0.5s;
}
.video-over.show { opacity:1; visibility:visible;}
.video-over iframe { width:640px; height:400px;}
@media screen and ( max-width:768px ){
.video-over iframe { width:calc(100vw - 16px); height:calc((100vw - 16px)/16*10);}
}
/* video */
/* is_login */
.is_login {
background:linear-gradient(#292633,#495663);
box-shadow:inset 0 2px 2px #100;
text-align:center; text-shadow: 0 1px 1px rgb(0 0 0 / 75%);
}
.is_login a {
position:relative;
display:block;
color:#FFF; font-size:14px; text-decoration:none;
padding:0.75em;
}
.is_login a:after { position:absolute; left:0; right:0; top:0; bottom:0; content:'';}
.is_login a:hover:after { animation:join_egg 0.5s forwards;}
@keyframes join_egg { 0% { background:#FFF;}}
.is_login span { color:#6FC;}
@media screen and ( max-width:768px ){
.is_login a { font-size:12px;}
}
/* is_login */
/* gallery */
.gallery {
position:relative;
display:flex; align-items:center;
overflow:hidden;
background:rgb(0,0,0,50%);
border:solid #FFF; border-width:1px 0;
text-align:center;
padding:8px 24px;
}
.gallery .bg {
position:absolute; left:-4px; right:-4px; top:-4px; bottom:-4px;
display:block;
background:no-repeat center center / cover;
filter:blur(2px) opacity(25%);
}
.gallery div { position:relative;}
.gallery .lead {
display:flex; justify-content:center; align-items:center;
width:656px; height:416px;
padding:8px;
}
.gallery .lead * { box-shadow:0 4px 4px rgb(0,0,0,50%);}
.gallery .lead iframe { width:100%; height:100%;}
.gallery .lead img { max-width:100%; max-height:100%; width:auto; height:auto;}
.gallery .supp { width:calc(100% - 656px); padding:4px;}
.gallery .supp li { display:inline-block; padding:4px;}
.gallery .supp a,
.gallery .supp p {
position:relative;
display:block;
background:#000;
box-shadow:0 2px 2px rgb(0,0,0,50%);
}
.gallery .supp a:after,
.gallery .supp p:after {
position:absolute; left:0; right:0; top:0; bottom:0;
border:solid 1px rgb(255,255,255,50%);
content:'';
}
.gallery .supp a:hover:after { animation:supp-a 0.5s forwards;}
@keyframes supp-a { 0% { background:#FFF; border-color:#FFF; filter:drop-shadow(0 0 8px #FFF);}}
.gallery .supp img { max-width:120px; max-height:75px; width:auto; height:auto;}
.gallery .supp h3 { width:100%; font-size:14px; text-align:center; padding:4px;}
.gallery .supp h3:after { display:block; width:100%; border-top:solid 2px #FFF; margin-top:3px; content:'';}
.gallery .supp h3:nth-of-type(2) { margin-top:8px;}
.gallery .supp .tag {
background:linear-gradient(rgb(0,0,0,25%),rgb(255,255,255,25%));
font-size:12px; color:#FFF; text-decoration:none; white-space:nowrap;
padding:7px;
}
@media screen and ( max-width:1024px ){
.gallery .lead { width:464px; height:296px;}
.gallery .supp { width:calc(100% - 464px);}
.gallery .supp img { max-width:80px; max-height:50px;}
.gallery .supp h3 { font-size:12px;}
}
@media screen and ( max-width:768px ){
.gallery { flex-wrap:wrap; padding:8px;}
.gallery .lead { width:100%; height:auto;}
.gallery .lead iframe { height:calc((100vw - 32px)/16*10);}
.gallery .supp { width:100%; padding:0;}
.gallery .supp ul {
display:block;
/*scrollbar-width:none;*/ overflow-x:scroll;
-webkit-overflow-scrolling:touch;
white-space:nowrap;
padding:0 0 4px; margin:8px;
}
.gallery .supp ul::-webkit-scrollbar { height:4px; background:rgb(0,0,0,75%); border:solid 1px rgb(255,255,255,25%);}
.gallery .supp ul::-webkit-scrollbar-thumb { background:#FFF;}
.gallery .supp ul:nth-of-type(2) { margin-top:16px;}
.gallery .supp li { padding:0;}
.gallery .supp li:not(:last-child) { margin-right:4px;}
.gallery .supp h3 { display:none;}
}
/* gallery */
/* buy */
.buy {
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
padding:8px;
}
.buy .sale { padding:8px;}
.buy .sale ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:end;}/* �����������Ը� */
.buy .sale li { font-size:16px;}
.buy .sale li:not(:first-child) { margin-left:4px;}
.buy .sale del { font-size:150%; opacity:50%;}
.buy .sale span { font-size:200%;}
.buy .sale p { font-size:14px; text-align:right; margin-top:4px;}/* �ۿ��� */
.buy .cart { padding:8px;}
.buy .cart a,
.buy .cart span {
position:relative;
display:inline-block; width:200px;
border-radius:8px;
color:#FFF; font-size:20px; text-align:center;
padding:14px;
}
.buy .cart a {
background:#F93;
background:linear-gradient(#FC0,#F60 48%,#F30 52%,#F90);
box-shadow:0 2px 2px rgb(0,0,0,50%);
text-decoration:none !important;
}
.buy .cart a:after {
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
border:solid 2px; border-color:#FFC #C60 #930; border-radius:8px;
content:'';
}
.buy .cart a:hover:after { animation:buy-cart 0.5s forwards;}
@keyframes buy-cart { 0% { background:#FFF; border-color:#FFF; filter:drop-shadow(0 0 8px #FFF);}}
.buy .cart span { background:rgb(0,0,0,50%);}
.buy .cart .eosale { opacity:0.5;}
.buy .cart .paid { color:#F93;}
.buy .badge { padding:8px;}
.buy .badge:empty { display:none;}
.buy .badge img { width:48px; height:48px;}
.buy .caption { width:100%; font-size:14px; text-align:center; padding:8px;}
@media screen and ( max-width:768px ){
.buy .sale li { font-size:14px;}
.buy .cart a,
.buy .cart span { font-size:12px;}
.buy .caption { font-size:12px;}
}
/* buy */

.detail { max-width:768px; width:100%; margin:0 auto;}

/* description */
.description { font-size:16px; line-height:2; padding:16px;}
@media screen and ( max-width:768px ){
.description { font-size:14px;}
}
/* description */
/* suppl */
.suppl {
box-sizing:border-box;
display:flex; flex-wrap:wrap;
padding:12px;
}
.suppl *,
.suppl *:after { font-size:14px; line-height:1.25;}
.suppl dt { width:calc(5em + 8px); padding:4px;}
.suppl dd { width:calc(100% - (5em + 8px)); padding:4px;}
.suppl dd:empty:after { color:#899; content:'\7279\5178\306A\3069\306F\3042\308A\307E\305B\3093';}
.suppl dt { color:#BCC; text-align:right;}
.suppl dd { color:#FFF;}
/* suppl */
/* related */
.related {
width:100%;
text-align:center;
padding:8px;
clear:both;
}
.related * { padding:0; margin:0;}
.related h3 { color:#FFF; font-size:16px; padding:8px;}
.related ul {
display:flex; flex-wrap:wrap; justify-content:center;
list-style-type:none;
}
.related li { padding:8px;}
.related a {
position:relative;
display:block;
width:160px; height:120px;
background:#000 no-repeat center center / cover;
text-decoration:none;
}
.related p {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(rgb(0,0,0,0),rgb(0,0,0,75%) 8px,rgb(0,0,0,75%));
color:#FFF; font-size:12px; line-height:1.5;
padding:8px;
}
/* related */