@charset 'utf-8';

/*↓reset↓*/
*, *:before, *:after {
box-sizing:border-box;
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
text-overflow:ellipsis;
padding:0; margin:0;
}
html { -webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
a:link,a:visited { text-decoration:underline;}
a:hover,a:active { text-decoration:none;}
a:focus { outline:none;}
ul { list-style:none;}
img,iframe { border:0;}
button,select,input,textarea { outline: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; overflow-y:scroll;
overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
width:100vw; min-height:100vh;
background:radial-gradient(farthest-side circle at center top,#96C303 25%,#3F6003 50%,#66930F);
font-size:0; line-height:1; text-align:center;
}
body >.inner { max-width:768px; width:100%; margin:0 auto;}
/*↑body↑*/
/*↓header↓*/
header { padding:32px;}
header a {
display:block;
width:256px; height:128px;
background:url( ../img/logo/emrecords.png ) no-repeat center center / contain;
margin:0 auto;
}
@media screen and ( max-width:768px ){
header { padding:16px;}
header a { width:120px; height:72px;}
}
/*↑header↑*/
/*↓section↓*/
section {
overflow:hidden;
background:#FFF;
box-shadow:0 0 4px #FFF,0 0 8px #FFF,0 0 12px #96C303,0 0 16px #96C303;
border-radius:16px;
}
section a:link, section a:visited { color:#96C303;}
section a:hover, section a:active { color:#3F6003;}
@media screen and ( max-width:768px ){
section { border-radius:0; margin:0;}
}
/*↑section↑*/
/*↓footer↓*/
footer { padding:32px;}
footer a { display:inline-block; font-size:10px; color:#FFF !important; text-decoration:none !important;}
footer a:before {
display:block;
width:64px; height:64px;
background:url( ../img/logo/d4e.png ) no-repeat center center / contain;
margin:0 auto 8px;
content:'';
}
@media screen and ( max-width:768px ){
footer { padding:16px;}
}
/*↑footer↑*/

/*↓表紙↓*/
.hero {
position:relative;
overflow:hidden;
background:#000;
color:#FFF;
}
.hero span {/* 表紙ぼかし */
position:absolute; left:-8px; right:-8px; top:-8px; bottom:-8px;
width:calc(100% + 16px); height:calc(100% + 16px);
background:no-repeat center center / cover;
filter:blur(8px);
opacity:0.5;
}
.hero > div:nth-of-type(1) {
position:relative;
background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.75) 64px,rgba(0,0,0,0.75));
text-shadow:0 2px 4px #000;
padding:24px 24px 8px;
}
.hero > div:nth-of-type(2) {
position:relative;
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.75) 64px,rgba(0,0,0,0.75));
text-shadow:0 1px 2px #000;
padding:8px 24px 24px;
}
.hero > div h1 { font-size:20px; padding:8px;}
.hero > div h2 { font-size:16px; color:#8FC32F; line-height:1.25; padding:8px;}
.hero > div p  { font-size:14px; line-height:1.5; padding:8px;}
.hero > img {
display:inline-block;
max-width:320px; max-height:320px;
filter:drop-shadow(0 2px 4px #000);
margin:8px;
}
.hero > div a.mall {
position:relative;
display:inline-block;
background:linear-gradient(#FC0,#F60 50%,#C60 50%,#F60);
border:solid 2px; border-color:#FFC #C60 #630; border-radius:8px;
color:#FFF !important; font-size:24px; text-shadow:0 1px 2px #300; text-decoration:none;
padding:12px; margin:8px;
}
.hero > div a.mall:before {
position:absolute; left:0; right:0; top:0; bottom:0;
border:solid 2px; border-color:#930 #960 #FCC; border-radius:6px;
content:'';
}
.hero > div a.mall * { position:relative; z-index:2; padding:4px;}
.hero > div a.mall h3 { font-size:24px;}
.hero > div a.mall p  { font-size:16px;}
@media screen and ( max-width:768px ){
.hero > div:nth-of-type(1),
.hero > div:nth-of-type(2) { padding:8px;}
.hero > div h1 { font-size:16px;}
.hero > div h2 { font-size:14px;}
.hero > div p  { font-size:12px;}
.hero > img { width:calc(100% - 32px);}
.hero > div a.mall { padding:16px;}
.hero > div a.mall h3 { font-size:18px;}
.hero > div a.mall p  { font-size:12px;}
}
/*↑表紙↑*/
/*↓仕様↓*/
.spec {
background:#8FC32F;
padding:16px 32px;
}
.spec dl {
display:flex; flex-wrap:wrap;
font-size:16px; line-height:1.25; text-shadow:0 0 4px #000;
}
.spec dt {
position:relative;
width:25%;
color:#DFB; text-align:right;
padding-right:1em;
}
.spec dt:before { position:absolute; right:0; top:0; content:'\FF1A';}
.spec dd {
width:75%;
color:#FFF; text-align:left;
}
.spec dd a { margin-left:0.5em; white-space:nowrap;}
@media screen and ( max-width:768px ) {
.spec { padding:16px;}
.spec dl { font-size:12px;}
}
/*↑仕様↑*/
/*↓見出↓*/
section > h3 {
background:linear-gradient(#693,#121 50%,#000 50%,#242);
box-shadow:0 2px 4px #000 inset;
color:#FFF; font-size:20px; text-shadow:0 1px 2px #000;
padding:16px 32px;
}
@media screen and ( max-width:768px ){
section > h3 {
font-size:16px;
padding:16px;
}
}
/*↑見出↑*/
/*↓収録↓*/
.records {
display:flex; flex-wrap:wrap; justify-content:center;
padding:8px 24px;
counter-reset:num 0;
}
.records > div { padding:8px;}
.records h4 {
display:block;
border:solid #8FC32F; border-width:2px 0;
color:#8FC32F; font-size:14px; line-height:1.25;
padding:6px 0;
}
.records p + h4 { margin-top:4px;}
.records p { color:#666; font-size:12px; line-height:1.5;}
.records h4 + p { margin-top:8px;}
.records ol + p { margin-top:16px;}
.records ol { list-style-type:none;}
.records ol:not(:first-child)/* 最初ではない */ { margin-top:16px;}
.records li {
position:relative;
border-bottom:solid 1px #DEE;
color:#333; font-size:12px; line-height:1.25; text-align:left;
padding:0 0 4px 3.5em;
}
.records li:nth-child(n+2) { margin-top:8px;}
.records li:before {
position:absolute; left:0; top:0;
width:3em;
counter-increment:num 1;
content:counter(num) '.';
color:#8FC32F; text-align:right;
}
.records a:link, .records a:visited { color:#334444; text-decoration:none;}
.records a:hover, .records a:active { color:#8FC32F; text-decoration:none;}
.records a:after { color:#F30; white-space:nowrap; content:'\3010\8A66\8074\3011';}/*【試聴】*/
.records a:hover:after { color:#F90;}
@media screen and ( max-width:768px ){
.records { padding:8px;}
}
@media screen and ( max-width:480px ){
.records div { width:100%;}
}
/*↑収録↑*/
/*↓汎用↓*/
.general {
display:flex; flex-direction:column; align-items:center;
padding:16px 32px;
}
.general > :nth-child(n+2) { margin-top:16px;}
.general h4 {
display:inline-block;
background:#8FC32F;
border-radius:1em;
color:#FFF; font-size:16px;
padding:0.5em 1.5em;
}
.general p  { color:#666; font-size:14px; line-height:1.5;}
.general ul {
color:#333; font-size:14px; line-height:1.25; text-align:left;
padding-left:1em;
}
.general li { position:relative;}
.general li:before { position:absolute; left:-1em; top:0; content:'\30FB';}
.general img { max-width:100%; width:auto;}
.general iframe {
max-width:480px; width:calc(100vw - 32px);
max-height:360px; height:calc((100vw - 32px) * 0.75);
}
@media screen and ( max-width:768px ){
.general { padding:16px;}
.general h3 { font-size:16px;}
.general h4 { font-size:14px;}
.general p  { font-size:12px;}
.general ul { font-size:12px;}
}
/*↑汎用↑*/
/*↓※↓*/
.reference {
display:inline-block;
text-align:left;
padding:16px 32px;
counter-reset:num 0;
}
.reference li {
position:relative;
color:#999; font-size:12px; line-height:1.5;
margin-left:3em;
}
.reference li:before {
position:absolute; right:100%; top:0;
counter-increment:num 1;
content:'\203B' counter(num) '\FF1A';
}
@media screen and ( max-width:768px ){
.reference { padding:16px;}
}
/*↑※↑*/
/*↓戻るリンク↓*/
.return {
display:block;
background:linear-gradient(#360,#9C3);
border-top:solid 2px #9C3; border-bottom:solid 2px #360;
color:#FFF !important; font-size:14px; text-shadow:0 1px 2px #000; text-decoration:none !important;
padding:16px 32px;
}
.return:hover { animation:return 1s linear forwards;}
@keyframes return { 0% { filter: brightness(150%);}}
@media screen and ( max-width:768px ){
.return { font-size:12px;}
}
/*↑戻る↑*/
/*↓商標↓*/
.copy {
display:flex; flex-wrap:wrap; justify-content:center;
background:linear-gradient(#121,#232);
box-shadow:0 2px 4px rgba(0,0,0,0.5) inset;
color:#FFF; text-shadow:0 1px 2px #000;
padding:12px 28px;
}
.copy li { font-size:12px; padding:4px;}
.copy a:link, .copy a:visited { color:#8FC32F;}
.copy a:hover, .copy a:active { color:#CF9;}
@media screen and ( max-width:768px ){
.copy { padding:12px;}
.copy li { font-size:10px;}
}
/*↑商標↑*/