@charset 'utf-8';

/*↓reset↓*/
*,*:before,*:after {
box-sizing:border-box;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
text-overflow:ellipsis;
padding:0; margin:0;
}
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
a:link,a:visited { text-decoration:none;}
a:hover,a:active { text-decoration:underline;}
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:#FFF /* #FF3906 */ url( ../img/bg.png ) center center / 408px auto;
color:#161923; font-size:0; line-height:1; text-align:center; -webkit-text-size-adjust:100%;
}
body > div {
position:relative;
max-width:768px; width:100%;
background:rgb(255 255 255 / 0.9);
padding:16px 0;
margin:0 auto;
}
body > div:before,
body > div:after { position:absolute; top:0; bottom:0; width:32px; content:'';}
body > div:before { left:-32px; background:linear-gradient( 90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.9));}
body > div:after { right:-32px; background:linear-gradient( 90deg, rgb(255 255 255 / 0.9),rgb(255 255 255 / 0))}
/*↑body↑*/
/*↓ヘッダ↓*/
header {
display:flex; justify-content:space-between; align-items:center;
background:linear-gradient(#589, #161923, #060C13);
padding:8px 24px;
}
header > * { filter:drop-shadow(0 1px 2px #000);}
header a {
display:inline-block; width:100px; height:60px;
background:url( ../img/egg.png ) no-repeat center center / contain;
margin:8px;
}
header h1 { color:#FFF; font-size:14px; padding:8px;}
@media screen and ( max-width:768px ){
header { flex-wrap:wrap; justify-content:center; padding:8px;}
header h1 { width:100%; font-size:12px;}
}
/*↑ヘッダ↑*/
/*↓フッタ↓*/
footer { text-align:center; padding:8px 24px;}
footer a {
display:inline-block;
color:#566; text-decoration:none !important;
padding:4px;
}
footer a * { padding:4px;}
footer img { width:96px; filter:drop-shadow(0 1px 2px #899);}
footer h3 { font-size:12px; text-shadow:0 1px 1px #899;}
footer p  { font-size:10px; text-shadow:0 1px 1px #899;}
@media screen and ( max-width:768px ){
footer { padding:8px;}
}
/*↑フッタ↑*/