.maker { position: relative; padding: 0; width: 100%; height: auto; background-color: #391a0d; z-index: 200; }

.maker_frame_box { position: relative; padding: 22.5px 0 320px; width: 100%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; }

.maker_frame { margin: 0 auto; padding: 0 0 4%; position: relative; width: 90%; background-color: #fff; border: 2px solid #000; }

.maker_frame .maker_title { margin: 4% auto; width: 89%; border: 2px solid #000; }

.maker_frame .maker_title input { margin: 0; padding: 2% 0; border: none; width: 100%; text-align: center; vertical-align: middle; line-height: 48px; font-size: 24px; font-family: 'Rounded Mplus 1c'; }

.maker_frame .maker_title .visile_text { position: absolute; top: 0; left: 0; height: 0; overflow: hidden; line-height: 0; font-size: 12px; visibility: hidden; font-family: 'Rounded Mplus 1c'; }

.maker_frame div { position: relative; margin: 0 auto 4%; padding: 51.8% 0 0; width: 90%; height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #000; }

.maker_frame div:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 100% auto; pointer-events: none; }

.maker_frame div.no1:before { background-image: url(/shironekoproject/4komamaker/assets/img/maker/koma01_default.png); }

.maker_frame div.no2:before { background-image: url(/shironekoproject/4komamaker/assets/img/maker/koma02_default.png); }

.maker_frame div.no3:before { background-image: url(/shironekoproject/4komamaker/assets/img/maker/koma03_default.png); }

.maker_frame div.no4:before { background-image: url(/shironekoproject/4komamaker/assets/img/maker/koma04_default.png); }

.maker_frame div.no1[data-state='on']:before, .maker_frame div.no2[data-state='on']:before, .maker_frame div.no3[data-state='on']:before, .maker_frame div.no4[data-state='on']:before { background-image: none; }

.maker_frame div span { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: hidden; }

.maker_frame div span[data-is-upload="true"] { pointer-events: auto; }

.maker_frame div span[data-is-upload="true"] img { -webkit-transition: all 10ms ease-out; -o-transition: all 10ms ease-out; transition: all 10ms ease-out; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; }

.maker_frame div span.layer1 { z-index: 202; }

.maker_frame div span.layer2 { z-index: 201; pointer-events: none; }

.maker_frame div span.layer3 { z-index: 203; pointer-events: none; }

.maker_frame div span img { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }

.maker_frame div span canvas { cursor: -webkit-grab; cursor: grab; }

.maker_frame[data-current-edit-koma="no1"] div.no1, .maker_frame[data-current-edit-koma="no2"] div.no2, .maker_frame[data-current-edit-koma="no3"] div.no3, .maker_frame[data-current-edit-koma="no4"] div.no4 { border-color: #fa3f8a; }

.maker_menu { position: fixed; bottom: 0; left: 50%; padding: 0 0 0; width: 500px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10000; z-index: 1000; }

.maker_menu .maker_menu_main { position: absolute; bottom: 0; left: 0; width: 100%; height: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-size: auto 50%; background-repeat: repeat-x; background-position: center bottom; background-image: url(/shironekoproject/4komamaker/assets/img/maker/footer_nav_bg.png); z-index: 11; }

.maker_menu .maker_menu_main li { width: 108px; height: 90px; }

.maker_menu .maker_menu_main li button { width: 100%; height: 100%; vertical-align: bottom; }

.maker_menu .maker_menu_main li button img { width: 100%; }

.maker_menu .maker_menu_sub { position: absolute; top: 57px; left: 0; width: 100%; height: 260px; background-color: rgba(77, 54, 22, 0.9); border-top: 2px solid #FD8F0C; z-index: 10; -webkit-transition: all 400ms ease-out; -o-transition: all 400ms ease-out; transition: all 400ms ease-out; }

.maker_menu .maker_menu_sub[data-state="on"] { top: -260px; }

.maker_menu .maker_menu_sub > li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; }

.maker_menu .maker_menu_sub > li.menu_sub_item[data-is-edit="false"].maker_menu_sub-list .menu_sub_upload_image_edit { display: none; }

.maker_menu .maker_menu_sub > li.menu_sub_item[data-is-edit="false"].maker_menu_sub-list .menu_sub_thumb_list { display: block; }

.maker_menu .maker_menu_sub > li.menu_sub_item[data-is-edit="true"] .maker_menu_sub-list .menu_sub_upload_image_edit { display: block; }

.maker_menu .maker_menu_sub > li.menu_sub_item[data-is-edit="true"] .maker_menu_sub-list .menu_sub_thumb_list { display: none; }

.maker_menu .maker_menu_sub > li h3 { position: absolute; top: -59px; width: 118px; height: 57px; }

.maker_menu .maker_menu_sub > li h3 button { position: relative; width: 100%; height: 100%; overflow: hidden; }

.maker_menu .maker_menu_sub > li h3 button img { position: absolute; top: -58px; width: 100%; }

.maker_menu .maker_menu_sub > li h3 button:hover img { top: 0; }

.maker_menu .maker_menu_sub > li.menu_sub_item h3 { left: 0; }

.maker_menu .maker_menu_sub > li.menu_sub_bg h3 { left: 118px; }

.maker_menu .maker_menu_sub > li.menu_sub_e h3 { left: 236px; }

.maker_menu .maker_menu_sub > li.menu_sub_close h3 { width: 57px; right: 0; }

.maker_menu .maker_menu_sub > li.menu_sub_close h3 button img { top: 0; height: 100%; }

.maker_menu .maker_menu_sub > li div { display: none; }

.maker_menu .maker_menu_sub > li[data-state="on"] { z-index: 100; }

.maker_menu .maker_menu_sub > li[data-state="on"] h3 button img { top: 0; }

.maker_menu .maker_menu_sub > li[data-state="on"] div { display: block; }

.maker_menu .maker_menu_sub .maker_menu_sub-list { position: relative; width: 100%; height: 100%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_btn_upload { position: absolute; top: 10px; left: 8px; display: inline-block; padding: 0 0 0; width: 34%; height: 46px; background-size: 100% auto; background-repeat: no-repeat; background-image: url(/shironekoproject/4komamaker/assets/img/maker/btn_upload.png); cursor: pointer; z-index: 1002; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_btn_upload input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_btn_delete_image { position: absolute; top: 10px; left: 8px; display: inline-block; padding: 0 0 0; width: 34%; height: 46px; opacity: 0; z-index: 1001; pointer-events: none; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_btn_delete_image img { width: 100%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_btn_delete_image[data-state="on"] { opacity: 1; z-index: 1003; pointer-events: auto; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_select_page { position: absolute; top: 10px; right: 4px; display: inline-block; padding: 4px; width: 156px; height: 47px; font-size: 20px; vertical-align: top; background-color: #fff; z-index: 1001; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .maker_select_page[data-state="off"] { display: none; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_upload_image_edit { display: none; position: absolute; top: 70px; left: 0; width: 100%; z-index: 1010; text-align: center; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_upload_image_edit .menu_sub_upload_image_edit_box { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; width: 90%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_upload_image_edit button { width: 10%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_upload_image_edit button img { width: 100%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_upload_image_edit input[type="range"] { display: inline-block; padding: 10px 0; width: 80%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_thumb_list { position: relative; padding: 13.6% 0 1%; width: 100%; overflow-y: hidden; overflow-x: auto; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_thumb_list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 6px; width: 280%; height: 100%; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_thumb_list ul li { margin: 0 0 0 10px; width: 130px; height: 76px; border: 1px solid rgba(255, 255, 255, 0.3); background-color: rgba(180, 180, 180, 0.3); }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_thumb_list ul li button { width: 130px; height: 76px; }

.maker_menu .maker_menu_sub .maker_menu_sub-list .menu_sub_thumb_list ul li button img { width: 100%; height: 100%; pointer-events: none; }

article.result { position: relative; width: 500px; background-color: #391a0d; z-index: 100; }

article.result[data-state="on"] { display: block; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }

article.result h1 img { width: 100%; }

article.result .result_content { padding: 5% 5%; background-position: center top, center bottom, center center; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 100% auto, 100% auto, 100% 99%; background-image: url(/shironekoproject/4komamaker/assets/img/maker/frame_top.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_bottom.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_middle.png); }

article.result .result_content h2 img { width: 100%; }

article.result .result_content .result_box { margin: 0 auto; padding: 5% 0; width: 80%; }

article.result .result_content .result_box img { width: 100%; height: auto; }

article.result .result_content .result_text { padding: 4px; color: #790e0a; font-size: 14px; font-weight: bold; line-height: 1.4; }

article.result .result_content .result_caution { padding: 0 2%; font-size: 12px; }

article.result .result_content .result_caution li { color: #790e0a; line-height: 1.4; padding: 4px; }

article.result .top_btn_restart { margin: 5% auto; width: 90%; }

article.result .top_btn_restart img { width: 100%; }

@media only screen and (max-width: 768px) { .maker_frame_box { padding: 0 0 68vw; }
  .maker_frame_box .maker_frame { margin: 0 auto; }
  .maker_frame_box .maker_frame .maker_title input { font-size: 5vw; }
  .maker_menu { padding: 0 0 0; width: 100%; }
  .maker_menu .maker_menu_main { height: 18vw; }
  .maker_menu .maker_menu_main li { width: 21.6vw; height: 18vw; }
  .maker_menu .maker_menu_sub { top: 11.6vw; height: 47vw; }
  .maker_menu .maker_menu_sub[data-state="on"] { top: -56vw; }
  .maker_menu .maker_menu_sub > li h3 { top: -12vw; width: 24vw; height: 11.6vw; }
  .maker_menu .maker_menu_sub > li h3 button img { top: -11.6vw; }
  .maker_menu .maker_menu_sub > li.menu_sub_item h3 { left: 0; }
  .maker_menu .maker_menu_sub > li.menu_sub_bg h3 { left: 24vw; }
  .maker_menu .maker_menu_sub > li.menu_sub_e h3 { left: 48vw; }
  .maker_menu .maker_menu_sub > li.menu_sub_close h3 { width: 11.6vw; right: 0; }
  .maker_menu .maker_menu_sub > li.menu_sub_close h3 img { height: 100%; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list { position: relative; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_upload_image_edit { top: 14vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_upload_image_edit input[type="range"]::-webkit-slider-thumb { width: 5vw; height: 5vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .maker_btn_upload { top: 2vw; left: .8vw; width: 38vw; height: 11vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .maker_btn_delete_image { top: 2vw; left: .8vw; width: 38vw; height: 11vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .maker_select_page { top: 2vw; right: .8vw; width: 40vw; height: 10vw; font-size: 4.2vw; border-width: 2px; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .maker_select_page[data-state="off"] { display: none; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_thumb_list { padding: 15vw 0 3vw; -webkit-overflow-scrolling: touch; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_thumb_list ul { padding: 0 4vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_thumb_list ul li { margin: 0 3vw 0 0; width: 30vw; height: 17.6vw; }
  .maker_menu .maker_menu_sub > li .maker_menu_sub-list .menu_sub_thumb_list ul li button { width: 30vw; height: 17.6vw; }
  article.result { width: 100%; } }

/*# sourceMappingURL=maker.css.map */