@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

ul, ol { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

#virtualBody { line-height: 1.5; -webkit-text-size-adjust: 100%; color: #e60012; font-size: 36%; }

#virtualBody * { box-sizing: border-box; }

#virtualBody p { margin: 0; font-size: 100%; }

#virtualBody a { text-decoration: none; color: #e60012; }

#virtualBody img { max-width: 100%; height: auto; vertical-align: bottom; }

#virtualBody li { list-style: none; }

#virtualBody .top-area { display: flex; justify-content: space-between; margin-top: 5.33333vw; }

#virtualBody .top-area_logo { width: 20vw; }

#virtualBody .top-area_button { width: 29.33333vw; }

#virtualBody .top-area_button a { display: inline-block; }

#virtualBody .cont-wrap { padding-top: 18.66667vw; background: #fbf1e0; }

#virtualBody .cont_title { margin-top: 10.66667vw; }

#virtualBody .frame-cont { padding: 0 0 13.33333vw; }

#virtualBody .c_cont-title { text-align: center; padding-bottom: 9.33333vw; font-size: 3.8em; font-weight: bold; position: relative; }

#virtualBody .c_cont-title:before { content: ""; display: block; position: absolute; right: 0; bottom: 4.8vw; left: 0; margin: auto; width: 95%; height: 4px; background: #f0ddc0; }

#virtualBody .frame-cont_text { margin-bottom: 6.66667vw; padding: 0 5.33333vw; font-size: 2.8em; line-height: 1.7; }

#virtualBody .roulette { width: 97.33333vw; padding: 0.8vw; margin: 0 auto; border-radius: 6px; background: #fff; position: relative; }

#virtualBody .roulette:before { content: ""; display: block; position: absolute; right: 4vw; bottom: 0; z-index: 1; margin: auto; width: 25.06667vw; height: 22.4vw; background: url(../img/pic_panda1.png) center 0/100% no-repeat; }

#virtualBody .roulette .text-wrap { margin-top: 10.66667vw; padding: 0 6.66667vw; }

#virtualBody .roulette_inner { padding: 6.66667vw 0vw 9.33333vw; border-radius: 6px; border: 2px solid #f7ebd8; }

#virtualBody .roulette_list { padding: 0 9.33333vw; }

#virtualBody .roulette_item { list-style: none; }

#virtualBody .roulette_item .title { padding-bottom: 1.33333vw; text-align: center; font-size: 4.7em; font-weight: bold; }

#virtualBody .roulette_item + .roulette_item { margin-top: 8vw; }

#virtualBody .c_border_text { padding: 4vw 6.66667vw; border-radius: 10px; border: 2px solid #e60012; font-size: 3.5em; font-weight: bold; }

#virtualBody .c_border_text span { text-align: right; display: inline-block; font-size: 12px; }

#virtualBody .c_border_text.top { position: relative; }

#virtualBody .c_border_text.top:before { content: ""; display: block; position: absolute; top: auto; right: 29.33333vw; bottom: -18px; margin: auto; width: 21px; height: 18px; background: url(../img/icon_hukidashi1.png) center 0/auto no-repeat; }

#virtualBody .c_border_text.bottom { text-align: left !important; position: relative; }

#virtualBody .c_border_text.bottom:before { content: ""; display: block; position: absolute; top: auto; right: 70px; bottom: -18px; margin: auto; width: 21px; height: 18px; background: url(../img/icon_hukidashi1.png) center 0/auto no-repeat; }

#virtualBody .experience { margin-top: 10.66667vw; }

#virtualBody .experience_item { text-align: center; width: 97.33333vw; margin: 0 auto; padding: 0.8vw; border-radius: 10px; background: #fff; }

#virtualBody .experience_item .inner { padding: 5.33333vw; border-radius: 10px; border: 2px solid #f7ebd8; }

#virtualBody .experience_item .title { text-align: left; display: flex; align-items: center; font-size: 3.2em; line-height: 1.6; font-weight: bold; }

#virtualBody .experience_item .title span:nth-of-type(1) { text-align: right; padding-right: 2.66667vw; }

#virtualBody .experience_item .title span:nth-of-type(1) img { width: 80%; }

#virtualBody .experience_item .text { display: inline-block; margin: 2.66667vw 0; padding: 2.66667vw 5.33333vw; font-size: 2.8em; line-height: 1.6; font-weight: bold; border: 2px solid #e60012; border-radius: 10px; }

#virtualBody .experience_item .image { margin: 0 auto; width: 70%; }

#virtualBody .experience_item .button { padding: 0 4vw; }

#virtualBody .experience_item .button a { display: block; padding: 5.33333vw 13.33333vw; border-radius: 100px; font-size: 2.8em; color: #fff; background: #e60012; }

#virtualBody .experience_item + .experience_item { margin-top: 6.66667vw; position: relative; }

#virtualBody .experience_item + .experience_item:before { content: ""; display: block; position: absolute; top: -9.33333vw; right: 0; left: 0; margin: auto; width: 11.6vw; height: 13.73333vw; background: url(../img/icon_arrow.png) center 0/100% no-repeat; }

#virtualBody .frame-area { display: none; margin-top: 6.66667vw; padding: 0 !important; width: 100% !important; border: none !important; }

#virtualBody .frame-area:before { content: ""; display: block; position: absolute; top: 80vw; right: 4vw; bottom: auto; z-index: 2; width: 24.26667vw; height: 28vw; background: url(../img/pic_panda2.png) center 0/100% no-repeat; }

#virtualBody .frame-area:after { content: ""; display: block; position: absolute; top: 4vw; right: 0; left: 0; margin: auto; z-index: 1; width: 30.4vw; height: 24.26667vw; background: url(../img/icon_stop.png) center 0/100% no-repeat; }

#virtualBody .frame-area .roulette_inner { padding: 22.66667vw 0 9.33333vw; }

#virtualBody .frame-area .c_border_text { text-align: left; padding: 4vw 6.66667vw; }

#virtualBody .frame-area .c_border_text.bottom:before { right: 33.33333vw; background-image: url(../img/icon_hukidashi1.png); }

#virtualBody .frame-area .roulette_list-wrap { position: relative; }

#virtualBody .frame-area .roulette_list-wrap:before, #virtualBody .frame-area .roulette_list-wrap:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; z-index: 2; width: 47px; height: 46px; margin: auto; background: url(../img/icon-arrow-mini.png) center 0/auto no-repeat; }

#virtualBody .frame-area .roulette_list-wrap:before { left: 0; transform: translateX(-10%); -webkit-transform: translateX(-10%); }

#virtualBody .frame-area .roulette_list-wrap:after { right: 0; transform: rotate(180deg) translateX(-10%); -webkit-transform: rotate(180deg) translateX(-10%); }

#virtualBody .frame-area .roulette_list { border: 8px solid #e60012; border-radius: 6px; }

#virtualBody .frame-area .text-wrap { padding: 0 6.66667vw; }

#virtualBody .frame-area .c_border_text { font-size: 17px; text-align: center; line-height: 1.6; }

#virtualBody .frame-area .sub-text { margin-top: 4vw; font-size: 2.4em; line-height: 1.7; }

#virtualBody .frame-area .button a { display: block; margin-top: 9.33333vw; padding: 3.46667vw 6.66667vw; border: 2px dashed #e60012; border-radius: 100px; font-size: 2.6em; font-weight: bold; position: relative; }

#virtualBody .frame-area .button a:before { content: ""; display: block; position: absolute; top: 0; right: 5.33333vw; bottom: 0; margin: auto; width: 5.73333vw; height: 3.46667vw; background: url(../img/icon_arrow-right.png) center 0/100% no-repeat; }

.output { text-align: center; }

.output_image { display: inline-block; position: relative; padding: 0 10.66667vw; }

.output_image.is-active { margin-top: 6vw; padding-top: 9vw; }

.output_image.is-active:before { content: "画像を長押しして保存してね！"; display: block; position: absolute; top: 0; right: 0; left: 0; margin: auto; font-size: 3em; font-weight: bold; }

.wrap { box-sizing: content-box !important; display: block; width: 100%; height: 56.25vw; margin: auto; overflow: hidden; position: relative; border-radius: 6px; }

.wrap { display: block; width: 90vw; height: 56.25vw; margin: auto; overflow: hidden; position: relative; border: 5px solid red; border-radius: 6px; }

.frame-wrap { display: flex; position: absolute; top: 0; width: 1350vw; transition: all 5.0s; -webkit-transition: -webkit-transform 5.0s; }

#myCanvas { display: inline-block; position: absolute; top: 5px; right: 0; left: 0; margin: 0 auto; width: 45vw; height: 56.25vw; margin-bottom: 20px; }

.frame { position: relative; z-index: 1; width: 45vw; height: 56.25vw; background: url(../img/frame_01-l.png) 0 0/cover no-repeat; }

.frame.pt2 { background-image: url(../img/frame_02-l.png); }

.frame.pt3 { background-image: url(../img/frame_03-l.png); }

.buttons { display: block; text-align: center; padding: 0 4vw; }

.wrap-more { position: absolute; top: 0; right: 0; left: 0; margin: 0 auto; }

.fileUpBtn { display: block; margin-bottom: 12px; padding: 5.33333vw 13.33333vw; border-radius: 100px; font-size: 2.8em; color: #fff; background: #e60012; }

.fileUpBtn:hover { opacity: .8; }

.fileUpBtn input { display: none; }

.is-disable { pointer-events: none; opacity: 0.5 !important; }

.sns { padding: 6.66667vw 5.33333vw; background: #ffe8ea; position: relative; }

.sns:before { content: ""; display: block; position: absolute; top: -4vw; right: 0; left: 0; margin: auto; width: 100%; height: 4vw; background: url(../img/bg_nami.png) center 0/contain no-repeat; }

.sns_inner { text-align: center; padding: 9.33333vw 4vw; border-radius: 6px; background: #fff; position: relative; position: relative; }

.sns_inner:before { content: ""; display: block; position: absolute; top: -6.66667vw; right: 4vw; margin: auto; width: 25.6vw; height: 27.06667vw; background: url(../img/panda-smp.png) center 0/100% no-repeat; }

.sns_inner .sns_image { width: 18.53333vw; margin: 0 auto; }

.sns_inner .sub_title { display: inline-block; margin-top: 30px; font-size: 1.1em; font-weight: bold; color: #e60012; position: relative; }

.sns_inner .sub_title:before { content: ""; display: block; position: absolute; top: -20vw; left: -6.66667vw; margin: auto; width: 23.2vw; height: 12.93333vw; background: url(../img/pic_okiniiri.png) center 0/100% no-repeat; }

.sns_inner .sns_text { margin: 4vw 0 0; padding: 0 5.33333vw; font-size: 1.1em; line-height: 1.5; color: #e60012; }

.sns_inner .sns_tag { margin: 5.33333vw 0; padding: 2.66667vw; border: 3px solid #e60012; border-radius: 8px; font-size: 1.3em; font-weight: bold; line-height: 2; color: #e60012; }

.sns_inner .sns_tag span + span { margin-left: 4vw; }

.sns_inner .sns_button { display: block; }

.sns_inner .sns_button_item { margin: 0 auto; width: 47.46667vw; }

.sns_inner .sns_button_item a { display: inline-block; }

.sns_inner .sns_foot-text { position: absolute; left: auto; top: 0; top: -4vw; right: 4vw; }