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

.img-wrapper {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
max-width: 1200px;
padding: 1em;
box-sizing: border-box;
}

.img-wrapper-1 {
background: #00FFFF;
}

.img-wrapper-2 {
background: #00FF00;
}

.img-wrapper-3 {
background: #FFFF00;
}

.img-wrapper-4 {
background: #FF0000;
}
/* ↑↑↑↑これより上は実際は不要 */

/* cssのみの読み込み中アニメ(読み込む要素が複数)-始 */
.image-with-loading-animation {
width: 100%;
max-width: 40%;
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;
}

/* 画像 */
.loading-image {
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
}
/* cssのみの読み込み中アニメ(読み込む要素が複数)-終 */




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



}




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



}