@import url(https://fonts.googleapis.com/css?family=Pacifico|Fredericka+the+Great|Great+Vibes|Shadows+Into+Light+Two|Roboto+Slab:400,300,700|League+Script|Parisienne|Tangerine:400,700);
@charset "UTF-8";
/*-- Google Fonts インポート */
/* フッターのボタン隠す */
.float-foote {
  display: none;
}

html,
body,
.wrap {
  height: 100%;
  overflow: hidden;
}

/*-- iOS用の勝手便利機能をOFF --*/
* {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

/*-- Canvasの選択・タップ時のハイライトをOFF --*/
canvas {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*-- 文字の選択をできないようにする --*/
body {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.wrap {
  /* background-image: url(../img/bg_deco.png); */
  background-size: 320px auto;
  background-repeat: repeat-y;
  background-position: center top;
  position: relative;
}

/* リサイズオーバーアラート */
.over_alert {
  display: none;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 5px 10px;
  background-color: rgba(255, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}

.over_alert.show {
  display: inline-block;
  z-index: 1;
}

.wrap_canvas {
  width: 100%;
  height: 100%;
  background-color: rgba(170, 170, 170, 0.3019607843);
  /* 初期化完了まで見えなくしておく */
  opacity: 0;
}

/* 初期化完了後は、見えるように */
.wrap_canvas.inited {
  opacity: 1;
  background-color: rgba(170, 170, 170, 0.3019607843);
}

/*--- PC/TABモード ---*/
body.pc_mode .wrap {
  background-size: 520px auto;
}

/*--- PC/TABモード ---*/
.drawUI,
.commandBtn,
.memberMenuBtn {
  display: block;
  width: 100%;
  height: 80px;
  background-color: #222;
  /* background-image: url(../img/dark_wood.png); */
  background-repeat: repeat;
  position: fixed;
  bottom: 0;
  opacity: 0.9;
  /*   z-index: 2;   */
}

.drawUI li {
  width: 20%;
  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;
  text-align: center;
  list-style: none;
}

.commandBtn li,
.memberMenuBtn li {
  width: 20%;
  height: 100%;
  float: left;
  text-align: center;
  list-style: none;
  border-right: 1px solid #555;
}

.commandBtn li:last-child,
.memberMenuBtn li:last-child {
  border: none;
}

.drawUI li:last-child {
  border: none;
  background-color: #e5ef6b !important;
}

.drawUI li img {
  width: 43px;
}

.drawUI li span,
.commandBtn li span,
.memberMenuBtn li span {
  display: block;
  margin-top: 8px;
  font-size: 10px;
}

.drawUI li a,
.commandBtn li a,
.memberMenuBtn li a {
  position: relative;
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.drawUI li a.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.drawUI li a span.finish {
  color: #222;
}

.deco-ti {
  font-size: 16px;
  color: #222;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 52px;
  z-index: 2;
  width: 50%;
}

#fileInput {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.memberMenuBtn {
  padding: 5px;
  width: auto;
  height: auto;
  left: 10px;
  bottom: 90px;
  border: 1px solid #aaa;
  font-size: 80%;
}

.memberMenuBtn li {
  width: 40px;
  height: 40px;
}

.memberMenuBtn li img {
  height: 25px;
}

.memberMenuBtn li span {
  margin-top: 4px;
}

.commandBtn {
  padding: 5px;
  width: auto;
  height: auto;
  right: 10px;
  bottom: 90px;
  border: 1px solid #aaa;
  font-size: 80%;
}

.commandBtn.hide {
  display: none;
}

.commandBtn .buttonReedit.hide {
  display: none;
}

.commandBtn li {
  width: 40px;
  height: 40px;
}

.commandBtn li img {
  height: 25px;
}

.commandBtn li span {
  margin-top: 4px;
}

/* canvas */
#main_canvas {
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: block;
}

#overlay_canvas {
  background-color: rgba(34, 32, 0, 0);
  display: block;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}

#temp_canvas {
  width: 500px;
  height: 500px;
  background-color: #fff;
  display: block;
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}

.message {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 5px 10px;
  font-weight: bold;
  line-height: 150%;
  font-size: 1vw;
  color: #7d7d7d;
  white-space: nowrap;
}

.history-box ul li img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 85px;
  height: 85px;
  border: 1px solid #e3e3e3;
}

.history-box ul li {
  width: 85px;
  margin: 5px;
  height: auto;
}

@media screen and (max-width: 479px) {
  .message {
    top: 10%;
    font-size: 3vw; /* 赤色 */
  }
}
.img_history {
  width: 100%;
}

/* stamp */
.show_stamp .wrap {
  visibility: hidden;
  /* 	opacity: 0; */
  transition: 0.2s;
}

.show_stamp .stamp_wrapper.stamp {
  top: 0%;
  visibility: visible;
}

.show_frame .stamp_wrapper.frame {
  top: 0%;
  visibility: visible;
}

.show_history .stamp_wrapper.history {
  top: 0%;
  visibility: visible;
}

.stamp_wrapper {
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 0.2s;
  background: #fff;
  visibility: hidden;
}

h3 {
  text-align: center;
  color: #222;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

h3 span {
  font-family: "DIN Condensed", sans-serif;
  font-size: 22px;
  font-weight: normal;
}

.event-ti {
  color: #a9924c;
}

.block_stamp {
  width: 320px;
  margin: 0 auto;
  height: 100%;
}

.block_stamp ul {
  height: 76%;
  width: 325px;
  margin: 20px auto 0 auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.box_stamp {
  z-index: 2;
  background-color: #fff;
}

.box_stamp .cf {
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #e5e5e5;
}

.btn_back img {
  display: block;
  width: 32px;
  margin-top: 20px;
  margin-left: 284px;
  z-index: 1;
}

.stamp_wrapper ul {
  padding: 8px;
}

.stamp_wrapper ul li {
  width: 60px;
  height: 60px;
  float: left;
  margin: 6px;
}

.stamp_wrapper ul li img {
  width: 60px;
}

::-webkit-scrollbar {
  width: 10px;
  box-shadow: none !important;
}

::-webkit-scrollbar-track {
  background: #eee;
  border: none;
  border-radius: 10px;
  box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
  box-shadow: none !important;
}

/* サムネールを背景画像化 */
.stamp_wrapper ul li a {
  display: block;
  width: 60px;
  height: 60px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  /*background-size: 1600% 1200%;*/
}

.stamp_wrapper.frame ul li.no_bg_image a {
  background-image: none;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* テキスト設定 */
.show_text .wrap {
  /*visibility:hidden;*/
  opacity: 0;
  transition: 0.2s;
}

.show_text #text_wrapper {
  visibility: visible;
  top: 0%;
}

.deco-ti-txt {
  width: 320px !important;
  display: block !important;
  margin: 0 auto;
  margin-bottom: 10px;
}

.deco-ti-txt .deco-ti {
  text-align: center;
  position: relative;
  top: 30px;
  z-index: 2;
}

.deco-ti-txt .btn_back-t img {
  display: block;
  width: 32px;
  position: relative;
  left: 90%;
  z-index: 100;
}

#text_wrapper {
  width: 360px;
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 3%);
  transition: 0.2s;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.85);
  visibility: hidden;
}

#text_wrapper > div {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#text_wrapper .text_input_wrap {
  position: relative;
  width: 100%;
  height: 70px;
  /*--box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);--*/
}

#text_wrapper .text_input {
  display: table;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#text_wrapper .text_input .text_row {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 1px solid #aaa;
  vertical-align: middle;
}

#text_wrapper .text_input .text_row input {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 25px 0 0;
  border: none;
  font-size: 18px;
  outline: 0;
}

#text_wrapper #text_clear {
  position: absolute;
  display: block;
  top: 50%;
  right: 15px;
  margin-top: -13px;
  padding-top: 7px;
  width: 50px;
  height: 26px;
  color: #fff;
  font-size: 14px;
  background-color: #999;
  border-radius: 5px;
  /*--background-image: url('../img/text_clear.png');--*/
  background-size: 100% 100%;
}

.text_contents {
  display: block;
  width: 100%;
  height: 80%;
  margin: 20px auto 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/*-- Webフォント定義 --*/
@font-face {
  font-family: "anzu";
  src: url("/fonts/anzu.eot"); /* IE9 Compat Modes */
  src: url("/fonts/anzu.eot?#iefix") format("embedded-opentype"), url("/fonts/anzu.woff") format("woff"), url("/fonts/anzu.ttf") format("truetype"), url("/fonts/anzu.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "ranobepop";
  src: url("/fonts/ranobepop.eot"); /* IE9 Compat Modes */
  src: url("/fonts/ranobepop.eot?#iefix") format("embedded-opentype"), url("/fonts/ranobepop.woff") format("woff"), url("/fonts/ranobepop.ttf") format("truetype"), url("/fonts/ranobepop.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "logoTypeGothic";
  src: url("/fonts/logoTypeGothic.eot"); /* IE9 Compat Modes */
  src: url("/fonts/logoTypeGothic.eot?#iefix") format("embedded-opentype"), url("/fonts/logoTypeGothic.woff") format("woff"), url("/fonts/logoTypeGothic.ttf") format("truetype"), url("/fonts/logoTypeGothic.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "bebasneue";
  src: url("/fonts/bebasneue.eot"); /* IE9 Compat Modes */
  src: url("/fonts/bebasneue.eot?#iefix") format("embedded-opentype"), url("/fonts/bebasneue.woff") format("woff"), url("/fonts/bebasneue.ttf") format("truetype"), url("/fonts/bebasneue.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
/*-- Webフォント使用クラス --*/
.anzu {
  font-family: "anzu";
}

.ranobepop {
  font-family: "ranobepop";
}

.logoTypeGothic {
  font-family: "logoTypeGothic";
}

.Pacifico {
  font-family: "Pacifico";
}

.Fredericka_the_Great {
  font-family: "Fredericka the Great";
}

.Great_Vibes {
  font-family: "Great Vibes";
}

.Shadows_Into_Light_Two {
  font-family: "Shadows Into Light Two";
}

.Parisienne {
  font-family: "Parisienne";
}

.Tangerine_700 {
  font-family: "Tangerine";
  font-weight: 700;
}

.Roboto_Slab_700 {
  font-family: "Roboto Slab";
  font-weight: 700;
}

#text_wrapper .font_select {
  position: relative;
  width: 100%;
  height: auto;
  border-left-width: 0;
  border-right-width: 0;
}

#text_wrapper .font_select ul {
  display: block;
  margin: 0 auto;
  padding: 0 10px;
  width: 94.5%;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px dotted #aaa;
  border-bottom: 1px dotted #aaa;
}

#text_wrapper .font_select ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.select_font {
  font-weight: bold;
  margin-top: 15px !important;
  padding: 0px 5px !important;
  border-left: 2px solid #999;
}

#text_wrapper .font_select ul li input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#text_wrapper .font_select ul li label {
  display: block;
  widows: 100%;
  padding: 10px 10px;
  color: #000;
  font-size: 18px;
  border-bottom: 1px solid #999;
}

#text_wrapper .font_select ul li:last-child label {
  border: none;
}

#text_wrapper .font_select ul li input:checked + label {
  background-color: #ddd;
}

#text_wrapper .group {
  position: relative;
  padding-top: 15px;
  border: none;
  color: #fff;
}

/*--------------------------------------------------------------------*/
#text_wrapper .group .color_select {
  width: 90%;
  height: 200px;
  margin: 0 auto 10px auto;
}

#text_wrapper .group .color_select #colorPicker {
  width: 100%;
  height: 100%;
  position: relative;
}

#color_histories_label {
  width: 360px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  color: #222;
  font-weight: bold;
}

#color_histories_label p {
  padding: 0px 5px !important;
  border-left: 2px solid #999;
}

#color_histories {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: flex;
}

#color_histories .color_history {
  width: 40px;
  height: 40px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
}

#text_wrapper .group .color_select #colorPicker .track {
  background-color: #efefef;
  background-image: url("../img/pallete.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: crosshair;
  display: block !important;
}

#text_wrapper .group .color_select #colorPicker .track canvas {
  border: 1px solid #999;
}

#text_wrapper .group .color_select #colorPicker .color {
  width: 25px;
  height: 25px;
  padding: 4px;
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  z-index: 11;
  background-color: #efefef;
  border-radius: 27px;
  cursor: pointer;
  top: 80px;
  left: 60px;
  margin-top: -12px;
  margin-left: -12px;
  pointer-events: none;
}

#text_wrapper .group .color_select #colorPicker .colorInner {
  width: 15px;
  height: 15px;
  border-radius: 27px;
  border: 1px solid #aaa;
}

/*--------------------------------------------------------------------*/
#text_wrapper .group .buttons a {
  display: inline-block;
  margin: 5px 0 15px 0;
  width: 12em;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

#text_wrapper .group .buttons a#text_cancel {
  background-color: #999;
  border-radius: 5px;
}

#text_wrapper .group .buttons a#text_ok {
  background-color: #01b528;
  border-radius: 5px;
}

#text_wrapper .group .buttons a#text_ok.disable {
  opacity: 0.7;
  pointer-events: none;
}

#text_wrapper .group .buttons a:first-child {
  margin-right: 30px;
}

/* preview */
.show_preview .wrap {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.show_preview #preview_wrapper {
  visibility: visible;
  top: 0%;
}

#preview_wrapper {
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 0.2s;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /*
  background-color: #222;
  background: rgba(0,0,0, 0.85);
  */
  visibility: hidden;
}

#preview_wrapper ul {
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #222;
  /* background-image: url(../img/dark_wood.png); */
  background-repeat: repeat;
  opacity: 0.9;
}

#preview_wrapper li {
  width: 50%;
  float: left;
  text-align: center;
  border-right: 1px solid rgba(225, 225, 225, 0.3);
}

#preview_wrapper li:last-child {
  border: none;
}

#preview_wrapper .back_deco {
  padding-top: 10px;
}

#preview_wrapper ul li img {
  width: 43px;
}

#preview_wrapper ul li span {
  display: block;
  margin-top: 8px;
  line-height: 17px;
  font-size: 10px;
}

#preview_wrapper ul li a {
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

#submitImg {
  /* 	邪魔なので飛ばす */
  position: absolute;
  top: 0;
  left: 0;
}

.waiting {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.4);
}

.waiting.show_waiting {
  visibility: visible;
}

.waiting #loaderImage {
  position: absolute;
  width: 64px;
  height: 49px;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -24.5px;
  background-image: url("../img/waiting.png");
}