@charset "utf-8";

/* 矢印(始) *//* 矢印(始) *//* 矢印(始) *//* 矢印(始) *//* 矢印(始) */
.arrow_01_down {
position: relative;
display: block;
width: 10px;
height: 55px;
margin: 2rem 0 0 0;
border-radius: 5px;
background-color: #32B8EB;
}

.arrow_01_down::before {
content: "";
position: absolute;
bottom: 10px;
left: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(-45deg);
}

.arrow_01_down::after {
content: "";
position: absolute;
bottom: 10px;
right: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(45deg);
}
/* 矢印(終) *//* 矢印(終) *//* 矢印(終) *//* 矢印(終) *//* 矢印(終) */

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

/* ローディング回転部分(始) */
.loading_animation {
display: block;
width: 3em;
height: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0; /* ローディングアニメが『2』で見える、『0』で見えなくなる */
}

.loading_animation:after, .loading_animation:before { /* 濃い部分(after)と薄い部分(before)の形 */
content: "";
display: block;
width: 3em;
height: 3em;
position: absolute;
border-radius: 100%;
}

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

.loading_animation:before { /* 薄い部分の装飾 */
border: 4px solid rgba(51, 51, 51, 0.15);
box-sizing: border-box;
}
/* ローディング回転部分(終) */

/* ローディング部分の回転エフェクト定義(始) */
@-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_image { /* 画像 */
position: relative;
top: 0;
left: 0;
z-index: 1; /* ローディングアニメの上に被せるため */
}
/* cssのみの読み込み中アニメ(終) *//* cssのみの読み込み中アニメ(終) */