body{
    padding:0;
    margin:0;
    background:#FFD900;
}

.inner{
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:0 10px;
    box-sizing:border-box;
}

#content{
    padding:0;
    margin:0;
    overflow-x:hidden;
}
    
#content .inner{
    max-width:820px;
    width:100%;
    margin:0 auto;
    padding:10px;
    object-fit:scale-down;
}

/* アマビエ画像 一覧
----------------------------------------*/
#amabie{
    width:100%;
    background:#FFF;
    z-index:10001;
    display:none;
}

#amabie #close{
    text-align:right;
}

#amabie #close-box{
    background:#FFF;
    padding:10px;
    width:40px;
    height:40px;
}

#amabie.active{
    display:block;
}

#amabie .inner{
    max-width:800px;
    width:100%; 
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

/* amabie new
-----------------------------------------*/
#amabie ul{
    display:block;
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
/*    justify-content:space-around; */
}

#amabie ul li{
    width:calc((100% / 6) - 20px);
    max-width:150px;
    min-width:100px;
    max-height:150px;
    margin:0 10px;
    cursor:pointer;
}

#amabie ul li img{
    width:100%;
    height:100%;
    object-fit:scale-down;
    margin:0;
    padding:0;
}

/*#########################  580以下  #########################*/
@media(max-width:579px){
#amabie{
    overflow-y:scroll;
}

}

/* wrapper
-----------------------------------------------*/
#wrapper{
    width:800px;
    height:450px;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow:hidden;
    background:#FFF;
    border:1px solid #CCC;
    box-sizing:border-box;
    transform-origin:left top;
    transform: scale(1.0,1.0);
    border-radius:11px;
}

#wrapper .active{
    border:1px dotted #000;
}

#wrapper #svimg{
    width:30%;
    position: absolute;
    top:30%;
    left:calc((100% - 30%) / 2);
}

#wrapper #preview{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}

#wrapper img.lock{
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#wrapper img.active + img.lock{
    opacity:.5;
}

#text{
    position:absolute;
    top:10%;
    left:10%;
    border:none;
    padding:0;
    margin:0;
    width:100%;
    max-width:max-content;
    background:none;
    display:block;
    box-sizing:border-box;
    font-family:'Noto Sans JP', sans-serif;
    font-weight:normal;
    font-size:30px;
    line-height:1.3;
    text-shadow:3px 3px 5px rgba(255,255,255,.5);
    white-space:nowrap;
}

#text.bold{
    font-weight:bold;
}

/* selectbox
-----------------------------------------------*/
#selectbox{
    max-width:800px;
    padding:0;
    margin:20px auto 0;
    text-align:center;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

#selectbox img{
    width:100%;
    height:auto;
    margin:0 auto;
    display:block;
}

/*#########################  851以下  #########################*/
@media(min-width:851px){
#selectbox{
    width:calc(100vw - 20px);
}

}

/*#########################  850以下  #########################*/
@media(max-width:850px){
#selectbox{
    width:100%;
}

}

/*#########################  640以上  #########################*/
@media(min-width:641px){
#selectbox img.pc{
    max-width:300px;
}

}

/*#########################  640以下  #########################*/
@media(max-width:640px){
#selectbox img.sp{
    max-width:208px;
}

}

#make-button img{
    width:100%;
    height:auto;
}

#selectbox label #filesel{ 
    display:none;
}

#selectbox button,
#selectbox label{
    width:calc((100% / 3) - 5px);
    height:auto;
    padding:0;
    margin:0 auto;
    cursor:pointer;
    z-index:100;
    box-sizing:border-box;
    background:none;
    border:none;
}

#publish{
    text-align:center;
}

#makeCanvas,
#everyone{
    display:block;
    height:auto;
    width:100%;
    padding:0;
    box-sizing:border-box;
    border:none;
    background:none;
}

#makeCanvas,
#publish{
    display:none;
}

#makeCanvas.active,
#publish.active{
    display:block;
}

#everyone a{
    margin:0 auto;
    display:block;
}

#makeCanvas img,
#everyone img{
    width:100%;
    height:auto;
    margin:0 auto;
    cursor:pointer;
}

#selectbox button:focus,
#make-button button:focus{
    outline:0;
}

#publis{
    padding-top:10px;
    text-align:center;
}

/*#########################  640以上  #########################*/
@media(min-width:641px){
#makeCanvas,
#everyone{
    max-width:300px;
    margin:20px auto;
}

#selectbox img.sp,
#makeCanvas img.sp{
    display:none;
}

}

/*#########################  640以下  #########################*/
@media(max-width:640px){
#selectbox{
    margin:5px auto 0;
}

#selectbox img.pc,
#makeCanvas img.pc{
    display:none;
}

#makeCanvas{
    margin:0 auto;
}

#everyone{
    margin:5px auto 0;
}

#publish{
    font-size:14px;
}

}

/* 画像編集
----------------------------------------*/

#image-editor{
    width:100%;
    max-width:800px;
    margin:10px auto;
    padding:10px;
    border:1px solid #ccc;
    box-sizing:border-box;
    background:#FFF;
    border-radius:7px;
    box-shadow:3px 3px 7px rgba(0,0,0,.3);
    display:flex;
    display:none;
    justify-content:space-between;
}

#image-editor #image-change{
    width:220px;
}

#image-change button#change,
#image-change button#d-button{
    font-size:14px;
    letter-spacing:0;
    padding:10px 20px;
    white-space:nowrap;
    border:1px solid #000;
    border-radius:7px;
}

#image-change button#d-button{
    display:none;
}

#image-change.active button#d-button{
    margin-left:10px;
    display:inline-block;
}

#editor{
    padding:0;
    margin:0;
    width:100%;
}

#editor > div{
    padding:10px;
    width:calc(100% - 40px);
}

#editor > div > p{
    padding:0;
    margin:0;
    width:100%;
}

#image-move-h{
    width:60px;
}

#image-move-h p{
    width:100%;
    margin:0;
    text-align:center;
}

#movey{
    transform:rotate(90deg);
    width:210px;
    transform-origin:top left;
    margin-top:10px;
    margin-left:50px;
}

input[type="range"]{
    -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
    -moz-appearance: none;
    appearance: none;    
    height:40px; /* バーの高さ */
    width:calc(100% - 20px); /* バーの幅 */
/*    width:100%;*/
    border:1px solid #ccc;
    border-radius:7px;
    background:linear-gradient(#aaa,#666);
    box-shadow:3px 3px 7px #000  inset;
/*    box-sizing:border-box;*/
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background:linear-gradient(90deg,#F0F0F0 0%,#CCC 50%,#F0F0F0 100%);
    background-image:#FFF;
    box-shadow:3px 3px 7px rgba(0,0,0,.3);
    width:40px;
    height:40px;
    border-radius:3px;
    border:1px solid #999;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb::before{
    content:"|||||";
    color:#333;
}

input[type="range"]::-moz-focus-outer{
  border: 0;
}

input[type="range"]:active::-webkit-slider-thumb {
  box-shadow:0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

#textbox{
    width:auto;
}

#textarea{
    background:#FFD900;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px;
    height:70vh;
    box-sizing: border-box;
    z-index:10000;
    display:none;
    height:100vh;
}

#textarea.edit{
    display:block;
}

#textarea textarea#input-text{
    background:#F0F0F0;
    padding:20px;
    width:100%;
    max-width:800px;
    margin:0 auto;
    font-size:30px;
    line-height:1.7;
    height:calc(2em * 1.7 + 40px);
    box-sizing:border-box;
}

#textarea textarea#input-text.bold{
    font-weight:bold;
}

#texteditor{
    display:flex;
    flex-wrap:wrap;
    padding-bottom:20px;
    z-index:10000;
}

#texteditor #font-weight{
    display:block;
    height:40px;
    line-height:40px;
    margin-right:20px;
    width:120px;
    background:#FFF;
    box-sizing: border-box;
    border-radius:3px;
    border:1px solid #333;
    text-align:center;
    z-index:2;
    cursor:pointer;
}

#texteditor #font-family{
    height:40px;
    padding:0;
    margin:0;
    width:200px;
    margin-right:20px;
    position:relative;
    box-sizing:border-box;
    z-index:2;
}

#texteditor #font-family ul{
    position:absolute;
    top:0;
    left:0;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    border:1px solid #333;
    background:#FFF;
    border-radius:3px;
    box-sizing:border-box;
}

#texteditor #font-family ul li{
    padding:0 20px;
    height:0;
    line-height:40px;
    cursor:pointer;
    overflow:hidden;
}

#texteditor #font-family ul li.select{
    height:38px;
    line-height:38px;
    cursor:pointer;
}

#texteditor #font-family ul li.select:before{
    content:">";
    margin-right:10px;
}

#texteditor #font-family.selected li{
    height:38px;
}

#texteditor #font-family.selected li:hover{
    background:rgba(0,0,0,.1);
}

/*#########################  600以下  #########################*/
@media(max-width:599px){
#texteditor > div{
    margin-bottom:10px !important;
}

#texteditor #font-weight{
    width:80px !important;
    margin-right:10px !important;
}

#texteditor #font-family{
    width:150px !important;
}

}

#texteditor #pick{
    display:flex;
    align-items:center;
}

#texteditor #creat{
    display:block;
    height:40px;
    line-height:40px;
    margin-left:5px;
    width:50px;
    background:#FFF;
    box-sizing:border-box;
    border-radius:3px;
    border:1px solid #333;
    text-align:center;
    z-index:1;
    cursor:pointer;
}

#texteditor img.colorpick-eyedropper-input-trigger{
    display:none;
    height:30px;
    width:30px;
}

#texteditor input{
    padding:5px 20px;
    width:120px;
    height:40px;
    margin:0;
    background:#FFF;
    box-sizing: border-box;
    border-radius:3px;
    z-index:1;
}

#complete,
#placement{
    padding:0 20px;
    width:120px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin:0;
    border:1px solid #333;
    background:#FFF;
    border-radius:3px;
    box-sizing:border-box;
    z-index:1;
    cursor:pointer;
    display:inline-block;
}

#end{
    margin-top:40px;
}

#placement{
    margin-left:10px;
}

/*#########################  500以下  #########################*/
@media(max-width:500px){
#complete, #placement{
    width:100px;
}

}