/* flow chapter-content */
/* ----------------------------- */

.chapter-content.flow {
	margin-bottom: 55px;
	padding: 0;
}

@media screen and (max-width: 736px) {
	.chapter-content.flow {
		margin-bottom: 45px;
	}
}

.chapter-content.flow > .chapter-headding {
	background: url(../../images/flow/bnr-chapter.jpg) no-repeat center center;
	background-size: cover;
	margin-bottom: 10px;
	padding: 110px 50px 113px;
}

@media screen and (max-width: 1330px) {
	.chapter-content.flow > .chapter-headding {
		padding: 110px 30px 113px;
	}
}

@media screen and (max-width: 736px) {
	.chapter-content.flow > .chapter-headding {
		background: url(../../images/flow/bnr-chapter-sp.jpg) no-repeat center center;
		background-size: cover;
		padding: 95px 20px 25px;
	}
}

.chapter-content.flow > .chapter-headding > .wrap > .page > .ja {
	color: #fff;
}

@media screen and (max-width: 736px) {
	.chapter-content.flow > .chapter-headding > .wrap > .page > .ja {
		color: #000;
	}
}

.chapter-content.flow > .chapter-headding > .wrap > .title > .main {
	color: #fff;
}

@media screen and (max-width: 736px) {
	.chapter-content.flow > .chapter-headding > .wrap > .title > .main {
		color: #000;
	}
}

.chapter-content.flow > .breadcrumb {
	padding: 0 50px;
}

@media screen and (max-width: 1330px) {
	.chapter-content.flow > .breadcrumb {
		padding: 0 30px;
	}
}

@media screen and (max-width: 736px) {
	.chapter-content.flow > .breadcrumb {
		padding: 0 20px;
	}
}

.chapter-content.flow > .chapter-copy {
	margin-top: 45px;
	padding: 0 50px;
}

@media screen and (max-width: 1330px) {
	.chapter-content.flow > .chapter-copy {
		padding: 0 30px;
	}
}

@media screen and (max-width: 736px) {
	.chapter-content.flow > .chapter-copy {
		margin-top: 25px;
		padding: 0 20px;
	}
}

/* flow-list */
/* ----------------------------- */

@media screen and (max-width: 736px) {
	.flow-list {
		padding: 0;
	}
}

.flow-list > .list {
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	margin-bottom: 60px;
}

@media screen and (max-width: 736px) {
	.flow-list > .list {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		margin-bottom: 25px;
	}
}

.flow-list > .list:last-child {
	margin-bottom: 0;
}

.flow-list > .list > .content {
	padding-bottom: 70px;
	position: relative;
	width: 50.2%;
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content {
		padding: 20px 20px 35px;
		width: 100%;
	}

	.flow-list > .list:last-child > .content {
		padding: 20px 20px 10px;
	}
}

.flow-list > .list > .content > .head {
	margin-bottom: 10px;
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .head {
		margin-bottom: 2px;
	}
}

.flow-list > .list > .content > .head > span {
	color: #30b0eb;
	font-family: 'DIN Next LT Pro Regular';
	font-size: 22px;
}

@media screen and (max-width: 1180px) {
	.flow-list > .list > .content > .head > span {
		font-size: 20px;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .head > span {
		font-size: 14px;
	}
}

.flow-list > .list > .content > .head > span.num {
	font-size: 44px;
	line-height: 1;
}

@media screen and (max-width: 1180px) {
	.flow-list > .list > .content > .head > span.num {
		font-size: 38px;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .head > span.num {
		font-size: 20px;
	}
}

.flow-list > .list > .content > .title {
	color: #333333;
	font-family: YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
	font-size: 30px;
	letter-spacing: 0.025em;
	margin-bottom: 25px;
}

@media screen and (max-width: 1380px) {
	.flow-list > .list > .content > .title {
		font-size: 25px;
		letter-spacing: 0.01em;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 1180px) {
	.flow-list > .list > .content > .title {
		font-size: 21px;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .title {
		font-size: 16px;
		letter-spacing: 0.05em;
		margin-bottom: 13px;
	}
}

.flow-list > .list > .content > .text {
	color: #555555;
	font-family: YakuHanJPs, 'Noto Sans Japanese', 'Hiragino Kaku Gothic Pro', MyYuGothicM, Meiryo, sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	padding-right: 40px;
	text-align: justify;
}

@media screen and (max-width: 1180px) {
	.flow-list > .list > .content > .text {
		font-size: 12px;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .text {
		padding-right: 0;
	}
}

.flow-list > .list > .content > .link {
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 20px;
	padding-right: 40px;
}

@media screen and (max-width: 1235px) {
	.flow-list > .list > .content > .link {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .link {
		padding-right: 0;
	}
}

.flow-list > .list > .content > .link > .button-flat {
	margin: 0;
	width: 48%;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(1) {
	transition: opacity 0.3s;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(1) > .inner {
	background-color: transparent;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(1):hover {
	opacity: 0.7;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(2) > .inner {
	background-color: #eef3f3;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(2):hover > .inner {
	background-color: transparent;
}

.flow-list > .list > .content > .link > .button-flat:nth-child(1) > .inner > span {
	color: #fff;
}

@media screen and (max-width: 1235px) {
	.flow-list > .list > .content > .link > .button-flat {
		width: 100%;
	}

	.flow-list > .list > .content > .link > .button-flat:nth-child(2) {
		margin-top: 10px;
	}
}


.flow-list > .list > .content > .link > .button-flat > .inner {
	display: block;
	height: 100%;
	padding: 10px 0;
}

.flow-list > .list > .content > .link > .button-flat > .inner > span {
	font-size: 15px;
	line-height: 1.5;
}

@media screen and (max-width: 1235px) {
	.flow-list > .list > .content > .link > .button-flat > .inner > span > .for-middle {
		display: none;
	}
}

@media screen and (max-width: 1180px) {
	.flow-list > .list > .content > .link > .button-flat > .inner > span {
		font-size: 14px;
		letter-spacing: 0.05em;
	}
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .link > .button-flat > .inner > span {
		letter-spacing: 0;
	}
}

.flow-list > .list > .content > .arrow {
	position: absolute;
	top: auto;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 32px;
	width: 82px;
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .content > .arrow {
		bottom: 0;
		height: 13px;
		width: 33px;
	}
}

.flow-list > .list > .image {
	width: 49.8%;
}

@media screen and (max-width: 736px) {
	.flow-list > .list > .image {
		width: 100%;
	}
}

.flow-list > .list > .image > img {
	height: auto;
	width: 100%;
}