body {
	margin: 0;
	padding: 0;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
img {
	border: 0;
	max-width:300px;
}
p,
form {
	margin: 0;
	padding: 0;
}
a {
  color: #666;
  text-decoration: none;
  font-weight: bold;
}
/* ヘッダ */
#header {
  display: grid;
  grid-template-columns: 1fr 40px;
  background: #EBE8E3;
  border-bottom: 1px solid #ddd;
  padding: 10px 10px 7px 10px;
  top: 0;
  left: 0;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 17px;
}
h1 a{
  color: #E45D8B;
}
p.button {
	width: 60px;
	position: absolute;
	display: block;
	text-align: center;
	font-size: 75%;
	margin: 4px;
	padding: 2px 0;
	font-weight: bold;
-webkit-transform: translateY(-80%);
-ms-transform: translateY(-80%);
transform: translateY(-80%);
}
#main {
	background: #FFFFFF;
	z-index: 7;
}
#nav-drawer{
  text-align: right;
}
.nav-unshown {
  display:none;
}

#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
  text-align: left;
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 90%;
  max-width: 150px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(115%);
  transform: translateX(115%);
  padding: 10px 10px 50px 10px;
}
#nav-content ul,
#nav-content ul li{
  margin: 0;
  padding: 0;
}
#nav-content ul li{
  margin: 0 0 10px 25px;
  list-style-type: circle;
}
.bl_icons{
  margin: 20px 0 0 10px;
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.wraptop{
}

h2 {
  text-align: left;
  margin: 20px 0 10px 0;
  padding: 5px;
  font-size: 1.0em;
  color: #4C4C4C;
  background:#E6E6E6;
  -moz-border-radius: 4px; /* for Fx */
  -webkit-border-radius: 4px; /* for Safari */
  font-weight:normal;
}
#wraptopl{
  display: grid;
  grid-template-columns: 105px 1fr;
  position: sticky;
  top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background:#FFF;
  z-index: 10;
}
.downloadbtn,
#avatarframe{
  padding-left: 10px;
}
#avatarimg{
	border: 1px solid #CCC;
}
.logo{
	width:190px;
	margin: 0 0 5px 10px;
}
.downloadbtn a,
.paybtn a{
  font-size: 13px;
  text-align: center;
  margin: 0;
  padding: 3px 5px;
}
.downloadbtn a{
  display: block;
  width: 90%;
}
.paybtn a{
  margin: 0 0 0 15px;
}

.snsbtn .weibobtn a,
.snsbtn .wechatbtn a,
.snsbtn .facebookbtn a,
.snsbtn .tweetbtn a{
  display: inline-block;
  padding: 3px 12px;
  margin: 0 0 0 15px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border-radius: 4px;
  background-color: #1B95E0;
  color: #fff;
}
.snsbtn .weibobtn a{
  background-color: #F54351;
}
.snsbtn .wechatbtn a{
  background-color: #00C00C;
}
.snsbtn .facebookbtn a{
  background-color: #4467B0;
}
.snsbtntxt .weibobtn a,
.snsbtntxt .wechatbtn a,
.snsbtntxt .facebookbtn a,
.snsbtntxt .tweetbtn a{
  display: inline-block;
  font-weight: normal;
  padding: 0;
  margin: 0 0 0 10px;
  font-size: 24px;
}
.snsbtntxt .tweetbtn a{
 color: #1B95E0;
}
.snsbtntxt .weibobtn a{
  color: #F54351;
}
.snsbtntxt .wechatbtn a{
  color: #00C00C;
}
.snsbtntxt .facebookbtn a{
  color: #4467B0;
}

.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0 10px;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
}
.freset {
clear: both;
margin: 0;
padding: 0;
}
#log {
text-align: left;
line-height:1.5;
padding: 10px;
}
.bl_other_wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  margin-bottom: 40px;
}
#pwrap{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.parea {
  position:relative;
  margin: 0;
}
.pimg{
  margin: 0;
  width:100%;
  height:auto;
  background:url("https://abistudio17.sakura.ne.jp/illustmaker/img/blankface.gif") no-repeat;
  background-size: contain;
  z-index: 8;
}
.bl_other_img img,
.pimg input{
  margin: 0;
  padding: 0;
  width:100%;
  height:auto;
  border: 1px solid #999;
}
.pno{
  position: absolute;
  top:0;
  left:0;
  color: #FFF;
  background-color:rgba(0,0,0,0.5);
  border-bottom-right-radius: 5px;
  font-size: 10px;
  padding: 0 5px;
  z-index: 9;
}
.pcreator{
  margin-top: -7px;
  font-size: 8px;
  width:100%;
  text-align: center;
}
.adarea{
clear: both;
padding: 5px 0;
text-align: center;
}
#log ul {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
#log ul li {
margin: 0 0 5px 25px;
padding: 0 0 0 0;
list-style-type: circle;
}
#footer{
  margin: 20px 0;
  font-size: 0.8em;
  text-align: center;
}
#adjboxarea table,
#colorboxarea table{
margin: 0;
padding: 0;
vertical-align: top;
border-collapse: collapse;
font-size: 1.0em;
}
#adjboxarea th{
 padding: 5px 10px 5px 0px;
}
#colorboxarea th{
 padding: 5px 10px 5px 0px;
}
#adjboxarea td{
padding: 5px 10px 5px 0px;
}
.colortxtbox{
width:60px;
}
.colorbox{
width: 60px;
height: 3.0em;
border: 1px outset #666;
text-align: left;
padding: 0 0 0 3px;
margin: 0 0 2px 0;
}
#logowrap{
}
#logoarea{
text-align: center;
font-size: 0.9em;
}
#visualarea{
padding-top: 15px;
}
#mypic{
border: 2px solid #6699CC;
padding: 5px;
margin-bottom: 10px;
}
#avatarbtns{
margin: 1px 0 0 0;
}
#btn_rand{
padding: 0 0 30px 0;
}
.downloadbtn a,
.paybtn a,
#btn_rand a,
#avatarbtn a{
	border: 1px solid #7c7c7c;
	cursor: pointer;
	color: #FFF;
	background: -moz-linear-gradient( top, #87CC7A 0%, #6DA563);
	background: -webkit-gradient( linear, left top, left bottom, from(#87CC7A), to(#6DA563));
	background: #6DA563;
	border: 1px solid #007d00;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
	box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
	text-shadow: 1px 1px 0px rgba(000,000,000,0.6), 0px -1px 0px rgba(255,255,255,0.3);
	text-decoration: none;
}
#avatarbtn a{
padding: 3px 0;
display: block;
width:96px;
font-size:12px;
text-align: center;
margin: 0 0 5px 0;
}

#btn_rand a{
font-size:16px;
padding: 10px;
}
.smbtns{
float: left;
padding: 0 5px 0 0;
}
table tr th img{
	width: 60px;
}
#logoarea .prd-img{
  max-width:100%;
  margin-bottom: 8px;
}
.bl_colorbox_wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.bl_colorbox{
  display: grid;
  grid-template-columns: 80px 1fr;
  padding-bottom: 10px;
}
.bl_colorbox_icon img{
  display: block;
  max-width: 90%;
  height: auto;
}
.colortxtbox{
  display: block;
  width:74px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.bl_mtxt .colorbox,
.bl_colorbox_txt .colorbox{
  display: block;
  width:100px;
  height: 35px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 2px 0 0 0;
}
.bl_colorpalette_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.bl_colorpalette_wrapper .colorbox{
  display: block;
  width:100%;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0;
}
.form-control {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  margin: 2px 0 0 0;
}
.bl_mtxt{
  margin-bottom: 8px;
}

@media screen and (min-width:700px) {
#logoarea .prd-img{
  max-width:600px;
}
}
@media screen and (min-width:1025px) {
.horizontal_scroll {
  margin-bottom: 6px;;
}
.eachItem img{
  display: block;
  width: 80px;
  height: auto;
}
.swipe{
  display: none;
}
#pwrap{
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

}
@media screen and (min-width:1600px) {
.horizontal_scroll {
  overflow-x: hidden;
  height; 90px;
}
.eachItem img{
  display: block;
  max-width: 100%;
  height: auto;
}
}