@charset "UTF-8";

section {
background:#FFF;
box-shadow:0 0 4px #EFF,0 0 8px #CDD,0 0 12px #ABB;
}

section h1 {
background:linear-gradient(#011,#122);
font-size:20px; text-shadow:0 1px 2px #000;
padding:1em 2em;
}
section h1 * { display:block;}
section h1 :nth-child(1) { color:#899; font-size:75%;}
section h1 :nth-child(2) { color:#BCC; margin:0.5em 0;}
section h1 :nth-child(3) { color:#EFF; font-size:125%;}
@media screen and ( max-width:768px ){ section h1 { font-size:18px;}}
@media screen and ( max-width:480px ){ section h1 { font-size:14px;}}

section .main {
position:relative;
overflow:hidden;
padding:256px 32px 32px;
}
section .main:before,
section .main:after { position:absolute; top:0; content:'';}
section .main:before {/* 忍 者 増 田 氏 */
left:50%;
background:#FFF url('../img/ninjamasuda.png') no-repeat center top / contain;
width:320px; height:800px;/* 画像比＝横:2／縦:5 */
transform:translateX(-50%);
opacity:1;
}
section .main:after {/* 霧 */
left:0; right:0; bottom:0;
background:linear-gradient(rgba(255,255,255,0.0) 192px,rgba(255,255,255,0.75) 256px);
}
section .main >* { position:relative; z-index:1;}
section .main >:nth-child(n+2) { margin-top:16px;}
section .main a {
display:inline-block;
background:linear-gradient(#F90,#F60); border-radius:8px;
box-shadow:0 2px 3px rgba(0,0,0,0.5), 0 -2px 8px #F30 inset;
color:#FFF; text-decoration:none; text-shadow:0 1px 2px #000; font-size:16px;
padding:12px;
}
section .main span { display:inline-block; white-space:nowrap; padding:4px;}
section .main p { font-size:16px; line-height:1.75;}
@media screen and ( max-width:768px ){
section .main { padding:256px 16px 16px;}
section .main a { font-size:12px;}
section .main p { font-size:14px;}
}

/*↓ゲーム紹介↓*/
section .game {
position:relative;
background:#011;
color:#FFF;
padding:24px;
}
section .game div { padding:8px;}
section .game h2 { font-size:18px;}
section .game p { font-size:14px; color:#BCC; margin-top:8px;}
section .game ul { display:flex; flex-wrap:wrap; align-items:center;}
section .game li { width:50%; padding:8px;}
section .game img { width:100%; height:auto;}
section .game dl {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1.5;
}
section .game dt { width:5em; color:#BCC; text-align:right;}
section .game dd { width:calc(100% - 5em); text-align:left;}
section .game a { color:#FF0;}
@media screen and ( max-width:768px ){
section .game { padding:8px;}
section .game h2 { font-size:14px;}
section .game p { font-size:12px;}
section .game dl { font-size:12px;}
}
@media screen and ( max-width:480px ){
section .game li { width:100%;}
section .game dt,
section .game dd { width:50%;}
}
/*↑ゲーム紹介↑*/