@charset 'utf-8';

/* reset */
*,
*:before,
*:after {
-webkit-appearance:none; -moz-appearance:none; appearance:none;/* 重要 */
box-sizing:border-box;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
font-weight:normal;
text-overflow:ellipsis;
padding:0; margin:0;
outline:none;
}
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 {
position:relative;
overflow-x:hidden;
height:100vh;
background:#232939;
color:#FFF; font-size:0; line-height:1; text-shadow:0 1px 1px rgb(0,0,0,75%);
}

body > .inner {
position:relative;
max-width:1200px; width:100%; min-height:100vh;
box-shadow:0 0 16px rgb(0,0,0,25%);
margin:0 auto;
}
@media screen and ( min-width:1200px ){
body > .inner:before,
body > .inner:after {
position:absolute; top:0; bottom:0;
display:block;
width:calc(50vw - 600px);
background:rgb(0,0,0,33.3%);
content:'';
}
body > .inner:before { right:calc(50% + 600px);}
body > .inner:after { left:calc(50% + 600px);}
}
/* body */

a:link, a:visited { color:#6FC; text-decoration:none;}
a:hover, a:active { color:#FFF; text-decoration:underline;}

/* usermenu */
.usermenu {
position:relative;
display:flex; justify-content:flex-end;
background:linear-gradient(rgb(0,0,0,75%), rgb(0,0,0,25%));
box-shadow:inset 0 0 2px rgb(0,0,0,75%);
height:32px;
}
.usermenu ul {
display:flex;
height:100%; overflow-x:auto;
list-style-type:none;
}
.usermenu li { height:100%;}
.usermenu p,
.usermenu a {
position:relative;
display:flex; align-items:center;
height:100%;
font-size:12px; white-space:nowrap;
padding:8px;
}
.usermenu p span { color:#FFF; margin:0 4px;}
.usermenu a { color:#FFF; text-decoration:none;}
.usermenu a.egg { background:linear-gradient(#300, #900);}
.usermenu a:before {/* 発光 */
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
content:'';
}
.usermenu a:hover:before { animation:usermenu-a 1s forwards;}
@keyframes usermenu-a { 0% { background:#FFF;}}
@media screen and ( max-width:768px ){
.usermenu { height:48px; scrollbar-width:none; padding:0;}
.usermenu ul { -webkit-overflow-scrolling:touch; justify-content:initial;/* 初期化 */}
.usermenu ul::-webkit-scrollbar { background:linear-gradient(rgb(0,0,0,50%), transparent); height:4px;}
.usermenu ul::-webkit-scrollbar-thumb { background:#FFF;}
}
/* usermenu */

/* header */
header {
position:relative; z-index:9999;
display:flex; justify-content:space-between; align-items:center;
text-shadow:0 1px 1px #000;
padding:8px;
}
header a { display:block; text-decoration:none !important;}
header a:link, header a:visited { color:#CCC !important;}
header a:hover, header a:active { color:#FFF !important;}
header .logo { position:relative; padding:0 8px;}
header .logo:after { position:absolute; left:116px; top:0;
display:block; width:120px; height:60px; content:'';
background:url('../img/logo/anniv24.png') no-repeat center center / contain;
}
header .logo img { width:100px; height:60px;}
header .navi { list-style-type:none; margin-left:120px;}
@media screen and ( min-width:769px ){
header .navi { display:flex; flex-wrap:wrap; justify-content:right; align-items:center;}
header .navi li { position:relative;}
header .navi li div {
position:absolute; z-index:1; right:0; top:0;
background:radial-gradient(ellipse at right top,#151A24,#020305);
border-radius:4px;
padding:8px;
visibility:hidden; opacity:0; transform:translate(0,40px);
transition:visibility 0.25s,opacity 0.25s,transform 0.25s;
}
header .navi li:hover div { visibility:visible; opacity:1; transform:translate(0,30px);}
header .navi a { font-size:14px; text-align:center; text-decoration:none; white-space:nowrap; padding:8px;}
}
@media screen and ( max-width:768px ){
header .navi-sw { padding:8px;}
header .navi-sw ul {
position:relative;
display:block; width:48px; height:48px;
background:#FFF;
border-radius:4px;
padding:0; margin:0;
content:'';
}
header .navi-sw li {
position:absolute; left:calc(50% - 12px); top:calc(50% - 3px);
width:24px; height:6px;
background:#232A38;
transition:transform 0.5s, opacity 0.5s;
}
header .navi-sw li:nth-child(1) { transform:translateY(-12px);}
header .navi-sw li:nth-child(2) { opacity:1;}
header .navi-sw li:nth-child(3) { transform:translateY( 12px);}
header .navi-sw ul.on li:nth-child(1) { transform:translateY(0) rotate( 45deg) scaleX(1.5);}
header .navi-sw ul.on li:nth-child(2) { opacity:0;}
header .navi-sw ul.on li:nth-child(3) { transform:translateY(0) rotate(-45deg) scaleX(1.5);}
header .navi {
position:absolute; top:calc(100% - 20px); left:16px; right:16px;
background:#151A24;
border:solid #FFF; border-width:0 1px 1px;
text-align:center;
padding:0;
visibility:hidden; opacity:0; transform:translateY(-4px);
transition:visibility 0.5s, opacity 0.5s, transform 0.5s;
}
header .navi.open { visibility:visible; opacity:1; transform:translateY(0);}
header .navi li { font-size:12px; border-top:solid 1px #FFF;}
header .navi a { width:100%; padding:16px;}
header .navi div a { border-top:dotted 1px rgb(255,255,255,25%);}
}
/* header */

/* alert */
.alert {
display:flex; flex-wrap:wrap; justify-content:space-around;
background:linear-gradient(#800,#400);
box-shadow:inset 0 2px 2px rgb(51,0,0,75%);
border-top:solid 1px rgb(0,0,0,50%); border-bottom:solid 1px rgb(255,255,255,25%);
padding:0;
}
.alert > * {
display:block;
width:100%; color:#FFF; font-size:16px; text-align:center;
padding:0.75em;
}
.alert a { text-decoration:none;}
.alert a:hover { animation:alert_a 1s forwards;}
@keyframes alert_a { 0% { background:#FFF; text-shadow:none;}}
.alert a span { color:#FC3;}
@media screen and ( max-width:768px ){ .alert > * { font-size:14px;}}
@media screen and ( max-width:480px ){ .alert > * { font-size:12px;}}
/* alert */

/* dent-tit */
.dent-title,
.dent-title * { text-shadow:0 1px 1px rgb(0,0,0,75%);}
.dent-title {
background:linear-gradient(rgb(0,0,0,40%),rgb(0,0,0,20%));
box-shadow:0 2px 4px rgb(0,0,0,40%) inset;
border-top:solid 1px rgb(0,0,0,20%); border-bottom:solid 1px rgb(255,255,255,20%); 
text-align:center;
padding:16px;
}
.dent-title > :nth-child(n+2) { margin-top:8px;}
.dent-title h1 { font-size:24px;}
.dent-title h2 { font-size:20px;}
.dent-title h3 { font-size:18px;}
.dent-title p { font-size:14px;}
.dent-title a { color:#FFF; text-decoration:none;}
@media screen and ( max-width:768px ){
.dent-title h1 { font-size:20px;}
.dent-title h2 { font-size:18px;}
.dent-title h3 { font-size:16px;}
.dent-title p { font-size:12px;}
}
/* dent-tit */

/* share-page */
.share-page { display:flex; justify-content:center; padding:8px;}
.share-page a {
display:block; width:40px; height:40px;
background:rgb(0,0,0,50%) url('/project/egg/img/sns/0.png') 0 0 / auto 100%;
border-radius:50%;
margin:8px;
}
.share-page a:nth-of-type(2) { background-position:-40px 0;}
.share-page a:hover { animation:share-a 1s forwards;}
@keyframes share-a { 0% { background-color:#FFF;}}
.share-page span { display:none;}
@media screen and ( max-width:768px ){
.share-page { padding:8px;}
}
/* share-page */

/* ad_area */
.ad_area { background:rgb(0,0,0,50%); text-align:center; border:0; padding:16px;}
.ad_area a { display:inline-block; color:#CCC;}
.ad_area a:hover { color:#FFF;}
.ad_area img { width:100%;}
.ad_area .rect { display:inline-block; max-width:728px;}
.ad_area .squa { display:none; max-width:300px;}
.ad_area p { font-size:12px; margin-top:8px;}
@media screen and ( max-width:480px ){
.ad_area .rect { display:none;}
.ad_area .squa { display:inline-block;}
}
/* ad_area */

/* footer */
footer {
display:block;
background:linear-gradient(rgb(2,3,5,1),rgb(2,3,5,0));
border-top:solid 1px rgb(255,255,255,20%);
color:#999; font-size:0; line-height:1; text-align:center; text-shadow:0 1px 1px #000;
padding:8px 8px 24px;
clear:both;
}
footer * {
list-style-type:none;
padding:0; margin:0;
transition:initial;
}
footer a { display:block;}
footer a:link, footer a:visited,
footer a:hover, footer a:active {
text-decoration:none !important;
transition:initial;
}
footer a:hover { animation:pje-foot-a 1s forwards;}
@keyframes pje-foot-a { 0% { filter:drop-shadow(0 0 4px #FFF);}}
footer a:link, footer a:visited { color:#CCC !important;}
footer a:hover, footer a:active { color:#FFF !important;}
footer .jas { display:none; padding:8px;}
body.emusic footer .jas { display:block;}
footer .jas img {
display:block; width:100px; height:100px;
margin:0 auto 8px;
}
footer .jas p { font-size:10px;}
footer ul { display:flex; flex-wrap:wrap; justify-content:center;}
footer ul li { padding:8px;}
footer .sns { margin-bottom:16px;}
footer .sns a {
width:40px; height:40px;
background:url('/project/egg/img/sns/1.png') 0 0 / auto 40px;
border-radius:50%;
}
footer .sns a:hover { animation:pje-foot-sns 1s forwards;}
@keyframes pje-foot-sns {
0% { transform:scale(1.2); filter:drop-shadow(0 0 8px #FFF);}
}
footer .sns :nth-child(1) a { background-position:0 0;}
footer .sns :nth-child(2) a { background-position:-40px 0;}
footer .sns :nth-child(3) a { background-position:-80px 0;}
footer .txt a { font-size:12px;}
footer .inc { padding:8px; margin-top:16px;}
footer .inc a {
display:inline-block;
position:relative;
font-size:10px;
padding-top:56px;
}
footer .inc a:before {
position:absolute; left:calc(50% - 24px); top:0;
width:48px; height:48px;
background:url('/project/egg/img/logo/d4e.png') no-repeat center center / contain;
content:'';
}
@media screen and ( max-width:768px ){
footer { padding:8px;}
}
/* footer */