/* ==================== image1 ==================== */

.image1 h3 {
	text-align: center;
}

.image1 figure {
	position: relative;
	margin: 0;
}
.image1 figcaption {
	margin-top: 0.75em;
	line-height: 1.8;
	color: #c1272d;
}

/* arrow */
.image1 figure::after {
	content: '';
	display: block;
	width: 100%;
	background: no-repeat;
	background-size: contain;
}
.image1 figure:nth-last-of-type(1)::after {
	content: none;
}

@media (max-width: 640px) {
	.image1 figure {
		width: 80%;
		margin: 1em auto;
	}
	.image1 figure img {
		width: 100%;
	}
	.image1 figcaption {
		font-size: 90%;
	}

	/* arrow */
	.image1 figure::after {
		margin-top: 1em;
		height: 2em;
		background-image: url(../images/image1_arrow_sp.svg);
		background-position: center center;
	}

}

@media (min-width: 641px) {

	.image1 h3 {
		margin: 0;
		padding: 0.5em 0 2em;
	}

	.image1 h3 {
		-ms-grid-column: 3;
		-ms-grid-row: 1;
		grid-column: 3;
		grid-row: 1;
	}

	.image1 figure:nth-of-type(n+3) {
		margin-top: 1em;
	}

	.image1 figcaption {
		font-size: 70%;
	}

	/* grid */
	.image1 {
		display: -ms-grid;
		display: grid;
		width: 30em;
		margin: 2em auto 0;
		-ms-grid-columns: 14em 2em 14em;
		grid-template-columns: 14em 2em 14em;
	}
	.image1 figure:nth-of-type(1) {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-column: 1;
		grid-row: 1/3;
	}
	.image1 figure:nth-of-type(2) {
		-ms-grid-column: 3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
		grid-column: 3;
		grid-row: 2/4;
	}
	.image1 figure:nth-of-type(3) {
		-ms-grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-column: 1;
		grid-row: 3/5;
	}
	.image1 figure:nth-of-type(4) {
		-ms-grid-column: 3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 2;
		grid-column: 3;
		grid-row: 4/6;
	}

	/* arrow */
	.image1 figure::after {
		position: absolute;
		z-index: 1;
		top: 14em;
		height: 3em;
		background-image: url(../images/image1_arrow_pc.svg);
		background-position: right bottom;
	}

	.image1 figure:nth-of-type(1)::after,
	.image1 figure:nth-of-type(3)::after {
		left: 3em;
		transform: translateY(-100%);
	}
	.image1 figure:nth-of-type(2)::after {
		right: 3em;
		transform: translateY(-100%) scaleX(-1);
	}
}

/* ==================== image2 ==================== */

.image2 figure {
	margin: 0;
}

@media (max-width: 640px) {
	.image2 figure {
		text-align: center;
	}
	.image2 figure img {
		width: 48%;
		display: inline-block;
		height: auto;
	}

}

@media (min-width: 641px) {
	.image2 {
		margin-top: 1em;
	}
	.image2 figure img {
		display: inline-block;
		margin: 0.5em;
	}
}

/* ==================== image3 ==================== */

.image3 .image {
}
.image3 .text {
	box-sizing: border-box;
	width: 20em;
	margin: -1em 0 0 auto;
	padding: 1.75em 1em 1em;
	background: rgba(193,39,45,0.1);
}
.image3 .text h3 {
	color: #c1272d;
	border-bottom: 1px solid #e6a9ab;
	margin: 0;
	padding-bottom: 0.5em;
	font-weight: normal;
	text-align: right;
}

@media (max-width: 640px) {
	.image3 .text h3 {
		font-size: inherit;
	}
	.image3 .text p {
		margin: 1em 0 0;
		font-size: 85% !important;
	}
}

@media (min-width: 641px) {
	.image3 {
		width: 27em;
		margin: 2em auto 0;
	}
	.image3 .text {
	}
	.image3 .text h3 {
		font-size: 95%;
	}
}