body, form, h1, h2, h3, li, p, table, ul { margin: 0; padding: 0; -webkit-user-select: none; } td, th { padding: 0; } a, a:visited { color: #2f5aae; cursor: pointer; font-weight: bold; text-decoration: none; text-transform: uppercase; } body { background: #d1e0e8; } body, input { color: #000; font-family: 'Lucida Grande', sans-serif; font-size: 12px; } h1 { color: #039; font-size: 24px; margin: -3px 0 16px; } h2 { color: #5475c9; font-size: 18px; margin: -8px 0 16px; } p { margin-bottom: 8px; } table { border-spacing: 0; } a.disabled { color: #666; } a.disabled:hover { cursor: default; text-decoration: none !important; } body.kana p > span, #i p > span, #o p > span { color: #222; font-size: 12px; font-weight: bold; text-transform: uppercase; } body.kana p > span::before, #i p > span::before, #o p > span::before { color: #666;; content: '«'; font-family: 'Lucida Grande', sans-serif; font-size: 14px; font-weight: normal; margin-right: 1px; } body.kana p > span::after, #i p > span::after, #o p > span::after { color: #666;; content: '»'; font-family: 'Lucida Grande', sans-serif; font-size: 14px; font-weight: normal; margin-left: 1px; } p, #top li { font-size: 14px; line-height: 1.5; } #all { background-position: 3px 3px; background-repeat: no-repeat; left: 50%; margin-left: -299px; margin-top: -320px; position: absolute; top: 48%; width: 598px; } #b, #bottom, #front a, #kana, #preview, #t, #top { background: url( /img/opacity.png ) !important; } #bottom { border-top: 3px solid #b6cbf3; bottom: 3px; box-sizing: border-box; height: 49px; left: 3px; padding: 15px 16px 0; position: absolute; right: 3px; } #bottom a:hover { text-decoration: underline; } #bottom li, #bottom ul { display: inline; } #bottom li { border-left: 1px solid #666; margin-left: 12px; padding-left: 12px; } #bottom li:first-child { border: 0; margin-left: 0; padding-left: 0; } #bottom ul:last-child { float: right; } #bottom #download { bottom: 3px; margin: 0; position: absolute; right: 3px; } #download { background: url( /img/download.svg ); color: rgba( 0, 0, 0, 0 ); display: inline-block; height: 40px; margin: 8px 0; width: 135px; } #site { color: #b6cbf3; font-size: 24px; font-weight: bold; position: absolute; right: 20px; top: 55px; } #tab { border: 3px solid #b6cbf3; border-top-width: 0; height: 563px; padding: 16px; vertical-align: top; } #tabs { background: #fff; height: 42px; list-style-type: none; } #tabs li { border: 3px solid #b6cbf3; border-right-width: 0; float: left; margin-right: 0; position: relative; top: 0; } #tabs li:last-child { border-right-width: 3px; } #tabs li a { background: none; box-shadow: inset 0 -5px 5px 0 #e3e9f4; display: block; height: 37px; line-height: 37px; text-align: center; width: 96px; } #tabs li:last-child a { width: 97px; } #tabs #front { border-bottom-width: 0; } #tabs #front a { box-shadow: none; height: 40px; } #top { border-bottom: 3px solid #b6cbf3; margin: -16px -16px 0; padding: 16px 16px 10px; } #top ul + p { margin-top: 12px; } #i p { width: 65%; } #a p { width: 55%; } #a #bottom > a:last-child { float: right; } #a #top li { margin-bottom: 3px; } #a #top ul { margin: 0 0 8px 24px; } #a #app { width: 224px; } #a #app div:nth-child( 3 ) { background: url( /img/app.png ); height: 353px; width: 224px; } #a #app span { left: 96px; top: 17px; } #a #app span:first-child { left: 76px; } #a #app span:last-child { left: 74px; top: 411px; } #kana { margin-bottom: 20px; } #kana div { margin-top: 6px; } #kana span { background-image: url( /img/k/19/kana.png ); color: rgba( 0, 0, 0, 0 ); display: inline-block; height: 19px; width: 19px; } #kana table { width: 100%; } #kana td { border-right: 1px solid #ddd; cursor: pointer; padding: 8px 0 6px; text-align: center; white-space: nowrap; } #kana td:last-child { border-right-width: 0; } #kana tr:last-child td { padding-bottom: 11px; } #preview { margin-bottom: 6px; padding: 10px 0; } #preview span.p-2 { background-position: -190px 0; } #preview span.p-3 { background-position: -380px 0; } #preview span.p-4 { background-position: -570px 0; } #preview span.p-5 { background-position: -760px 0; } #preview span.p-6 { background-position: -950px 0; } #preview span.p-7 { background-position: -1140px 0; } #preview span.p-8 { background-position: -1330px 0; } #preview span.p-9 { background-position: -1520px 0; } #preview span > span { background-image: url( /img/k/19/kana.png ); display: block; height: 19px; margin: 0 auto; width: 19px; } #preview td > span { border: 1px solid #ddd; cursor: pointer; display: block; height: 20px; margin: 0 auto; padding: 2px 0; width: 48px; } #b { margin: 16px 0; } #b, #kana, #preview, #t { border: 1px solid #eee; } #b span { border: 1px solid #ddd; } #b span, #t span { box-sizing: border-box; cursor: pointer; display: block; height: 50px; margin: 0 auto; width: 50px; } #b table, #t table { margin: 0 0 10px; } #b td, #preview td, #t td { text-align: center; } #b td, #t td { padding: 10px 11px 0 0; } #b td:first-child, #preview td:first-child, #t td:first-child { padding-left: 10px; } #b span.b-1 { background-position: -351px -383px; } #b span.b-2 { background-position: -397px -352px; } #b span.b-3 { background-position: -104px -471px; } #b span.b-4 { background-position: -22px -337px; } #b span.b-5 { background-position: -351px -389px; } #b span.b-6 { background-position: -325px -521px; } #b span.b-7 { background-position: -251px -154px; } #b span.b-8 { background-position: -460px -484px; } #b span.b-9 { background-position: -289px -326px; } #b span.b-a { background-position: -96px -417px; } #b span.b-b { background-position: -289px -326px; } #b span.b-c { background-position: -272px -375px; } #b span.b-d { background-position: -181px -223px; } #b span.b-e { background-position: -289px -326px; } #b span.b-f { background-position: -296px -325px; } #b span.b-g { background-position: -195px -227px; } #b span.b-h { background-position: -352px -315px; } #b span.b-i { background-position: -300px -200px; } #preview td { padding-right: 11px; } #speed { color: #5475c9; cursor: pointer; display: block; font-size: 14px; font-weight: bold; margin: 24px 0 6px; text-transform: uppercase; } #speed input { bottom: 1px; position: relative; right: 3px; } #t { margin-bottom: 10px; } #t span { background: url( /img/k/50/kana.png ); } #t span.t-1 { background-position: 0 -2px; } #t span.t-2 { background-position: -500px -1px; } #t span.t-3 { background-position: -1000px -3px; } #t span.t-4 { background-position: -1500px -1px; } #t span.t-5 { background-position: -2000px -1px; } #t span.t-6 { background-position: -2500px -2px; } #t span.t-7 { background-position: -3000px -2px; } #t span.t-8 { background-position: -3499px -2px; } #t span.t-9 { background-position: -4000px -2px; } #answer, #x { bottom: 18px; display: none; font-size: 14px; font-weight: bold; left: 50%; margin-left: -150px; position: absolute; text-align: center; width: 300px !important; } #p h1, #p p { text-align: left; } #p input { border: 1px solid #ddd; font-size: 14px; font-weight: bold; margin-bottom: 24px; outline: none; padding: 6px; text-align: center; width: 44px; -webkit-appearance: none; -webkit-highlight: none; } #p #bottom { text-align: right; } #p #bottom a { float: left; } #p #score { color: #666; display: none; text-transform: uppercase; } #p #score span { margin-right: 6px; } #p #top { text-align: center; } #question { height: 50px; margin: 67px 0 24px; } #question span { background: url( /img/k/50/kana.png ); display: inline-block; height: 50px; margin: 0 2px; width: 50px; } #x { color: #a80404; font-size: 18px; } #app { background: #fff; border: 1px solid #999; border-radius: 10px; padding: 43px 0 41px; position: absolute; right: 18px; top: 58px; width: 150px; } #app div:nth-child( 3 ) { background: url( /img/app_t.png ); border-bottom: 1px solid #999; border-top: 1px solid #999; height: 236px; width: 150px; } #app span { height: 8px; border: 1px solid #999; border-radius: 5px; left: 60px; position: absolute; top: 17px; width: 30px; } #app span:first-child { left: 40px; width: 8px; } #app span:last-child { background: url( /img/rating.png ); border: 0; height: 15px; left: 37px; top: 293px; width: 76px; } #all.b-1, #all.b-1 #front, #b span.b-1 { background-image: url( /img/b/1.jpg ); } #all.b-2, #all.b-2 #front, #b span.b-2 { background-image: url( /img/b/2.jpg ); } #all.b-3, #all.b-3 #front, #b span.b-3 { background-image: url( /img/b/3.jpg ); } #all.b-4, #all.b-4 #front, #b span.b-4 { background-image: url( /img/b/4.jpg ); } #all.b-5, #all.b-5 #front, #b span.b-5 { background-image: url( /img/b/5.jpg ); } #all.b-6, #all.b-6 #front, #b span.b-6 { background-image: url( /img/b/6.jpg ); } #all.b-7, #all.b-7 #front, #b span.b-7 { background-image: url( /img/b/7.jpg ); } #all.b-8, #all.b-8 #front, #b span.b-8 { background-image: url( /img/b/8.jpg ); } #all.b-9, #all.b-9 #front, #b span.b-9 { background-image: url( /img/b/9.jpg ); } #all.b-a, #all.b-a #front, #b span.b-a { background-image: url( /img/b/a.jpg ); } #all.b-b, #all.b-b #front, #b span.b-b { background-image: url( /img/b/b.jpg ); } #all.b-c, #all.b-c #front, #b span.b-c { background-image: url( /img/b/c.jpg ); } #all.b-d, #all.b-d #front, #b span.b-d { background-image: url( /img/b/d.jpg ); } #all.b-e, #all.b-e #front, #b span.b-e { background-image: url( /img/b/e.jpg ); } #all.b-f, #all.b-f #front, #b span.b-f { background-image: url( /img/b/f.jpg ); } #all.b-g, #all.b-g #front, #b span.b-g { background-image: url( /img/b/g.jpg ); } #all.b-h, #all.b-h #front, #b span.b-h { background-image: url( /img/b/h.jpg ); } #all.b-i, #all.b-i #front, #b span.b-i { background-image: url( /img/b/i.jpg ); } #i #front { background-position: 0 0; } #tabs.h #front { background-position: -99px 0; } #tabs.k #front { background-position: -198px 0; } #o #front { background-position: -297px 0; } #p #front { background-position: -396px 0; } #a #front { background-position: -495px 0; } #ad-left, #ad-right { height: 600px; position: absolute; top: 40px; } #ad-left { left: -174px; width: 160px; } #ad-right { right: -314px; width: 300px; } ins.adsbygoogle { display: block; height: 100%; width: 100%; } @media ( -webkit-min-device-pixel-ratio: 2 ) { #all, #all #tabs #front, #b span { background-size: 594px 636px !important; } #all.b-1, #all.b-1 #tabs #front, #b span.b-1 { background-image: url( /img/b/1@2x.jpg ); } #all.b-2, #all.b-2 #tabs #front, #b span.b-2 { background-image: url( /img/b/2@2x.jpg ); } #all.b-3, #all.b-3 #tabs #front, #b span.b-3 { background-image: url( /img/b/3@2x.jpg ); } #all.b-4, #all.b-4 #tabs #front, #b span.b-4 { background-image: url( /img/b/4@2x.jpg ); } #all.b-5, #all.b-5 #tabs #front, #b span.b-5 { background-image: url( /img/b/5@2x.jpg ); } #all.b-6, #all.b-6 #tabs #front, #b span.b-6 { background-image: url( /img/b/6@2x.jpg ); } #all.b-7, #all.b-7 #tabs #front, #b span.b-7 { background-image: url( /img/b/7@2x.jpg ); } #all.b-8, #all.b-8 #tabs #front, #b span.b-8 { background-image: url( /img/b/8@2x.jpg ); } #all.b-9, #all.b-9 #tabs #front, #b span.b-9 { background-image: url( /img/b/9@2x.jpg ); } #all.b-a, #all.b-a #tabs #front, #b span.b-a { background-image: url( /img/b/a@2x.jpg ); } #all.b-b, #all.b-b #tabs #front, #b span.b-b { background-image: url( /img/b/b@2x.jpg ); } #all.b-c, #all.b-c #tabs #front, #b span.b-c { background-image: url( /img/b/c@2x.jpg ); } #all.b-d, #all.b-d #tabs #front, #b span.b-d { background-image: url( /img/b/d@2x.jpg ); } #all.b-e, #all.b-e #tabs #front, #b span.b-e { background-image: url( /img/b/e@2x.jpg ); } #all.b-f, #all.b-f #tabs #front, #b span.b-f { background-image: url( /img/b/f@2x.jpg ); } #all.b-g, #all.b-g #tabs #front, #b span.b-g { background-image: url( /img/b/g@2x.jpg ); } #all.b-h, #all.b-h #tabs #front, #b span.b-h { background-image: url( /img/b/h@2x.jpg ); } #all.b-i, #all.b-i #tabs #front, #b span.b-i { background-image: url( /img/b/i@2x.jpg ); } #a #app div:nth-child( 3 ) { background-image: url( /img/app@2x.png ); background-size: 224px 353px; } #app div:nth-child( 3 ) { background-image: url( /img/app_t@2x.png ); background-size: 150px 236px; } #app span:last-child { background-image: url( /img/rating@2x.png ); background-size: 76px 15px; } #kana span { background-image: url( /img/k/19/kana@2x.png ); background-size: 1710px 304px; } #preview span > span { background-image: url( /img/k/19/kana@2x.png ); background-size: 1710px 304px; } #question span { background-image: url( /img/k/50/kana@2x.png ); background-size: 4500px 800px; } #t span { background-image: url( /img/k/50/kana@2x.png ); background-size: 4500px 800px; } }