@charset 'utf-8';

/*↓hack↓*/
body { background:radial-gradient(farthest-side circle at center top,#900 25%,#300 50%,#600);}
section { box-shadow:0 0 4px #FFF,0 0 8px #FFF,0 0 12px #F00,0 0 16px #C00,0 0 20px #900;}
section a:link, section a:visited { color:#F33;}
section a:hover, section a:active { color:#F99;}
section > h3 { background:linear-gradient(#600,#200 50%,#000 50%,#300);}
.spec { background:#900;}
.spec dt { color:#FCC;}
.records li:before { color:#F00;}
.general h4 { background:#900;}
.return {
background:linear-gradient(#600,#C00);
border-color:#C00 #000 #600;
}
.copy { background:linear-gradient(#200,#311);}
/*↑hack↑*/
/*↓インタビューリスト↓*/
.list-int h4 {
background:#C30606;
color:#FFF; font-size:24px;
padding:16px 32px;
}
.list-int ul {
display:flex; flex-wrap:wrap; justify-content:center;
background:#000;
list-style-type:none;
}
.list-int li { width:calc(768px/5); height:calc(768px/5);}
.list-int a {
position:relative;
display:block;
width:100%; height:100%; overflow:hidden;
background:no-repeat center center / cover;
}
.list-int a:before {
position:absolute; left:0; right:0; top:0; bottom:0; z-index:1;
background:no-repeat center center / cover;
opacity:0;
content:'';
}
.list-int li:nth-child(odd)  a:before { background-image:url( img/skull-1.png );}
.list-int li:nth-child(even) a:before { background-image:url( img/skull-2.png );}

.list-int a:hover:before { animation:list-int-a 1s forwards;}
@keyframes list-int-a { 0% { opacity:1; transform:scale(1.2);}}
.list-int p  {
position:absolute; left:0; right:0; bottom:0; z-index:2;
background:rgba(0,0,0,0.8);
color:#FFF; font-size:12px; text-align:center;
padding:8px;
}
@media screen and ( max-width:768px ){
.list-int h4 { font-size:20px;}
.list-int li { width:25vw; height:25vw;}
}
@media screen and ( max-width:576px ){
.list-int h4 { font-size:16px;}
.list-int li { width:33.33vw; height:33.33vw;}
}
/*↑インタビューリスト↑*/
/*↓表紙＋プロフィール↓*/
.hero > div h1 img {
display:inline-block;
max-width:336px; width:100%;
}
.hero > div h2 { color:#FFF;}
.hero .prof img { max-width:160px; max-height:160px; margin:8px;}
.hero .prof { display:flex; justify-content:center; align-items:center;}
.hero .prof dl {
position:relative;
display:flex; flex-wrap:wrap;
max-width:400px; width:100%;
font-size:14px;
padding:4px;
}
.hero .prof dt {
position:relative;
width:8em;
color:#F66; text-align:right;
padding:4px; padding-right:calc(0.5em + 4px);
}
.hero .prof dt:after {
position:absolute; right:0; top:0;
padding:4px;
content:':';
}
.hero .prof dd {
width:calc(100% - 8em);
text-align:left;
padding:4px;
}
.hero .prof a:link, .hero .prof a:visited { color:#FFF;}
.hero .prof a:hover, .hero .prof a:active { color:#F66;}
@media screen and ( max-width:768px ){
.hero .prof dl { font-size:12px;}
}
@media screen and ( max-width:480px ){
.hero .prof { flex-direction:column;}
}
/*↑表紙＋プロフィール↑*/
/*↓インタビュー↓*/
.interview { text-align:left; padding:16px 32px;}
.interview > * { margin-top:16px;}
.interview h4 {
position:relative;
color:#F00; font-size:14px; line-height:1.25em; padding-left:2.5em;
}
.interview h4:before {
position:absolute; left:0; top:calc(50% - 1em);
width:2em; height:2em;
background:url( img/icon-skull.png ) 0 0 / cover;
content:'';
}
.interview p  { color:#677; font-size:14px; line-height:1.75em; padding-left:2.5em;}
.interview hr { height:0; border:solid #CDD 1px;}
@media screen and ( max-width:768px ){
.interview { padding:16px;}
.interview h4 { font-size:12px;}
.interview p  { font-size:12px;}
}
/*↑インタビュー↑*/
/*↓サイヴェリアトップ↓*/
.psyvariar-top { padding:16px 32px;}
.psyvariar-top a {
display:inline-block;
width:224px; height:72px;
background:url( img/themix_white.png ) no-repeat center center / contain;
}
@media screen and ( max-width:768px ){
.psyvariar-top { padding:16px;}
}
/*↑サイヴェリアトップ↑*/