@charset "utf-8";

/* Global Styles */

body {
    word-break: break-word;
    color: #333333;
    font-family: Hiragino kaku Gothic Pro, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Styles */

header {
    padding: 8px 12px;
    border-bottom: 1px solid #eeeeee;
}

header img {
    top: 8px;
    left: 12px;
    width: 84px;
    height: 26px;
    opacity: 1;
}

/* Main Content Styles */

#main {
    display: flex;
    justify-content: center;
    margin: 40px 35px auto 35px;
}

.content {
    max-width: 640px;
}

#main h2 {
    padding-bottom: 20px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    font-family: Hiragino kaku Gothic ProN, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}

@media (max-width: 320px) {
    .content-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

#main h3 {
    margin: 40px auto 0;
}

#main p {
    font-size: 11px;
    padding-bottom: 5px;
    font-weight: 300;
    font-family: Hiragino kaku Gothic ProN, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    text-align: justify;
}

#main h3 + p {
    margin-top: 8px;
}

#main img {
    margin: 20px auto;
}

#main ol {
    max-width: 500px;
    font-size: 11px;
    margin: 0 0 0;
    padding-left: 12px;
}

#main li {
    padding-bottom: 5px;
    font-weight: 300;
    font-family: Hiragino kaku Gothic ProN, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}

/* Footer Styles */

footer {
    padding: 20px 39px 19px;
    border-top: 1px solid #eeeeee;
    text-align: center;
}

footer h3 {
    font-size: 16px;
    padding: 0px 41px;
    font-weight: 300;
}

footer p {
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 300;
}

footer a {
    color: #999999;
    opacity: 1;
}

/* Utility Styles */

.doclink {
    padding: 0;
    color: #999999;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 300;
}

.pgsupport {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    height: 44px;
    max-width: 300px;
    margin: 14px 1px 8px;
    background: #333333;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
    font-weight: 300;
}

.pgsupport:hover {
    box-shadow: 0px 9px 9px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}

.pgsupport i {
    content: url(../img/ic_mail.svg);
    width: 16px;
    height: 13px;
    margin-right: 6px;
    vertical-align: middle;
}

.pgsupport a {
    width: 84px;
    height: 14px;
}

.copy {
    padding: 20px 0 0;
    color: #999999CC;
    font-size: 10px;
    font-weight: 300;
}

.footer-button {
    display: flex;
    justify-content: center;
}

.href {
    padding-left: 19px;
    padding-right: 29px;
}

.href a:first-child {
    padding-right: 8px;
}