.first-txt-box {
	font-weight: 500;
	padding-top: 50px;
	padding-bottom: 50px;
}
.first-txt-box .txt {
	letter-spacing: .08em;
}

.question-box {
	background-color: #f2f5f7;
	padding-top: 75px;
	padding-bottom: 80px;
}
.question-box:nth-of-type(even) {
	background-color: #fff;
}

.question-box .txt-box .tit {
	font-size: 3.2rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .1em;
	padding-left: 60px;
	position: relative;
}
.question-box .txt-box .tit::before {
    content: "";
    width: 15px;
    height: 100%;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(87, 194, 233, 1) 5px, rgba(87, 194, 233, 1) 6px );
    margin-top: 5px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.question-box .img-box {
	font-size: 1.8rem;
	font-weight: 600;
	position: relative;
}
.question-box .img-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	font-family: "object-fit: contain;";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    margin-top: 5px;
    margin-left: 5px;
	opacity: 0;
	z-index: 1;
}
.question-box .img-box img.anime1.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime2.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime3.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime4.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime5.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime6.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime7.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime8.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
.question-box .img-box img.anime9.show {
	animation: fadeIn_image .6s ease .3s;
	animation-fill-mode:forwards
}
@keyframes fadeIn_image {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.line_graph {
	width: 537px;
	letter-spacing: .09em;
	line-height: 1;
	padding: 15px 13px;
	padding-right: 10px;
	position: relative;
}
.line_graph span {
	position: relative;
	z-index: 1;
	opacity: 0;
}
.line_graph::before {
	content: "";
	width: 0%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.line_graph:nth-of-type(1)::before {
	background-color: #6bc8f2;
}
.line_graph:nth-of-type(2)::before {
	background-color: #ffda35;
}
.line_graph:nth-of-type(3)::before {
	background-color: #eb6d9a;
}
.line_graph:nth-of-type(4)::before {
	background-color: #98d700;
}
.line_graph:nth-of-type(5)::before {
	background-color: #f39800;
}

.line_graph.anime10.show span {
	animation: fadeIn1 .5s ease 0s;
	animation-fill-mode:forwards
}
.line_graph.anime11.show span {
	animation: fadeIn1 .5s ease .3s;
	animation-fill-mode:forwards
}
.line_graph.anime12.show span {
	animation: fadeIn1 .5s ease .6s;
	animation-fill-mode:forwards
}
.line_graph.anime13.show span {
	animation: fadeIn1 .5s ease .9s;
	animation-fill-mode:forwards
}
.line_graph.anime14.show span {
	animation: fadeIn1 .5s ease 1.2s;
	animation-fill-mode:forwards
}

.line_graph.anime10.show::before {
	animation: fadeIn2 .5s ease 0s;
	animation-fill-mode:forwards
}
.line_graph.anime11.show::before {
	animation: fadeIn2 .5s ease .3s;
	animation-fill-mode:forwards
}
.line_graph.anime12.show::before {
	animation: fadeIn2 .5s ease .6s;
	animation-fill-mode:forwards
}
.line_graph.anime13.show::before {
	animation: fadeIn2 .5s ease .9s;
	animation-fill-mode:forwards
}
.line_graph.anime14.show::before {
	animation: fadeIn2 .5s ease 1.2s;
	animation-fill-mode:forwards
}
@keyframes fadeIn1 {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeIn2 {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

/*PC*/
@media screen and (min-width: 768px) {
	.wrap {
		min-width: 1280px;
		overflow-x: auto;
	}

	.question-box .inr {
		min-width: 1280px;
		max-width: 1280px;
		padding: 0;
	}

	.question-box .txt-box {
		width: 512px;
		padding-top: 70px;
		padding-left: 130px;
	}

	.question-box:last-of-type .txt-box {
		width: 614px;
		padding-top: 0;
	}

	.question-box .img-box {
		width: 768px;
		font-size: 1.8rem;
		font-weight: 600;
		position: relative;
	}

	.question-box:last-of-type .img-box {
		width: 537px;
		padding-top: 70px;
	}
}/*END*/


/* IE */
@media all and (-ms-high-contrast: none) {

	.question-box .txt-box .tit {
		padding-left: 55px;
		margin-right: -130px;
	}
}

/*PC*/
@media screen and (min-width: 768px) {
	.question-box .txt-box .tit {
		margin-right: -130px;
	}
}

/*Smartphone*/
@media screen and (max-width: 767px) {
	.question-box {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.question-box .inr {
		padding-right: 0;
		padding-left: 0;
	}

	.question-box .txt-box {
		padding-right: 25px;
		padding-left: 25px;
	}

	.question-box .txt-box .tit-num img {
		width: auto;
		height: 30px;
		margin-top: 4px;
		margin-left: 0px;
	}
	.question-box .txt-box .tit {
		font-size: 1.6rem;
		line-height: 1.8;
		letter-spacing: .1em;
		padding-left: 30px;
	}
	.question-box .txt-box .tit::before {
		width: 7px;
		margin-top: 1px;
	}

	.question-box .img-box {
		height: 63vw;
		font-weight: 600;
		position: relative;
		padding-right: 20%;
		padding-left: 20%;
	}

	.question-box:last-of-type .img-box {
		height: auto;
		font-size: 1.2rem;
		padding-right: 25px;
		padding-left: 25px;
	}
	.line_graph {
		width: 100%;
		line-height: 1.5;
		padding: 15px 10px;
	}
}/*END*/