.imgInput {
padding: 5px;
background: #ddd;
margin-bottom: 15px;
border-radius: 2px;
}

.imgInput input {
display: block;
width: 100%;
color: #707070;
}

img#preview {
display: none;
margin-bottom: 15px;
}

img#preview.show {
display: block;
animation: fadeIn 0.7s ease 0s 1 normal;
}

// img出現時のアニメーション
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
}
}


/* pc-処理中アニメ-始 *//* pc-処理中アニメ-始 */
#processing_anime {
display: none; /* JSで変更 */
flex-flow: column nowrap;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
text-align: center;
font-size: 200%;
font-weight: bold;
color: #FFFFFE;
background-color: rgba(0,153,255,0.9);
animation: processing-bg 0.3s;
}

@keyframes processing-bg {
0% {opacity: 0;} 
100% {opacity: 1;} 
}

/* pc-テキスト点滅-始 */
#processing_anime-inner {
animation: text-anime 1s infinite;
}

@keyframes text-anime {
0% { opacity: 10; }
10% { opacity: 0; }
100% { opacity: 10; }
}
/* pc-テキスト点滅-終 */
/* pc-処理中アニメ-終 *//* pc-処理中アニメ-終 */















img {
max-width: 100%;
height: auto;
object-fit: contain;
vertical-align: middle;
}

#img-input-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
height: auto;
}

.input-img-erase {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: calc(100%/3);
background: #00FFFF;
}

.upload-img {
width: 100%;
}

#toukou {
display: none;
}

/* cssのみの読み込み中アニメ(始) *//* cssのみの読み込み中アニメ(始) */
.loading-animation {
width: 100%;
height: auto;
position: relative;
}

/* ローディング部分の回転エフェクト定義 */
@-webkit-keyframes loading
{
	from
	{
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to
	{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}

@keyframes loading
{
	from
	{
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to
	{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}

/* ローディング画面の背景部分 */
.loading {
width: 100%;
position: absolute;
top: 0;
bottom: 0; /* 『bottom: 0;』にすると高さが親要素と同じになる */
left: 0;
}

/* ローディング回転部分 */
.loading-main:after, .loading-main:before { /* 濃い部分(after)と薄い部分(before)の形 */
content: "";
display: block;
width: 3em;
height: 3em;
position: absolute;
border-radius: 100%;
}

.loading-main {
display: block;
width: 3em;
height: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.loading-main:after { /* -濃い部分の装飾 */
-webkit-animation: loading 0.75s linear infinite;
animation: loading 0.75s linear infinite;
border: 4px solid transparent;
border-top-color: #000000;
box-sizing: border-box;
}

.loading-main:before { /* -薄い部分の装飾 */
border: 4px solid rgba(51, 51, 51, 0.15);
box-sizing: border-box;
}
/* cssのみの読み込み中アニメ(終) *//* cssのみの読み込み中アニメ(終) */






@media screen and (min-width: 0px) and (max-width: 700px) {

html {
width: 100%;

}

body {
width: 100%;

}

main {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;

}


}


@media screen and (min-width: 701px) {

html {
width: 100%;

}

body {
width: 100%;

}

main {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;

}


}