p {
  margin: 0;
}

figure {
  position: relative;
  max-width: 754px;
  /* width: 540px; */
  /* height: 100%; */
}

figure img {
  /* max-width: 100%; */
  vertical-align: top;
}

/* #blend_color {
  width: 540;
  height: 153px;
  position: absolute;
  background: #0bd
  background-blend-mode: overlay;
} */

#text_preview {
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  position: absolute;
  top: 25px;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
}

#text_preview_photo {
  /* font-size: 2rem; */
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  top: 23%;
  left: -18%;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  /* color: #fff; */
  /* text-shadow: -1px -1px 1px #777, 1px 1px #ffffff; */
}

#text_preview_photo_back {
  /* font-size: 2rem; */
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  top: -3%;
  left: 16%;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  /* color: #fff; */
  /* text-shadow: -1px -1px 1px #777, 1px 1px #ffffff; */
  transform: rotate(13deg);
  -moz-transform: rotate(13deg);
  -webkit-transform: rotate(13deg);
}

#text_preview_photo span{
  margin-right: 0.2rem;
}

#three_base {
  /* position: relative; */
}

#three_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  mix-blend-mode: multiply;
}

/* #text_line {
  position: absolute;
  top: 25px;
  display: flex;
  width: 1000px
  height: 100px;
  margin: 0;
  align-items: center;
  justify-content: center;
} */



/* .decoratedParts input:checked + .decorate::before{
  color: #1375ba;
}
.decoratedParts input[type="checkbox"] + .decorate::before{
  content: "\f0c8";
}
.decoratedParts input[type="checkbox"]:checked + .decorate::before{
  content: "\f14a";
}
.decoratedParts .disabled input[type="checkbox"]{
  color: #aaa;
}
.decoratedParts .disabled input[type="checkbox"] + .decorate::before{
  content: "\f146";
}
.decoratedParts input[type="radio"] + .decorate::before{
  content: "\f111";
}
.decoratedParts input[type="radio"]:checked + .decorate::before{
  content: "\f192";
} */


.to_brightred {
  background-color: rgb(255,50,23);
}
.to_brightred_text {
  color: rgb(255,50,23);
  /* text-shadow: -1px -1px 1px rgb(209, 35, 22), 1px 1px rgb(255, 106, 96); */
}
.to_red {
  background-color: rgb(211,3,1);
}
.to_red_text {
  color: rgb(211,3,1);
  /* text-shadow: -1px -1px 1px rgb(163, 3, 0), 1px 1px rgb(196, 88, 86); */
}
.to_hotpink {
  background-color: rgb(253,0,143);
}
.to_hotpink_text {
  color: rgb(253,0,143);
  /* text-shadow: -1px -1px 1px rgb(197, 0, 112), 1px 1px rgb(255, 80, 179); */
}
.to_pink {
  background-color: rgb(250,152,153);
}
.to_pink_text {
  color: rgb(250,152,153);
  /* text-shadow: -1px -1px 1px rgb(187, 113, 115), 1px 1px rgb(253, 203, 204); */
}
.to_yellow {
  background-color: rgb(254,236,2);
}
.to_yellow_text {
  color: rgb(254,236,2);
  /* text-shadow: -1px -1px 1px rgb(185, 173, 1), 1px 1px rgb(255, 246, 123); */
}
.to_lightyellow {
  background-color: rgb(252,255,48);
}
.to_lightyellow_text {
  color: rgb(252,255,48);
  /* text-shadow: -1px -1px 1px rgb(183, 185, 47), 1px 1px rgb(253, 255, 138); */
}
.to_orange {
  background-color: rgb(254,101,0);
}
.to_orange_text {
  color: rgb(254,101,0);
  /* text-shadow: -1px -1px 1px rgb(194, 78, 0), 1px 1px rgb(255, 150, 81); */
}
.to_orangered {
  background-color: rgb(255,72,2);
}
.to_orangered_text {
  color: rgb(255,72,2);
  /* text-shadow: -1px -1px 1px rgb(184, 52, 0), 1px 1px rgb(255, 116, 62); */
}
.to_mintgreen {
  background-color: rgb(5,166,158);
}
.to_mintgreen_text {
  color: rgb(5,166,158);
  /* text-shadow: -1px -1px 1px rgb(4, 121, 115), 1px 1px rgb(38, 194, 186); */
}
.to_aqua {
  background-color: rgb(11,150,189);
}
.to_aqua_text {
  color: rgb(11,150,189);
  /* text-shadow: -1px -1px 1px rgb(9, 111, 139), 1px 1px rgb(38, 180, 219); */
}
.to_navy {
  background-color: rgb(5,48,126);
}
.to_navy_text {
  color: rgb(5,48,126);
  /* text-shadow: -1px -1px 1px rgb(4, 33, 87), 1px 1px rgb(26, 84, 194); */
}
.to_royalblue {
  background-color: rgb(0,82,180);
}
.to_royalblue_text {
  color: rgb(0,82,180);
  /* text-shadow: -1px -1px 1px rgb(0, 54, 121), 1px 1px rgb(25, 115, 226); */
}
.to_lightblue {
  background-color: rgb(113,177,215);
}
.to_lightblue_text {
  color: rgb(113,177,215);
  /* text-shadow: -1px -1px 1px rgb(75, 124, 153), 1px 1px rgb(163, 218, 250); */
}
.to_darkgreen {
  background-color: rgb(4,81,61);
}
.to_darkgreen_text {
  color: rgb(4,81,61);
  /* text-shadow: -1px -1px 1px rgb(5, 63, 48), 1px 1px rgb(14, 139, 106); */
}
.to_green {
  background-color: rgb(52,157,56);
}
.to_green_text {
  color: rgb(52,157,56);
  /* text-shadow: -1px -1px 1px rgb(35, 100, 37), 1px 1px rgb(99, 202, 102); */
}
.to_olive {
  background-color: rgb(105,149,2);
}
.to_olive_text {
  color: rgb(105,149,2);
  /* text-shadow: -1px -1px 1px rgb(75, 107, 0), 1px 1px rgb(153, 209, 24); */
}
.to_limegreen {
  background-color: rgb(144,212,5);
}
.to_limegreen_text {
  color: rgb(144,212,5);
  /* text-shadow: -1px -1px 1px rgb(94, 139, 4), 1px 1px rgb(183, 250, 50); */
}
.to_neongreen {
  background-color: rgb(96,227,71);
}
.to_neongreen_text {
  color: rgb(96,227,71);
  /* text-shadow: -1px -1px 1px rgb(49, 138, 32), 1px 1px rgb(129, 247, 105); */
}
.to_orchid {
  background-color: rgb(164,147,183);
}
.to_orchid_text {
  color: rgb(164,147,183);
  /* text-shadow: -1px -1px 1px rgb(125, 108, 145), 1px 1px rgb(209, 193, 228); */
}
.to_purple {
  background-color: rgb(108,43,173);
}
.to_purple_text {
  color: rgb(108,43,173);
  /* text-shadow: -1px -1px 1px rgb(83, 33, 133), 1px 1px rgb(148, 72, 224); */
}
.to_brown {
  background-color: rgb(72,35,17);
}
.to_brown_text {
  color: rgb(72,35,17);
  /* text-shadow: -1px -1px 1px rgb(41, 20, 10), 1px 1px rgb(139, 72, 38); */
}
.to_black {
  background-color: rgb(0,0,0);
}
.to_black_text {
  color: rgb(0,0,0);
  /* text-shadow: -1px -1px 1px rgb(0,0,0), 1px 1px rgb(51, 51, 51); */
}
.to_gunmetalgray {
  background-color: rgb(103,104,109);
}
.to_gunmetalgray_text {
  color: rgb(103,104,109);
  /* text-shadow: -1px -1px 1px rgb(69, 69, 73), 1px 1px rrgb(151, 152, 158) */
}
.to_silver {
  background-color: rgb(156,156,156);
}
.to_silver_text {
  color: rgb(156,156,156);
  /* text-shadow: -1px -1px 1px rgb(99, 99, 99), 1px 1px rgb(212, 212, 212); */
}
.to_white {
  background-color: rgb(255,255,255);
}
.to_white_text {
  color: rgb(255,255,255);
  /* text-shadow: -1px -1px 1px rgb(170, 170, 170), 1px 1px rgb(255,255,255); */
}
.to_sand {
  background-color: rgb(175,163,125);
}
.to_sand_text {
  color: rgb(175,163,125);
  /* text-shadow: -1px -1px 1px rgb(117, 109, 83), 1px 1px rgb(231, 215, 163); */
}
.to_maroon {
  background-color: rgb(109,25,58);
}
.to_maroon_text {
  color: rgb(109,25,58);
  /* text-shadow: -1px -1px 1px rgb(65, 14, 34), 1px 1px rgb(182, 54, 105); */
}
.to_glowinthedark {
  background-color: rgb(165, 165, 165);
}


/* フォント指定 */
#text_preview_photo[data-font="j1"],
#text_preview_photo_back[data-font="j1"]
{
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: bold;
}
#text_preview_photo[data-font="j2"],
#text_preview_photo_back[data-font="j2"]
{
  font-family: noto-sans-cjk-jp, sans-serif;
}


@media screen and (max-width: 750px) {

  #text_preview_photo,
  #text_preview_photo_back {
    font-size: 24px;
  }

}

@media screen and (max-width: 580px) {

  #text_preview_photo,
  #text_preview_photo_back {
    font-size: 16px;
  }

}