@charset "UTF-8";
@import url("https://use.typekit.net/zyf6pgh.css");
#qrcode img, #qrcode canvas, .success > img, .error > img, .thanx > img, .readymsg > img, .closemsg > img { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }

html { font-size: 16px; }

body { background-color: #FFF; font-family: -apple-system, BlinkMacSystemFont, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }

body, h1, h2, h3, h4, ul, li, dl, dt, dd, figure, form, blockquote { margin: 0; padding: 0; }

img { vertical-align: bottom; }

h1 { text-align: center; }
h1 img { width: 100%; max-width: 640px; }

section { max-width: 640px; min-height: 50vh; margin: 0 auto; position: relative; }

.btnbox, .imgwrap { display: block; margin-left: 4.6875vw; margin-right: 4.6875vw; }
.btnbox img, .imgwrap img { width: 100%; }

.aligncenter { text-align: center; }
.aligncenter img { width: 320px; height: auto; vertical-align: bottom; }
.aligncenter img.w290 { width: 290px; margin-bottom: 10px; }

.bgc { background-color: #fbf2e4; }

#ticket { padding: 10px; }

#qrcode { padding: 10px; }

#admin-wrap { padding: 0 0 25px; }

#admin { height: 0; background-color: #391a1a; color: #FFF; overflow: hidden; transition: 0.8s; box-sizing: border-box; opacity: 0; }
#admin form { text-align: center; padding: 15px; }
#admin.open { opacity: 1; height: auto; padding: 15px; }
#admin .gifted_caution { margin-bottom: 1em; }

#adminbtn { display: block; text-align: center; }
#adminbtn span { font-size: 0.938rem; display: inline-block; min-width: 180px; background-color: #fff; border: 4px solid #B3B3B3; line-height: 2; }
#adminbtn span::after { content: 'お渡し完了'; }

#copyright { color: #000; text-align: center; padding: 2em 0 1.5em; font-size: 0.625rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] { box-sizing: border-box; width: 100%; height: 2.4em; line-height: 2.4em; border: 1px solid #b3b3b3; border-radius: 5px; font-size: 1rem; padding: 0 5px; -webkit-appearance: none; }

input::placeholder { color: #aaa; }

input[type="date"] { width: auto; min-width: 8em; }

input[type="submit"] { -webkit-appearance: none; }

select { box-sizing: border-box; width: 100%; line-height: 1.6em; font-size: 0.875rem; appearance: none; /* Safari, Chrome */ -webkit-appearance: none; /* iOS Safari */ -moz-appearance: none; /* Firefox */ background-color: white; border: 1px solid #b3b3b3; padding: 8px 36px 8px 12px; border-radius: 4px; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2,2 6,5 10,2' fill='none' stroke='gray' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
select:focus { outline: none; border-color: #666; }

textarea { box-sizing: border-box; width: 100%; height: 5em; }

button { appearance: none; margin-top: 10px; padding: 8px 8px; font-size: 16px; border-bottom-width: 2px; min-width: 160px; border: 1px solid #666; background-color: #EEE; color: #333; }

#email, #emailre, #tel-national, #postal-code { ime-mode: disabled; }

.fontmini { font-size: 0.75em; }

.stdbtn { font-size: 1.25rem; font-weight: bold; background-color: #F00; border-radius: 5px; line-height: 40px; height: 40px; color: #FFF; text-decoration: none; display: inline-block; border: none; }

h3 { margin-bottom: 15px; }

form { padding: 0 15px; font-size: 0.875rem; }
form dt { margin-bottom: 0.5em; }
form dd { margin-bottom: 1em; }
form dd p { margin: 0 0 1em; font-size: 0.75rem; }
form dd label { display: block; text-align: center; }

#game_next { display: none; text-align: center; }
#game_next button { appearance: none; }

#present { display: none; padding: 20px 0; text-align: center; }
#present .imgwrap { margin-top: 35px; margin-bottom: 35px; }
#present img { width: 100%; max-width: 320px; height: auto; }
#present .prize_photo { margin-bottom: 20px; }
#present p { font-size: 0.875rem; margin: 0; }
#present .present_caution { font-size: 1.063rem; color: #F00; font-weight: bold; }

#wchance { display: none; }
#wchance h3 { margin-left: 4.6875vw; margin-right: 4.6875vw; }
#wchance img { width: 100%; height: auto; }
#wchance .btnbox { margin-top: 9.375vw; }

body.scratched #scratch canvas { display: none; }
body.scratched #game_next, body.scratched #present, body.scratched #wchance { display: block; }

body.gifted #scratch::after { display: block; content: ""; position: absolute; width: 100%; height: 240px; background: url(../imagesja/done.png) center top no-repeat; background-size: auto 240px; left: 0; right: 0; top: 0; bottom: 0; }
body.gifted #admin { display: none; }
body.gifted #adminbtn span { background-color: #B3B3B3; color: #FFF; }
body.gifted #adminbtn span::after { content: '商品交換済'; }

body.losing #present { display: none; }

.lead { font-size: 1.063rem; line-height: 1.17; padding: 0.5em 0; }

.success, .error, .thanx, .readymsg, .closemsg { padding: 0 15px; }
.success > p, .error > p, .thanx > p, .readymsg > p, .closemsg > p { padding: 15px 0; }

.error > p { color: #FF0000; }
.error .errbackbtn { text-align: center; }
.error .errbackbtn a::after { content: "- BACK -"; }

#game_next, #game_end { text-align: center; padding-top: 20px; }
#game_next a img, #game_end a img { width: 60%; height: auto; }

.scratched #game_next { filter: grayscale(100%) opacity(40%); pointer-events: none; }
.scratched.losing #game_next, .scratched.gifted #game_next { filter: none; pointer-events: auto; }

#coin { font-family: mic-32-new-rounded-web, sans-serif; font-weight: 700; font-style: normal; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; position: absolute; line-height: 1.45; z-index: 1; text-align: right; top: 0; right: 0; padding-top: 0.3em; padding-right: 0.5em; background-image: url(../images/coinbgs.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; box-sizing: border-box; }

#ticket ul, .enq_form ul, .entry_form ul, .yesno_form ul { list-style: none; }
#ticket label, .enq_form label, .entry_form label, .yesno_form label { text-align: left; }
#ticket .form_dd_q1 ul, #ticket .form_dd_q2 ul, #ticket .form_dd_q3 ul, .enq_form .form_dd_q1 ul, .enq_form .form_dd_q2 ul, .enq_form .form_dd_q3 ul, .entry_form .form_dd_q1 ul, .entry_form .form_dd_q2 ul, .entry_form .form_dd_q3 ul, .yesno_form .form_dd_q1 ul, .yesno_form .form_dd_q2 ul, .yesno_form .form_dd_q3 ul { display: flex; flex-wrap: wrap; }
#ticket .form_dd_q1 ul li, #ticket .form_dd_q2 ul li, #ticket .form_dd_q3 ul li, .enq_form .form_dd_q1 ul li, .enq_form .form_dd_q2 ul li, .enq_form .form_dd_q3 ul li, .entry_form .form_dd_q1 ul li, .entry_form .form_dd_q2 ul li, .entry_form .form_dd_q3 ul li, .yesno_form .form_dd_q1 ul li, .yesno_form .form_dd_q2 ul li, .yesno_form .form_dd_q3 ul li { margin-right: 1em; }
#ticket input[type="email"], #ticket input[type="tel"], #ticket input[type="number"], #ticket .p-postal-code, .enq_form input[type="email"], .enq_form input[type="tel"], .enq_form input[type="number"], .enq_form .p-postal-code, .entry_form input[type="email"], .entry_form input[type="tel"], .entry_form input[type="number"], .entry_form .p-postal-code, .yesno_form input[type="email"], .yesno_form input[type="tel"], .yesno_form input[type="number"], .yesno_form .p-postal-code { ime-mode: disabled; }
#ticket .btnbox, .enq_form .btnbox, .entry_form .btnbox, .yesno_form .btnbox { text-align: center; }
#ticket fieldset, .enq_form fieldset, .entry_form fieldset, .yesno_form fieldset { background-color: #fff; padding: 10px; border: 0 none; border-bottom: 1px solid #000; }
#ticket input[type="submit"], .enq_form input[type="submit"], .entry_form input[type="submit"], .yesno_form input[type="submit"] { border-radius: 5px; padding: 5px 10px; line-height: 1.2; background-color: #EEE; color: #333; border: 1px solid #666; }
#ticket button, .enq_form button, .entry_form button, .yesno_form button { background-color: #0181C7; color: #FFF; border: 0 none; }
#ticket.entry_form button, .enq_form.entry_form button, .entry_form.entry_form button, .yesno_form.entry_form button { background-color: #82a35d; }
#ticket .entry_lead, .enq_form .entry_lead, .entry_form .entry_lead, .yesno_form .entry_lead { width: 100%; height: auto; }
#ticket button.buttonback, .enq_form button.buttonback, .entry_form button.buttonback, .yesno_form button.buttonback { min-width: 80px; margin-right: 20px; background-color: #FFF; color: #555; border: 1px solid #777; padding: 7px 8px; }
#ticket input[data-etc], .enq_form input[data-etc], .entry_form input[data-etc], .yesno_form input[data-etc] { width: 12em; height: 1.4em; line-height: 1.4em; }
#ticket .required label, .enq_form .required label, .entry_form .required label, .yesno_form .required label { display: inline; }
#ticket .required::after, .enq_form .required::after, .entry_form .required::after, .yesno_form .required::after { content: "必須"; display: inline-block; font-size: 0.7rem; background-color: #E72E19; color: #FFF; margin-left: 15px; padding: 0.3em 0.5em; line-height: 1; vertical-align: top; }
#ticket .formlist > dt, .enq_form .formlist > dt, .entry_form .formlist > dt, .yesno_form .formlist > dt { font-size: 1.125rem; font-weight: bold; color: #22296E; }
#ticket .formlist > dd, .enq_form .formlist > dd, .entry_form .formlist > dd, .yesno_form .formlist > dd { padding-left: 1em; }
#ticket .formlist > dd dt, .enq_form .formlist > dd dt, .entry_form .formlist > dd dt, .yesno_form .formlist > dd dt { font-size: 1rem; font-weight: bold; color: #373A3C; }
#ticket .form_dd_q11 ul, #ticket .form_dd_q12 ul, #ticket .form_dd_q21 ul, #ticket .form_dd_q31 ul, #ticket .form_dd_q32 ul, #ticket .form_dd_q33 ul, .enq_form .form_dd_q11 ul, .enq_form .form_dd_q12 ul, .enq_form .form_dd_q21 ul, .enq_form .form_dd_q31 ul, .enq_form .form_dd_q32 ul, .enq_form .form_dd_q33 ul, .entry_form .form_dd_q11 ul, .entry_form .form_dd_q12 ul, .entry_form .form_dd_q21 ul, .entry_form .form_dd_q31 ul, .entry_form .form_dd_q32 ul, .entry_form .form_dd_q33 ul, .yesno_form .form_dd_q11 ul, .yesno_form .form_dd_q12 ul, .yesno_form .form_dd_q21 ul, .yesno_form .form_dd_q31 ul, .yesno_form .form_dd_q32 ul, .yesno_form .form_dd_q33 ul { display: flex; flex-wrap: wrap; align-items: center; }
#ticket .form_dd_q11 ul li, #ticket .form_dd_q12 ul li, #ticket .form_dd_q21 ul li, #ticket .form_dd_q31 ul li, #ticket .form_dd_q32 ul li, #ticket .form_dd_q33 ul li, .enq_form .form_dd_q11 ul li, .enq_form .form_dd_q12 ul li, .enq_form .form_dd_q21 ul li, .enq_form .form_dd_q31 ul li, .enq_form .form_dd_q32 ul li, .enq_form .form_dd_q33 ul li, .entry_form .form_dd_q11 ul li, .entry_form .form_dd_q12 ul li, .entry_form .form_dd_q21 ul li, .entry_form .form_dd_q31 ul li, .entry_form .form_dd_q32 ul li, .entry_form .form_dd_q33 ul li, .yesno_form .form_dd_q11 ul li, .yesno_form .form_dd_q12 ul li, .yesno_form .form_dd_q21 ul li, .yesno_form .form_dd_q31 ul li, .yesno_form .form_dd_q32 ul li, .yesno_form .form_dd_q33 ul li { margin-bottom: 0.5em; }
#ticket .form_dd_q11 li, #ticket .form_dd_q12 li, .enq_form .form_dd_q11 li, .enq_form .form_dd_q12 li, .entry_form .form_dd_q11 li, .entry_form .form_dd_q12 li, .yesno_form .form_dd_q11 li, .yesno_form .form_dd_q12 li { min-width: 20%; }
#ticket .form_dd_q32 li, .enq_form .form_dd_q32 li, .entry_form .form_dd_q32 li, .yesno_form .form_dd_q32 li { min-width: 33.3%; }
#ticket .form_dd_q21 li, .enq_form .form_dd_q21 li, .entry_form .form_dd_q21 li, .yesno_form .form_dd_q21 li { min-width: 50%; }
#ticket .form_dd_q31 li, #ticket .form_dd_q33 li, .enq_form .form_dd_q31 li, .enq_form .form_dd_q33 li, .entry_form .form_dd_q31 li, .entry_form .form_dd_q33 li, .yesno_form .form_dd_q31 li, .yesno_form .form_dd_q33 li { margin-right: 1em; }
#ticket .form_dd_q40 input, .enq_form .form_dd_q40 input, .entry_form .form_dd_q40 input, .yesno_form .form_dd_q40 input { width: 6em; margin-right: 5px; }
#ticket .form_dd_prof_gender ul, .enq_form .form_dd_prof_gender ul, .entry_form .form_dd_prof_gender ul, .yesno_form .form_dd_prof_gender ul { display: flex; }
#ticket .form_dd_prof_gender ul li, .enq_form .form_dd_prof_gender ul li, .entry_form .form_dd_prof_gender ul li, .yesno_form .form_dd_prof_gender ul li { margin-right: 1em; }
#ticket #prof_age, .enq_form #prof_age, .entry_form #prof_age, .yesno_form #prof_age { width: 5em; }
#ticket #prof_zip, .enq_form #prof_zip, .entry_form #prof_zip, .yesno_form #prof_zip { width: 8em; }
#ticket input[type="email"].email-input + input[type="email"].email-input, .enq_form input[type="email"].email-input + input[type="email"].email-input, .entry_form input[type="email"].email-input + input[type="email"].email-input, .yesno_form input[type="email"].email-input + input[type="email"].email-input { margin-top: 8px; }

.yesno_form .attbox { display: flex; position: relative; width: 260px; margin: 0 auto 35px; padding: 0; border: 0 none; }
.yesno_form .attbox input[type=radio] { display: none; }
.yesno_form .attbox label { width: 130px; height: 90px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #311810; font-family: "Times New Roman", Times, serif; }
.yesno_form .attbox #maru { position: absolute; display: none; width: 130px; height: 90px; }
.yesno_form .attbox .st0 { fill: none; stroke-miterlimit: 10; stroke: rgba(0, 0, 0, 0.8); stroke-dasharray: 2000; stroke-dashoffset: 0; stroke-width: 3px; }
.yesno_form .attbox.animeon #maru { display: block; }
.yesno_form .attbox.animeon .st0 { animation: hello 2.5s ease-in 0s; }

.yesno_form .emailbox { display: none; border: 1px solid #999; }
.yesno_form .emailbox.active { display: block; }
.yesno_form .emailbox input[type="email"] { box-sizing: border-box; width: 100%; }
.yesno_form .emailbox .form_dt_privacyagreement { margin-top: 2em; }
.yesno_form .emailbox .privacy-agreement { margin-bottom: 0; }

@keyframes hello { 0% { stroke-dashoffset: 2000; fill: transparent; }
  100% { stroke-dashoffset: 0; } }
.privacy-agreement { margin: 0.75em 0 2.5em; }
.privacy-agreement h4 { font-size: 1rem; }
.privacy-agreement blockquote { height: 300px; overflow: auto; margin-bottom: 1.5em; border: #cccccc 1px solid; box-sizing: border-box; padding: 10px; scrollbar-width: thin; }
.privacy-agreement ol { padding-left: 1.5em; }
.privacy-agreement li { font-size: 0.75rem; }
.privacy-agreement ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }

@media (max-width: 400px) { .enq_form .formlist > dd { padding-left: 0; }
  .enq_form .form_dd_q11 li { min-width: 25%; }
  .enq_form .form_dd_q12 li { min-width: 33.3%; }
  .enq_form .form_dd_q32 li { min-width: 50%; }
  .enq_form .form_dd_q21 li { min-width: auto; } }
#scratch { position: relative; background: url(../imagesja/scratchbg.png) center top no-repeat; background-size: 320px 270px; min-height: 270px; }
#scratch .scratchpad { width: 240px; height: 240px; margin: 0 auto; background-repeat: no-repeat; background-size: auto 240px; }

#scratchpad { z-index: 2; }

#scratch-main { background: #F00 url(../imagesja/bg.png) center calc(50% + 30px) no-repeat; min-height: 500px; }
#scratch-main .scratch_title { padding: 30px 0 30px; text-align: center; }
#scratch-main .scratch_title img { width: 320px; height: auto; vertical-align: bottom; }

#bodymovin { -webkit-touch-callout: none; -webkit-user-select: none; user-select: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; width: 100%; }

#btnrollgacha { position: absolute; background-size: cover; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; }
#btnrollgacha img { width: 100%; display: block; }

body.scratched #btnrollgacha { display: none; }

#gacha-main { position: relative; }

.error .errbackbtn a::after { content: "- 戻る -"; }