@charset 'UTF-8';
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
    outline: 0;
    background: transparent;
}

img
{
    vertical-align: middle;
}

body
{
    line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
    display: block;
}

nav ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after
{
    content: '';
    content: none;
}

a
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    background: transparent;
}

/* change colours to suit your needs */
ins
{
    text-decoration: none;

    color: #000;
    background-color: #ff9;
}

/* change colours to suit your needs */
mark
{
    font-weight: bold;
    font-style: italic;

    color: #000;
    background-color: #ff9;
}

del
{
    text-decoration: line-through;
}

abbr[title], dfn[title]
{
    cursor: help;

    border-bottom: 1px dotted;
}

table
{
    border-spacing: 0;
    border-collapse: collapse;
}

/* change border colour to suit your needs */
hr
{
    display: block;

    height: 1px;
    margin: 1em 0;
    padding: 0;

    border: 0;
    border-top: 1px solid #ccc;
}

input, select
{
    vertical-align: middle;
}

li
{
    list-style-type: none;
}

/* base
	========================================================================== */
body
{
    font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 16px;
    line-height: 1.4;

    color: #fff;
    background: #3583ce url(../img/bg.jpg) no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}

*, *::before, *::after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

a
{
    text-decoration: none;

    -webkit-touch-callout: none;
}

a, a:link, a:visited
{
    color: #fff;
}

.row
{
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.bnr
{
    margin: 15px;
}
.bnr img
{
    width: 100%;
}

.box
{
    position: relative;

    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;

    background-color: rgba(12, 65, 154, .6);
}
.box h1
{
    margin-bottom: 10px;

    text-align: center;
}
.box .answer
{
    font-size: 24px;

    margin-bottom: 10px;
    padding: 10px;

    text-align: center;

    color: #4bc2b3;
    background-color: white;
}
.box .answer span
{
    font-size: 14px;
    font-weight: normal;

    padding-right: .5em;
}
.box .answer .my-answer
{
    color: #0c419a;
}
.box .answer .right-answer
{
    color: #c94e4b;
}
.box .author
{
    float: right;

    margin-right: 10px;
}
.box .author img
{
    width: 150px;
}
.box .author p
{
    font-size: 14px;

    margin-top: 5px;

    text-align: center;
}
.box .ex-image
{
    text-align: center;
}
.box .ex-image img
{
    max-width: 100%;
}
.box .authors
{
    margin: 15px 0;
    padding: 10px;

    color: #0c419a;
    background-color: #fff;
}
.box .authors img
{
    width: 50px;
    margin-right: 5px;
}
.box .authors li
{
    float: left;

    width: 50%;
    margin-top: 10px;
}
.box .authors h2
{
    text-align: center;
}
.box .media
{
    margin-bottom: 15px;
}
.box.thanks em, .box.perfect-thanks em
{
    font-style: normal;
}
.box.thanks .caption, .box.perfect-thanks .caption
{
    padding: 10px;

    color: #0c419a;
    background-color: #fff;
}
.box.thanks .caption h1, .box.thanks .caption h2, .box.perfect-thanks .caption h1, .box.perfect-thanks .caption h2
{
    text-align: center;
}
.box.thanks .caption h1, .box.perfect-thanks .caption h1
{
    font-size: 20px;

    margin-bottom: 0;
}
.box.thanks .list, .box.perfect-thanks .list
{
    margin-top: 10px;
}
.box.thanks .list em, .box.perfect-thanks .list em
{
    line-height: 1;

    display: inline-block;

    margin-right: 5px;
    padding: 5px;

    background-color: #fff;
}
.box.thanks .list dt, .box.thanks .list dd, .box.perfect-thanks .list dt, .box.perfect-thanks .list dd
{
    padding-bottom: 5px;
}
.box.thanks .list dt em, .box.perfect-thanks .list dt em
{
    background-color: #14c3ad;
}
.box.thanks .list dd, .box.perfect-thanks .list dd
{
    position: relative;
}
.box.thanks .list dd:not(:last-child), .box.perfect-thanks .list dd:not(:last-child)
{
    margin-bottom: 10px;

    border-bottom: 2px solid #fff;
}
.box.thanks .list dd em, .box.perfect-thanks .list dd em
{
    background-color: #c94e4b;
}
.box.thanks .list dd strong, .box.perfect-thanks .list dd strong
{
    font-size: 20px;
}
.box.thanks .list dd .parcentage-min, .box.perfect-thanks .list dd .parcentage-min
{
    line-height: 1;

    position: absolute;
    right: 5px;
    bottom: 10px;

    display: inline-block;

    padding: 5px;

    color: #0c419a;
    background-color: #fff;
}
.box.thanks .list dd .ex0, .box.perfect-thanks .list dd .ex0
{
    color: #a0cfee;
}
.box.thanks .list dd .ex1, .box.perfect-thanks .list dd .ex1
{
    color: #e6aead;
}
.box .parcentage
{
    padding: 10px;

    text-align: center;

    color: #c94e4b;
    background-color: #fff;
}
.box .parcentage dt, .box .parcentage dd
{
    font-weight: bold;

    display: inline-block;
}
.box .parcentage dt strong, .box .parcentage dd strong
{
    font-size: 20px;
}

.choices li
{
    margin-bottom: 10px;
    padding: 0 15px;

    background: url('../img/line.png') repeat-x 0 50%;
    -webkit-background-size: 2px 2px;
            background-size: 2px 2px;
}
.choices li a
{
    display: table;

    width: 100%;
}
.choices li a::before, .choices li a::after
{
    content: '';
}
.choices li a::before, .choices li a::after, .choices li a span
{
    font-size: 15px;

    display: table-cell;

    height: 33px;

    vertical-align: middle;
}
.choices li:nth-child(1) a span
{
    background: url('../img/choice01.png') repeat-x;
    -webkit-background-size: 100px 33px;
            background-size: 100px 33px;
}
.choices li:nth-child(1) a::before
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(1) a::after
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -43px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(2) a span
{
    background: url('../img/choice02.png') repeat-x;
    -webkit-background-size: 100px 33px;
            background-size: 100px 33px;
}
.choices li:nth-child(2) a::before
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -129px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(2) a::after
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -172px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(4) a
{
    color: #492f0e;
}
.choices li:nth-child(4) a span
{
    background: url('../img/choice03.png') repeat-x;
    -webkit-background-size: 100px 33px;
            background-size: 100px 33px;
}
.choices li:nth-child(4) a::before
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -215px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(4) a::after
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -301px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(3) a span
{
    background: url('../img/choice04.png') repeat-x;
    -webkit-background-size: 100px 33px;
            background-size: 100px 33px;
}
.choices li:nth-child(3) a::before
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -86px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}
.choices li:nth-child(3) a::after
{
    width: 14px;
    height: 33px;

    background-image: url('../img/sprite-s98aa2a6891.png');
    background-repeat: no-repeat;
    background-position: 0 -258px;
    -webkit-background-size: 14px auto;
            background-size: 14px auto;
}

.submit
{
    margin: 15px;

    text-align: center;
}
.submit .btn
{
    display: inline-block;

    width: 60%;
    padding: 15px 0;

    background-color: #0c419a;
}
.submit .btn:hover
{
    background-color: rgba(12, 65, 154, .8);
}
.submit .btn.btn-get
{
    background-color: #c94e4b;
}
.submit .btn.btn-get:hover
{
    background-color: rgba(201, 78, 75, .8);
}

@font-face {
    font-family: AozoraMinchoMedium;

    src: url('../fonts/AozoraMinchoMedium.woff') format('woff'), url('../fonts/AozoraMinchoMedium.ttf') format('truetype');
}

.page-certificate
{
    background: #f8f8f8;
}

.certificate
{
    width: 290px;
    height: 404.5px;
    margin: 20px auto;
    padding: 109px 0 0 50px;

    background: url('../img/certificate.png') repeat-x 0 50%;
    -webkit-background-size: 290px 404.5px;
            background-size: 290px 404.5px;
}
.certificate h1, .certificate p
{
    display: none;
}
.certificate .name
{
    font-family: AozoraMinchoMedium;
    font-size: 24px;

    display: block;

    text-shadow: 0 0 3px rgba(0, 0, 0, .9);
}