@charset "UTF-8";

/* ───────────────────────────────────────────────────────────── Top */

#header {
    background: #fff;
    border-bottom: 1px solid #efefef;
    color: #01afec;
    margin-bottom: 0.625em;
}

#pageId {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    line-height: 1.25em;
    padding: 0.625em 0 0.375em;
}

#key {
    background: #01afec;
    display: table;
}

#headline,
#keyv {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

#keyv img {
    width: 100%;
    max-width: 375px;
}

#headline {
    font-size: 125%;
    line-height: 1.5em;
    padding: 0 3.125em;
}

#headline #siteId {
    font-size: 200%;
    line-height: 1.25em;
    white-space: nowrap;
}

#headline #ruby {
    white-space: nowrap;
}

#menu {
    text-align: center;
    /*margin-top:1.75em;
    padding-bottom:1.75em;*/
}

#menu li {
    display: inline-block;
    width: 250px;
    text-align: center;
}

#menu li a {
    display: block;
    text-decoration: none;
    padding: 1.75em 0;
    position: relative;
}

#menu li a:before {
    border-bottom: 4px solid #01afec;
    content: "";
    display: block;
    width: 0;
    transition: all 0.25s ease;
    position: absolute;
    left: 50%;
    bottom: 0;
}

#menu li a:hover:before {
    border-bottom: 4px solid #01afec;
    width: 50%;
}

#menu li a:after {
    border-bottom: 4px solid #01afec;
    content: "";
    display: block;
    width: 0;
    transition: all 0.25s ease;
    position: absolute;
    right: 50%;
    bottom: 0;
}

#menu li a:hover:after {
    border-bottom: 4px solid #01afec;
    width: 50%;
}

#main {
    background: #fff;
    padding: 3.125em 0;
}

#main #msg {
    border: 1px solid #01afec;
    padding: 1.25em;
}

#main #msg p {
    color: #01afec;
}

#main #input.form {
    margin-top: 3.125em;
}

#main ol#flow {
    display: table;
    width: 100%;
    margin-top: 1.875em;
}

#main ol#flow li {
    display: table-cell;
    width: 32%;
    font-size: 87.5%;
    text-align: center;
}

#main ol#flow li:nth-child(-n + 2) {
    padding-right: 2%;
}

#main ol#flow li span.balloon,
#main ol#flow li span.square {
    background: #eaeaea;
    display: block;
    height: 4em;
    line-height: 4em;
}

#main ol#flow li span.balloon {
    background: #eaeaea;
    width: 100%;
    position: relative;
}

#main ol#flow li span.balloon:before {
    border: 6px solid transparent;
    border-left: 6px solid #eaeaea;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
}

#main ol#flow li.current span.balloon,
#main ol#flow li.current span.square {
    background: #01afec;
    color: #fff;
}

#main ol#flow li.current span.balloon:before {
    border-left: 6px solid #01afec;
}

#main #form {
    margin-top: 1.75em;
}

#main .form dl {
    border-top: 1px solid #eaeaea;
    display: table;
    width: 100%;
}

#main .form dl dd,
#main .form dl dt {
    display: table-cell;
}

#main .form dl dt {
    box-sizing: border-box;
    width: 40%;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    padding: 0.875em 0;
}

#main .form dl dt span {
    display: inline-block;
    width: 12.5em;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5em;
    padding-right: 1.75em;
}

#main .form dl dt small.mark {
    background: #01afec;
    display: inline-block;
    width: 4em;
    height: 16px;
    font-size: 62.5%;
    color: #fff;
    text-align: center;
    text-indent: 0;
    vertical-align: middle;
    line-height: 16px;
    margin: 0;
}

#main .form dl dd {
    box-sizing: border-box;
    width: 60%;
    padding: 1.25em 0 1.25em 1.25em;
}

#main .form dl dd ul li {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5em;
    margin-right: 1em;
    padding: 0.25em 0;
}

/*#main .form dl dd ul li:nth-child(1) {
margin-left:0;
}*/

#main .form dl dd input {
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
    font-size: 100%;
    line-height: 1.25em;
    padding: 4px 6px;
}

#main .form dl dd label {
    cursor: pointer;
    line-height: 1.25em;
    vertical-align: middle;
    padding: 0 0 0 0.5em;
}

#main .form dl dd textarea {
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
    font-size: 100%;
    line-height: 1.25em;
    padding: 4px 6px;
}

#main .form dl dd span.brk {
    font-size: 87.5%;
    margin-top: 1em;
}

input[type="password"],
input[type="text"],
textarea {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
}

.input25 {
    width: 25%;
}

.input75 {
    width: 75%;
}

.input50 {
    width: 50%;
}

.input75 {
    width: 75%;
}

.input100 {
    width: 100%;
}

#btn {
    text-align: center;
    margin-top: 3.75em;
}

#btn input[type="submit"] {
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    background: #01afec;
    cursor: pointer;
    width: 18.75em;
    height: 4.375em;
    font-size: 100%;
    color: #fff;
    line-height: 4.375em;
}

#footer {
    background: #fff;
    text-align: center;
    margin-top: 0.625em;
    padding: 1.25em 0;
}

#footer #address {
    font-size: 75%;
}

p#rule {
    font-size: 87.5%;
    text-align: center;
    margin-bottom: 0.5em;
}

ol.numList {
    margin-top: 1em;
    padding-left: 1.25em;
    margin-left: 1em;
}

ol.numList:nth-child(1) {
    margin-top: 0;
}

ol.numList li,
ul.nodiscList li {
    line-height: 1.75em;
}

ol.numList li {
    list-style: decimal outside none;
    margin-top: 0.25em;
    padding-left: 0.5em;
    line-height: 1.75em;
}

ul.nodiscList li {
    list-style: none;
}

ol.numList li dl {
    margin-bottom: 0.5em;
}

ul.nodiscList li dl {
    padding-left: 1.25em;
}

ol.numList li dl dt,
ul.nodiscList li dl dt {
    margin-bottom: 0.5em;
}

/* ────────────────────────────────────────────────────────── SP */

@media only screen and (max-width: 750px) {
    #pageId {
        font-size: 150%;
    }

    #key {
        display: block;
    }

    #headline,
    #keyv {
        display: block;
        width: 100%;
    }

    #keyv {
        text-align: center;
    }

    #keyv img {
        width: 100%;
        max-width: 750px;
    }

    #headline {
        box-sizing: border-box;
        font-size: 100%;
        text-align: center;
        padding: 0.75em 1em;
    }

    #menu {
        margin-top: 1em;
        padding-bottom: 1em;
    }

    #menu li {
        /*display:block;*/
        width: auto;
        text-align: center;
        line-height: 1.25em;
    }

    #menu li a {
        display: block;
        padding: 0.5em 1em;
    }

    #menu li a:before {
        border-bottom: 2px solid #01afec;
    }

    #menu li a:hover:before {
        border-bottom: 2px solid #01afec;
    }

    #menu li a:after {
        border-bottom: 2px solid #01afec;
    }

    #menu li a:hover:after {
        border-bottom: 2px solid #01afec;
    }

    #main .form dl {
        display: block;
    }

    #main .form dl dd,
    #main .form dl dt {
        display: block;
    }

    #main .form dl dt {
        width: 100%;
        padding-bottom: 0;
    }

    #main .form dl dt span {
        display: inline;
        width: auto;
        padding-right: 1em;
    }

    #main .form dl dt small.mark {
        vertical-align: middle;
    }

    #main .form dl dd {
        width: 100%;
        padding-left: 0;
    }

    #main .form dl dd ul li {
        margin-right: 0.5em;
    }

    #main .form select {
        font-size: 100%;
    }
}