html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, footer, header, hgroup, menu, nav, section, summary, article, aside, canvas, details, figcaption, figure, table, caption, tbody, tfoot, thead, tr, th, td, dl, dt, dd, ol, ul, li { margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 100%; vertical-align: top; background: transparent none repeat scroll 0% 0%; list-style: outside none none; }
body { line-height: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
a { margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; background: transparent none repeat scroll 0% 0%; }
hr { display: block; height: 1px; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(204, 204, 204) -moz-use-text-color -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; margin: 1em 0px; padding: 0px; }

body { background: rgb(255, 255, 255) none repeat scroll 0% 0%; color: rgb(0, 70, 140); font-size: 16px; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; line-height: 0; }
a { text-decoration: underline; outline: medium none; }
a:link { color: rgb(255, 77, 77); }
a:visited { color: rgb(255, 77, 77); }
a:hover { color: rgb(255, 204, 0); }
a:active { color: rgb(255, 204, 0); }
header, article { width: 100%; }
#ttl { margin-bottom: 12px; }
#twitterCol { no-repeat scroll center bottom; width: 640px; height: 500px; margin-bottom: 40px; }
#youtubeCol { no-repeat scroll center bottom; width: 640px; height: 440px; margin-bottom: 40px; }
#store { margin-top: 40px; margin-bottom: 10px; position: relative; width: 100%;}
#and { position: absolute; left: 0px; top: 209px; }
#ios { position: absolute; left: 320px; top: 209px; }
#contents { margin-bottom: 80px; }
#contents2 { margin-bottom: 60px; }
#text { margin-top: 5px; margin-bottom: 10px; }
#left { float: left; }
#grade { margin-bottom: 10px; }
.clearfix::before, .clearfix::after { content: "."; display: block; height: 0px; visibility: hidden; }
.clearfix::after { clear: both; }
.clearfix { margin-top: 5px; }
#pbtnrow { margin-bottom: 25px; }


p { text-align: center; line-height: 1.5em; padding-bottom: 1%; color: rgb(0, 89, 178); }
footer { background: transparent url('img/bg_footer.png') repeat-x scroll 0% 0%; height: 60px; }
#copyright { width: 100%; padding: 10px 0px 0px; color: rgb(255, 255, 255); text-align: center; line-height: 1.5em; font-size: 18pt; font-weight: bold;}

/* モーダル用CSS */
.modal-overlay {
    z-index:2; 
    display:none; 
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; 
    background-color:rgba(0,0,0,.7)} 
a.modal-open:hover {cursor:pointer} 
.modal-content {
    position:fixed;
    display:none; 
    z-index:3; 
    margin:10px;}
/*.modal-content img {width:100%;}*/
#close { width: 100%; }
.modal_btn {width:100%;} 
.modal_image { width:470px; }
a.modal-close { 
    position:absolute;
    top:-5px;
    right:-5px;
    color:#b29c33;}
a.modal-close:hover {cursor:pointer} 
a.modal-voice1 { 
    position:absolute;
    top:160px;
    left:20px;}
a.modal-voice1:hover {cursor:pointer} 
a.modal-voice2 { 
    position:absolute;
    top:260px;
    left:20px;}
a.modal-voice1:hover {cursor:pointer}