html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input {
    box-sizing: border-box;
}

html {
    background-color: #fff;
}
body {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    font-family: sans-serif;
    line-height: 1.4em;
    color: #333;
    -webkit-text-size-adjust: 100%;
}
header .headerTop {
    display: table;
    width: 100%;
    height: 30px;
    padding: 12px;
    background-color: #fff;
    border-bottom: none;
    box-sizing: border-box;
    position: relative;
}
header .headerTop .logo {
    display: table-cell;
    vertical-align: bottom;
}
header .headerTop .logo img {
    max-width: 100px;
}
header .headerTop a {
    display: table-cell;
    width: 7em;
    padding: 3px 7px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #f64e82;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-bottom: #eee 1px solid;
}
nav ul {
    width: 100%;
    margin: 2px 10px 7px 5px;
    overflow: hidden;
}
nav ul li {
    display: inline-block;
    margin: 0 1px 0 0;
}
nav ul li a {
    display: block;
    padding: 3px 15px;
    background-color: #EEE;
    color: #333;
    font-size: 11px;
    text-decoration: none;
}
footer {
    padding: 10px;
    background-color: #333;
}
footer p.copyright {
    font-size: 10px;
    font-family: Verdana, "sans-serif";
    color: #888888;
    text-align: center;
}
#main {
    padding: 0 10px 15px;
}
#main h2 {
    margin: 0 -10px 15px;
    padding: 10px;
    background-color: #222;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
#main h3 {
    font-size: 15px;
}
#main p.direction {
    margin: 0 0 15px;
    font-size: 13px;
}
#main p.caution {
    margin: 0 0 15px;
    font-size: 13px;
    color: #EE0000;
}
#main p.completion {
    font-size: 15px;
    font-weight: bold;
}
#main p.blankTop {
    margin-top: 15px;
}
#main p.blankBottom {
    margin-bottom: 50px;
}
input.full {
    width: 100%;
}
input[type="text"] {
    height: 36px;
    margin: 0 0 15px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    color: #333;
}
button {
    position: relative;
    margin: 15px 0 0;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
button.full {
    width: 100%;
}
button.half {
    float: left;
    width: 48%;
    margin: 5px 0 0;
    padding: 7px;
    font-size: 14px;
}
button.half:last-child {
    float: right;
}
.radius4 {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.bgP {
    background-color: #f64e82;
}
.bgG {
    background-color: #3bbbb6;
}
.whiteTextBgG {
    color: #ffffff;
    background-color: #3bbbb6;
}
.bgDis {
    background-color: #d2d2d2;
}
.bgWbdP {
    background-color: #fff;
    border: 2px solid #f64e82;
    color: #f64e82;
}
.bgWbdG {
    background-color: #fff;
    border: 2px solid #3bbbb6;
    color: #3bbbb6;
}
.bgDisBdGray {
    background-color: #fff;
    border: 2px solid #d2d2d2;
    color: #d2d2d2;
}
.arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -4px 0 0;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.arrow.right:after {
    right: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow.left:after {
    left: 10px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.arrow.pink:after {
    border-top: 2px solid #f64e82;
    border-right: 2px solid #f64e82;
}
.arrow.green:after {
    border-top: 2px solid #3bbbb6;
    border-right: 2px solid #3bbbb6;
}
.arrow.gray:after {
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}
.arrow.void:after {
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
}
.arrow.white:after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.arrow.bgDisBdGray:after {
    border-top: 2px solid #d2d2d2;
    border-right: 2px solid #d2d2d2;
}
.void {
    color: #ccc;
}

/* js無効時, cookie無効時のメッセージ */
.invalidJsMsg,
#invalidCookieMsg {
    color: #e03131;
    padding: 10px;
    margin: 10px;
    font-size: 75%;
    border: 1px solid #fbc4c4;
    background: #fef0f0;
    line-height: 1.6;
}
.invalidJsMsg {
     display: none;
}

/* float control */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}

/* Hides from IE-mac */
*html.clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}