body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    *font-size: medium;
    *font: small;
    _font-size: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
    font-size: 100%;
    font-weight: normal;
    font-style: normal;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    color: #51257a
}

p.error {
    font-size: 13px !important;
    font-weight: bold;
    /*display: none;*/
    margin: -4px 0 4px 0;
    padding: 0;
    color: #f00;
}

div,
th,
td {
    box-sizing: border-box;
}

.disc li {
    list-style-type: disc;
    margin: 0 0 0 1.5em;
}

.pc {
    display: none;
}

/* ----------interaction---------- */

.accordion,
.accordion-open {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hidden,
.accordion-contents {
    display: none;
}

/* ----------btn---------- */

a.btn::before,
a.btn::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

a.btn,
a.btn::before,
a.btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

a.btn {
    font-size: 140%;
    font-weight: 700;
    line-height: 60px;
    position: relative;
    display: block;
    height: 60px;
    margin: 0 5vw 12px 5vw;
    -webkit-transition: none;
    transition: none;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    background-color: #5e343d;
}

a.btn.negative {
    background-color: #CCC;
    margin: 0 5vw 16px 5vw;
}

div.btn {
    padding: 16px 0 0;
    text-align: center;
}

/* ----------base---------- */

.body {
    background-color: #dfe0e3;
    padding: 0 0 2vw 0;
    background: #dfe0e3;
}

p.lead {
    padding: 16px
}

/* ----------header---------- */

.header {
}

/* ----------form---------- */

#form {
    background: #fff;
    border: 2px solid #5e343d;
    box-sizing: border-box;
    margin: 0 5vw 5vw;
    padding: 0 0 8px;
}

#form .required-notice {
    padding: 8px 0;
    text-align: center;
}

#form .required {
    color: red;
}

#form h2 {
    background: #5e343d;
    color: #fff;
    font-size: 120%;
    font-weight: 700;
    padding: 8px 4px 8px;
    text-align: center;
}

#form h3 {
    font-weight: 700;
    margin: 16px 0 8px 0;
}

#form .directions {
    margin: 0 0 16px 0;
}

#form .pp {
    border: 1px solid #CCC;
    margin: 0 20px 20px;
    padding: 10px;
}

#form .pp h3 {
    font-weight: 700;
    margin: 8px 0 0 0;
}

#form .pp p {
    margin: 12px 8px 8px;
}

#form .pp-apply {
    background: #fffcda;
    font-weight: 700;
    text-align: center;
}

/* ----------input---------- */

#form input.mail,
#form input.address {
    box-sizing: border-box;
    width: 100%;
    box-sizing: border-box;
}

#form input.name {
    width: 40%;
}

#form input.postalcode1 {
    width: 3em;
}

#form input.postalcode2 {
    width: 4em;
}

#form input.tel {
    width: 25%;
}

#form .quiz input {
    width: 2em;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

#form input.text {
    border: 1px solid #ccc;
    font-size: 140%;
    padding: 6px;
    box-sizing: border-box;
}

#form input.serial-text {
    font-size: 10vw !important;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
}

/* ----------table---------- */

#form table {
    border-collapse: collapse;
    width: 100% !important;
}

#form th {
    background: #f1f1f1;
    padding: 3vw 5vw;
    text-align: left;
    vertical-align: top;
    display: block;
}

#form td {
    box-sizing: border-box;
    display: block;
    padding: 5vw;
    width: 100%;
}

#form table.addresstable {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

#form table.addresstable th {
    background: none;
    border: none;
    font-size: 100%;
    padding: 4px 0;
    vertical-align: middle;
}

#form .addresstable td {
    border: none;
    padding: 0 0 4px;
    vertical-align: middle;
}

/* ----------serial---------- */

#form .serial-input {
    margin: 0;
    position: relative;
}

#form .serial-input li {
    border-bottom: 1px solid #e6e6e6;
    margin: 0 0 8px 0;
    padding: 0 0 8px 0;
}

#form .serial-input li:last-child {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

#form .serial-input li span {
    display: block;
    font-size: 12px;
}

#form .serial-input .serial-image {
    text-align: center;
    padding: 16px 0;
}

#form .serial-input .serial-image img {
    width: 80%;
}

#form .serial-input .answer {
    font-size: 200%;
    font-weight: 700;
    margin: -8px 0 -8px 0;
}

/* ----------store---------- */

#form .store ul {
    list-style-type: none;
    margin: 0;
}

#form .store ul li {
    list-style-type: none;
    margin: 0 0 16px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid #CCC;
}

#form .store ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#form .store ul li strong {
    font-size: 110%;
}

#form .store ul li ul {
    margin: 8px 0 0 0;
}

#form .store ul li ul li {
    border-bottom: none;
    margin: 8px 0 0 0;
    padding: 0 0 0 0;
}

#form .store ul li ul li input.text {
    width: 100%;
}

#form .store .answer {
    display: block;
    margin: 0 0 16px 0;
    font-weight: 700;
}

#form .store li:last-child .answer {
    margin: 0 0 0 0;
}

/* ----------prize---------- */

#form .prize {
    margin: 16px 16px 0 0;
}

#form .prize li {
    margin: 0 0 8px 0;
    margin: 0 0 8px 0;
    margin-left: 1.8em;
    text-indent: -1.8em;
}

#form .prize-table tr {
    width: 100%;
}

#form .prize-table td {
    border: none;
    display: table-cell;
    padding: 4px 0 4px 0;
    width: 25%;
    text-align: right;
}

#form .prize-table tr td:first-child {
    width: 75%;
    text-align: left;
}

/* ----------enquete---------- */

#form .enquete .choice {
    margin: 16px 0 0 0;
}

#form .enquete .answer {
    margin: 8px 0 0 0;
}

#form .enquete ul li {
    margin: 0 0 8px 0;
    margin-left: 1.8em;
    text-indent: -1.8em;
}

#form .enquete .answer ul li {
    margin-left: 0;
    text-indent: 0;
}

.enquete ol > li {
    padding: 0 0 12px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid #eedbdf;
}

.enquete ol > li:last-child {
    border-bottom: none;
    margin: 0 0 0 0;
}

p.question {
    font-size: 110%;
    font-weight: 700;
    margin: 0 0 8px 0;
}

p.question {
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 8px 0;
}

/* ----------quiz---------- */

.quiz {
    background: #fffcd9;
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 16px;
    position: relative;
}

.quiz.quiz_answer {
    margin: 16px 0 8px 0;
}

/* ----------information---------- */

footer {
    padding: 3vw 5vw 5vw 5vw;
    margin: 0 0 0 0;
    background: #FFF;
}

footer p.approval {
    font-size: 2vw;
    margin: 0 0 5vw 0;
    color: #999;
}

footer img {
    width: 20vw;
}

footer p {
    font-size: 2vw;
    font-weight: 400;
    margin: 5vw 0 0 0;
}

p.note {
    font-size: 12px;
}

.clear {
    zoom: 1
}

.clear:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '';
}

.inquiry {
    text-align: left;
    color: #000;
    margin: 24px auto 0 auto;
}

.inquiry .inquiry_title {
    font-weight: 700;
}

.inquiry p {
    margin: 2vw 0 0 0;
    font-size: 13px;
}

.main {
    box-sizing: border-box;
    padding: 0 0;
    margin: 0 0 5vw 0;
    background: #FFF;
    text-align: center;
}

.main img {
    width: 90%;
}

.qr_main {
    box-sizing: border-box;
    padding: 0 0;
    margin: 0 0 5vw 0;
    text-align: center;
}

.qr_main img {
    width: 100%;
}

.thanks {
    padding: 5vw
}

.gift p {
    text-align: left;
}

.gift {
    text-align: left;
}

.gift_guide {
    margin: -24px 0 0 0;
}

.gift .code {
    background: #EEE;
    font-size: 140%;
    font-weight: 700;
    margin: 24px 0;
    padding: 16px;
    text-align: center
}

.gift .num {
    list-style-type: decimal;
    margin: 12px 0 0 32px
}

.gift .value {
    font-size: 80%;
    font-weight: 400;
    line-height: 1;
    margin: 8px 0 0
}

.gift a {
    color: #d83358;
    text-decoration: none
}

.gift h3 {
    font-weight: 700;
    margin: 24px 0 0
}

.gift-image {
    border-bottom: 1px solid #CCC;
    margin: 16px 0;
    padding: 16px 0;
    text-align: center
}

.gift-notice {
    display: block;
    font-size: 60%;
    font-weight: 400;
}

.thanks p.note {
    margin: 8px 0 0 0;
}

.howto .ejoica,
.howto .nanaco,
.howto .edy,
.howto .waon {
    border: 1px solid #EEE;
    padding: 0 8px 8px 8px;
    border-radius: 8px;
    margin: 5vw 0 0 0;
}

.howto .waon {
    margin-bottom: 5vw;
}

.howto h3 {
    color: #69ac36;
    border-bottom: 2px solid #69ac36;
    padding: 8px;
    line-height: 1.4;
    font-size: 18px;
    margin: 0 0 0 0;
}

.howto .image {
    text-align: center;
    padding: 16px;
}

.howto .image img {
    width: 100%;
}

.howto .ejoica h4 {
    background: #69ac36;
    color: #FFF;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .ejoica h5 {
    background: #ffeb02;
    color: #333;
    font-size: 13px;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .ejoica p {
    color: #333;
    font-size: 13px;
    padding: 16px 16px;
}

.howto .nanaco h4 {
    background: #ff8200;
    color: #FFF;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .nanaco h5 {
    background: #ffed27;
    color: #333;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .nanaco p {
    color: #333;
    font-size: 13px;
    padding: 16px 16px;
}

.howto .edy h4 {
    background: #0e0046;
    color: #FFF;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .edy h5 {
    background: #00a0e9;
    color: #FFF;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .edy p {
    color: #333;
    font-size: 13px;
    padding: 16px 16px;
}

.howto .waon h4 {
    background: #e93102;
    color: #FFF;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .waon h5 {
    background: #2ca3db;
    color: #FFF;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin: 16px 0 0 0;
}

.howto .waon p {
    color: #333;
    font-size: 13px;
    padding: 16px 16px;
}

.accordion span {
    display: block;
    background: url(../images/arrow_bottom.png) no-repeat right center;
    background-size: 12px auto;
    padding: 0 24px 0 0;
    line-height: 1.4;
}

.accordion-open span {
    display: block;
    background: url(../images/arrow_up.png) no-repeat right center;
    background-size: 12px auto;
    padding: 0 24px 0 0;
    line-height: 1.4;
}

.howto .ejoica h4 {
    margin: -8px -8px 0 -8px;
    padding: 8px 16px;
    border-radius: 4px 4px 0 0;
}

.howto .nanaco h4.accordion,
.howto .edy h4.accordion,
.howto .waon h4.accordion {
    margin: -8px;
    padding: 8px 16px;
}

.howto .nanaco h4.accordion-open,
.howto .edy h4.accordion-open,
.howto .waon h4.accordion-open {
    margin: -8px -8px 0 -8px;
    padding: 8px 16px;
    border-radius: 4px 4px 0 0;
}

.ejoica_guide {
    text-align: center;
    margin: 10vw 5vw 10vw 5vw;
}

.ejoica_guide p {
    margin-top: 5vw;
}