@charset "utf-8";

/* -----------------------------
	process com
-------------------------------- */

.ttl-box {
	position: relative;
}

.ttl-box::before ,
.ttl-box::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 2px;
}

.ttl-box::before {
	background-color: #74bd47;
	left: 0;
	bottom: 0;
}

.ttl-box::after {
	background-color: #00a23f;
	left: 10px;
	bottom: 0;
}

.page-title-area .ttl-box::before ,
.page-title-area .ttl-box::after {
	display: none;
}

.ttl-box .en {
	font: 1.6rem / 1 'Poppins', sans-serif;
	color: #74bd47;
}

.ttl-box .jp {
	color: #4f3d32;
	line-height: 1.5;
	font-size: 3.0rem;
	padding: 5px 0 10px;
}

.att-box p {
	font-size: 1.4rem;
}

.ttl-box-l .jp {
	font: bold 3.6rem / 1 "Zen Maru Gothic";
	color: #74bd47;
	margin: 0 0 20px;
}

.ttl-box-l .en {
	font: 500 2rem / 1 'Poppins', sans-serif;
	color: #c4d9b7;
}

@media screen and (max-width: 768px){
	
	.ttl-box .jp {
		color: #4f3d32;
		line-height: 1.5;
		font-size: 2.4rem;
		padding: 5px 0 10px;
	}

}

/* -----------------------------
	process
-------------------------------- */

#lecture.process .process-area {
	padding: 0 0 100px;
}

#lecture.process .ttl-boxbg {
	position: relative;
	padding: 50px 0;
}

#lecture.process .ttl-boxbg::before {
	content: "";
	position: absolute;
	width: 50%;
	height: 400px;
	background: url("../img/bg-lecture-process-mv.jpg") no-repeat center / cover;
	right: 0;
	top: 0;
}

#lecture.process .ttl-boxbg .inner {
	position: relative;
	z-index: 1;
}

#lecture.process .ttl-boxbg .inner .bg {
	background: #fff;
	padding: 50px 50px 50px 0;
	display: inline-block;
}

#lecture.process .ttl-box-l {
	/*text-align: center;*/
}

#lecture.process .t-txt {
	/*text-align: center;*/
	font-size: 1.8rem;
	padding: 30px 0 0;
}

/*process-box*/
#lecture.process .process-box {
	padding: 70px 0;
	position: relative;
}

#lecture.process .process-box:nth-of-type(2n+1) {
	background: url("../img/lecture-bg.jpg");
}

#lecture.process .process-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 74px;
	height: 38px;
	background: url("../img/bg-gudie-arrow-bottom-white.png") no-repeat;
}

#lecture.process .process-box:nth-of-type(2n)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 74px;
	height: 38px;
	background: url("../img/bg-gudie-arrow-bottom-gara.png") no-repeat;
}

#lecture.process .process-box.process-01::before {
	display: none;
}

#lecture.process .process-box .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*txt-box*/
#lecture.process .process-box .txt-box {
	width: 630px;
}

#lecture.process .process-box .txt-box p {
	padding: 10px 0 0;	
}

#lecture.process .process-box .txt-box .ttl-box {
	margin: 0 0 20px;	
}

/*img-box*/
#lecture.process .process-box .img-box ul li {
	width: 220px;
}

#lecture.process .process-box .img-box ul li figcaption {
	font-size: 1.2rem;
	line-height: 1.3;
	padding: 15px 0 0;
}

#lecture.process .process-box img {
	width: auto;
}

/*process-01*/
#lecture.process .process-box.process-01 .img-box {
	width: 405px;
}

#lecture.process .process-box.process-01 .img-box ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#lecture.process .process-box.process-01 .img-box .img-01 {
	padding: 0 0 60px;
	background: url("../img/bg-flow-arrow.png") no-repeat left 100px bottom 15px;
	width: 100%;
	display: flex;
}

#lecture.process .process-box.process-01 .img-box .img-01 figcaption {
	padding: 0 0 0 20px;
	width: 165px;
}

#lecture.process .process-box.process-01 .img-box .img-03 {
	width: 160px;
}

/*process-02*/
#lecture.process .process-box.process-02 .inner {
	display: block;
	justify-content: flex-start;
	align-items: flex-start;
}

#lecture.process .process-box.process-02 .inner .txt-box {
	width: 100%;
	padding: 0 0 30px;
}

#lecture.process .process-box.process-02 .inner .img-box section {
	border-top: #f1f5f4 solid 2px;
	padding: 40px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#lecture.process .process-box.process-02 .inner .img-box section:nth-of-type(2) {
	padding: 40px 0 0;
}

#lecture.process .process-box.process-02 .inner .img-box section div {
	width: 520px;
}

#lecture.process .process-box.process-02 .inner .img-box section h4 {
	font-size: 2.0rem;
	font-weight: bold;
	color: #00a23f;
	padding: 0 0 15px;
}

#lecture.process .process-box.process-02 .inner .img-box section ul {
	width: 640px;
	display: flex;
	justify-content: flex-start;
}

#lecture.process .process-box.process-02 .inner .img-box section ul li {
	margin: 0 0 0 20px;
}

#lecture.process .process-box.process-02 .inner .img-box section ul li:nth-child(1) {
	margin: 0;
}

/*process-03*/
#lecture.process .process-box.process-03 {
	position: relative;
}

#lecture.process .process-box.process-03::after {
	position: absolute;
	width: 45%;
	background: #fff;
	content: "";
	height: 90%;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	left: auto;
}

#lecture.process .process-box.process-03 .inner {
	position: relative;
	z-index: 1;
}

#lecture.process .process-box.process-03 .img-box li {
	display: flex;
	align-items: center;
	width: 490px;
	margin: 0 0 20px;
}

#lecture.process .process-box.process-03 .img-box li:last-of-type {
	margin: 0;
}

#lecture.process .process-box.process-03 .img-box li figcaption {
	padding: 0 0 0 20px;
}

/*process-04*/
#lecture.process .process-box.process-04 .txt-box {
	width: 520px;
}

#lecture.process .process-box.process-04 .img-box ul {
	display: flex;
}

#lecture.process .process-box.process-04 .img-box ul li {
	margin: 0 0 0 20px;
}

#lecture.process .process-box.process-04 .img-box ul .img-01 {
	margin: 0;
}

#lecture.process .process-box.process-04 .img-box ul .img-03 ,
#lecture.process .process-box.process-04 .img-box ul .img-03 figure {
	width: 148px;
}

/*process-05*/
#lecture.process .process-box.process-05 .inner {
	display: block;
	position: relative;
}

#lecture.process .process-box.process-05 .txt-box {
	width: 100%;
}

#lecture.process .process-box.process-05 .txt-box .img {
	position: absolute;
	right: 0;
	top: 0;
}

#lecture.process .process-box.process-05 .txt-box .txt {
	padding: 20px 580px 0 0;
}

#lecture.process .process-box.process-05 .img-box ul {
	display: flex;
	justify-content: space-between;
	padding: 30px 0 0;
}

/*process-06*/
#lecture.process .process-box.process-06 .img-box ul {
	display: flex;
}

#lecture.process .process-box.process-06 .img-box ul li {
	margin: 0 0 0 20px;
}

/*process-07*/
#lecture.process .process-box.process-07 .inner {
	justify-content: flex-start;
}

#lecture.process .process-box.process-07 .img-box {
	padding: 0 0 0 50px;
}

/*process-08*/
#lecture.process .process-box.process-08 .txt-box {
	width: 100%;
	padding: 0 200px 0 0;
	background: url("../img/pinori05.png") no-repeat right center / 150px auto;
}

/*process-09*/
#lecture.process .process-box.process-09 .txt-box {
	width: 100%;
	padding: 0 200px 0 0;
	background: url("../img/pinori03.png") no-repeat right center / 150px auto;
}

/*process-09*/
#lecture.process .cycle-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 100px 0 100px;
}

#lecture.process .cycle-area div .ttl-box {
	margin: 0 0 10px;
}

#lecture.process .cycle-area div p {
	padding: 15px 0 0;
}

#lecture.process .cycle-area img {
	padding: 0 0 0 50px;
}

@media screen and (max-width: 768px){
	
	#lecture.process .process-area {
		padding: 0 0 50px;
	}

	#lecture.process .t-txt {
		text-align: left;
		font-size: 1.6rem;
		padding: 20px 0 0;
	}
	
	#lecture.process .ttl-boxbg {
		padding: 250px 20px 50px;
	}

	#lecture.process .ttl-boxbg::before {
		width: 100%;
		height: 200px;
		left: 0;
		margin: 0 auto;
	}

	#lecture.process .ttl-boxbg .inner .bg {
		padding: 0;
	}

	/*process-box*/
	#lecture.process .process-box {
		padding: 50px 20px;
	}

	#lecture.process .process-box .inner {
		display: block;
		justify-content: flex-start;
		align-items: flex-start;
	}

	/*txt-box*/
	#lecture.process .process-box .txt-box {
		width: 100%;
		padding: 0 0 20px;
	}

	#lecture.process .process-box .txt-box .ttl-box {
		margin: 0 0 15px;	
	}

	/*img-box*/
	#lecture.process .process-box .img-box ul li {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	#lecture.process .process-box .img-box ul li figcaption {
		padding: 0 0 0 10px;
	}

	#lecture.process .process-box img {
		width: auto;
		width: 110px;
		height: auto;
	}

	/*process-01*/
	#lecture.process .process-box.process-01 .img-box {
		width: 100%;
	}

	#lecture.process .process-box.process-01 .img-box .img-01 {
		padding: 0 0 30px;
		background: url("../img/bg-flow-arrow.png") no-repeat left 50px bottom 10px / auto 15px;
	}

	#lecture.process .process-box.process-01 .img-box .img-01 figcaption {
		padding: 0 0 0 10px;
		width: 100%;
	}

	#lecture.process .process-box.process-01 .img-box .img-03 {
		width: 100%;
		padding: 10px 0 0;
	}

	/*process-02*/
	#lecture.process .process-box.process-02 .inner .txt-box {
		padding: 0 0 20px;
	}

	#lecture.process .process-box.process-02 .inner .img-box section {
		padding: 20px 0;
		display: block;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#lecture.process .process-box.process-02 .inner .img-box section:nth-of-type(2) {
		padding: 20px 0 0;
	}

	#lecture.process .process-box.process-02 .inner .img-box section div {
		width: 100%;
	}

	#lecture.process .process-box.process-02 .inner .img-box section h4 {
		font-size: 1.8rem;
		padding: 0 0 10px;
	}

	#lecture.process .process-box.process-02 .inner .img-box section ul {
		width: 100%;
		display: block;
	}

	#lecture.process .process-box.process-02 .inner .img-box section ul li {
		margin: 10px 0 0;
	}

	#lecture.process .process-box.process-02 .inner .img-box section ul li:nth-child(1) {
		margin: 20px 0 0;
	}

	/*process-03*/
	#lecture.process .process-box.process-03 {
		position: static;
	}

	#lecture.process .process-box.process-03::after {
		display: none;
	}

	#lecture.process .process-box.process-03 .img-box li {
		width: 100%;
		margin: 0 0 10px;
	}

	/*process-04*/
	#lecture.process .process-box.process-04 .txt-box {
		width: 100%;
	}

	#lecture.process .process-box.process-04 .img-box ul {
		display: block;
	}

	#lecture.process .process-box.process-04 .img-box ul li {
		margin: 10px 0 0;
	}

	#lecture.process .process-box.process-04 .img-box ul .img-01 {
		margin: 10px 0 0;
	}

	#lecture.process .process-box.process-04 .img-box ul .img-03 ,
	#lecture.process .process-box.process-04 .img-box ul .img-03 figure {
		width: auto;
	}

	/*process-05*/
	#lecture.process .process-box.process-05 .inner {
		position: static;
	}

	#lecture.process .process-box.process-05 .txt-box .img {
		position: static;
		right: auto;
		top: auto;
	}

	#lecture.process .process-box.process-05 .txt-box .img img {
		width: 100%;
	}

	#lecture.process .process-box.process-05 .txt-box .txt {
		padding: 10px 0 0;
	}

	#lecture.process .process-box.process-05 .img-box ul {
		display: block;
		justify-content: flex-start;
		padding: 0;
	}

	#lecture.process .process-box.process-05 .img-box ul li {
		padding: 10px 0 0;
	}

	/*process-06*/
	#lecture.process .process-box.process-06 .img-box ul {
		display: block;
	}

	#lecture.process .process-box.process-06 .img-box ul li {
		margin: 10px 0 0;
	}

	#lecture.process .process-box.process-06 .img-box ul li:nth-child(1) {
		margin: 0 0 0;
	}

	/*process-07*/
	#lecture.process .process-box.process-07 .img-box {
		padding: 0;
	}

	/*process-08*/
	#lecture.process .process-box.process-08 {
		background: url("../img/pinori05.png") no-repeat right bottom / 80px auto;
	}

	#lecture.process .process-box.process-08 .txt-box {
		width: 100%;
		padding: 0 0 0;
		background:none;
	}

	/*process-09*/
	#lecture.process .process-box.process-09 .txt-box {
		width: 100%;
		padding: 0 0 0;
		background: none;
	}

	/*process-09*/
	#lecture.process .cycle-area {
		display: block;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 50px 20px 50px;
	}

	#lecture.process .cycle-area div .ttl-box {
		margin: 0 0 10px;
	}

	#lecture.process .cycle-area div p {
		padding: 10px 0 0;
	}

	#lecture.process .cycle-area img {
		padding: 20px 0 0;
		width: 100%;
	}
}