@charset "UTF-8";



	
/* pagetitle-project
------------------------------  */
#pagetitle-project {
	width: 100%;
	padding-top: 12vw;
	position: relative;
}
#pagetitle-project:before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#pagetitle-project:after {
	content: "";
	width: 100%;
	height: 5vw;
	border-radius: 3vw 3vw 0 0;
	background: #22201E;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}
	#pagetitle-project .inner-detail {
		padding-bottom: 10vw;
	}
		#pagetitle-project #video-area {
			position: fixed;
			z-index: -2;
			top: 0;
			right:0;
			left:0;
			bottom:0;
			overflow: hidden;
		}
			#pagetitle-project #video-area #video {
				position: absolute;
				z-index: -1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 177.77777778vh;
				height: 56.25vw;
				min-height: 100%;
				min-width: 100%;
			}

		#pagetitle-project .text {
			width: 47%;
			padding-top: 5vw;
			padding-right: 2%;
		}
			#pagetitle-project .text h1 {
				font-size: 3.8vw;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 2.5vw;
			}
				#pagetitle-project .text h1 span {
					font-size: 2.2vw;
				}

		#pagetitle-project .pht {
			width: 53%;
		}

		#pagetitle-project .breadcrumb {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
		}
@media screen and (max-width: 767px) {
	#pagetitle-project {
		padding-top: 23vw;
	}
	#pagetitle-project:after {
		height: 13vw;
		border-radius: 6vw 6vw 0 0;
	}
		#pagetitle-project .inner-detail {
			display: block;
			padding-bottom: 25vw;
		}

			#pagetitle-project .text {
				width: 100%;
				padding-top: 0;
				padding-right: 0;
				padding-bottom: 8vw;
			}
				#pagetitle-project .text h1 {
					font-size: 8.8vw;
					font-weight: 700;
					line-height: 1.3em;
					margin-bottom: 6vw;
				}
					#pagetitle-project .text h1 span {
						font-size: 6.2vw;
					}

			#pagetitle-project .pht {
				width: 100%;
			}
}



	
/* f-title
------------------------------  */
.f-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 7vw;
}
	.f-title img {
		width: 18%;
	}

	.f-title .text {
		width: 82%;
		padding-left: 5%;
	}
		.f-title .text h2 {
			font-size: 4.0vw;
			font-weight: 700;
			line-height: 1.2em;
		}
			.f-title .text h2 span {
				font-size: 2.1vw;
			}

		.f-title .text .txt-16 {
			margin-top: 2vw;
		}
@media screen and (max-width: 767px) {
	.f-title {
		display: block;
		margin-bottom: 10vw;
		text-align: center;
	}
		.f-title img {
			width: 36%;
		}

		.f-title .text {
			width: 100%;
			padding-left: 0;
			margin-top: 6vw;
		}
			.f-title .text h2 {
				font-size: 6.6vw;
				margin-bottom: 5vw;
			}
				.f-title .text h2 span {
					font-size: 4.4vw;
				}

			.f-title .text .txt-16 {
				margin-top: 2vw;
				text-align: left;
			}
}



	
/* flow-area
------------------------------  */
.flow-area {
	position: relative;
	border-radius: 3vw 3vw 0 0;
	padding-top: 10vw;
	padding-bottom: 10vw;
}
.flow-area:before {
	content: "";
	width: 100%;
	height: 20%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
@media screen and (max-width: 767px) {
	.flow-area {
		border-radius: 6vw 6vw 0 0;
		padding-top: 20vw;
		padding-bottom: 20vw;
	}
}



	
/* flow01
------------------------------  */
#flow01 {
	background: #22201E;
	border-radius: 0;
}
	#flow01 .structure {
		text-align: center;
		margin-bottom: 8vw;
	}
		#flow01 .structure h3 {
			font-size: 2.6vw;
			font-weight: 700;
			line-height: 1.3em;
			margin-bottom: 2vw;
		}

		#flow01 .structure a.zu {
			display: block;
			pointer-events: none;
		}

	#flow01 .attempt h2 {
		font-size: 4.0vw;
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: 1vw;
	}

	#flow01 .attempt .list .box {
		width: 47.5%;
		margin-top: 5vw;
		margin-right: 5%;
	}
	#flow01 .attempt .list .box:nth-child(2n) {
		margin-right: 0;
	}
		#flow01 .attempt .list .box .pht {
			border-radius: 1vw;
		}

		#flow01 .attempt .list .box h3 {
			font-size: 1.4vw;
			font-weight: 700;
			line-height: 1.3em;
			margin-top: 2vw;
			margin-bottom: 1vw;
		}

.hide-area {
	display: none;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
@media screen and (max-width: 767px) {
	#flow01 .structure {
		margin-bottom: 12vw;
	}
		#flow01 .structure h3 {
			font-size: 5.6vw;
		}
	
		#flow01 .structure .txt-16 {
			margin-bottom: 3vw;
		}

		#flow01 .structure a.zu {
			pointer-events: all;
		}

	#flow01 .attempt h2 {
		font-size: 6.0vw;
		margin-bottom: 5vw;
	}

	#flow01 .attempt .list {
		display: block;
	}
		#flow01 .attempt .list .box {
			width: 100%;
			margin-top: 10vw;
			margin-right: 0;
		}
			#flow01 .attempt .list .box .pht {
				border-radius: 2vw;
			}

			#flow01 .attempt .list .box h3 {
				font-size: 4.4vw;
				margin-top: 5vw;
				margin-bottom: 3vw;
			}
	
	.modaal-inner-wrapper {
		padding: 10px;
	}
	.modaal-content-container {
		overflow: scroll;
		background: #22201E;
	}
		.modaal-content-container img {
			width: 300%;
		}
}



	
/* flow02
------------------------------  */
#flow02 {
	background: #3D3D3D;
}
#flow02:before {
	background: #22201E;
}
	#flow02 .text-pht {
		margin-bottom: 6vw;
	}
	#flow02 .text-pht:nth-last-child(1) {
		margin-bottom: 0;
	}
		#flow02 .text-pht .text {
			width: 47.5%;
			padding-top: 2vw;
		}
		#flow02 .text-pht:nth-child(2n) .text {
			order: 2;
		}
			#flow02 .text-pht .text h3 {
				font-size: 2.2vw;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 1.5vw;
			}

		#flow02 .text-pht .pht {
			width: 47.5%;
			border-radius: 1vw;
		}
		#flow02 .text-pht:nth-child(2n) .pht {
			order: 1;
		}
@media screen and (max-width: 767px) {
	#flow02 .text-pht {
		display: block;
		margin-bottom: 12vw;
	}
		#flow02 .text-pht .text {
			width: 100%;
			padding-top: 0;
			padding-bottom: 5vw;
		}
			#flow02 .text-pht .text h3 {
				font-size: 5.2vw;
				margin-bottom: 3vw;
			}

		#flow02 .text-pht .pht {
			width: 100%;
			border-radius: 2vw;
		}
}



	
/* flow03
------------------------------  */
#flow03 {
	background: #22201E;
	padding-bottom: 0;
}
#flow03:before {
	background: #3D3D3D;
}
	#flow03 .year-list {
		position: relative;
		padding-bottom: 10vw;
	}
	#flow03 .year-list:before {
		content: "";
		width: 2px;
		height: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -1px;
	}
		#flow03 .year-list .left-area {
			width: 46%;
			padding-top: 2vw;
			margin-right: 8%;
		}
		#flow03 .year-list .right-area {
			width: 46%;
		}
			#flow03 .year-list .box {
				position: relative;
			}
			#flow03 .year-list .left-area .box {
				margin-top: 4vw;
			}
			#flow03 .year-list .right-area .box {
				margin-top: 4vw;
			}
			#flow03 .year-list .right-area .box:nth-child(2) {
				margin-top: 10vw;
			}
			#flow03 .year-list .right-area .box:nth-child(1) {
				margin-top: 0;
			}
			#flow03 .year-list .box:before {
				content: "";
				width: 1.6vw;
				height: 1.6vw;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				top: 2.2vw;
			}
			#flow03 .year-list .right-area .box:before {
				left: -4.12vw;
			}
			#flow03 .year-list .left-area .box:before {
				right: -4.12vw;
			}
				#flow03 .year-list .box .whitebox {
					background: #fff;
					color: #000;
					border-radius: 1vw;
					padding: 3vw;
					position: relative;
				}
				#flow03 .year-list .box .whitebox:after {
					content: "";
					width: 0;
					height: 0;
					border-style: solid;
					position: absolute;
					top: 2vw;
				}
				#flow03 .year-list .right-area .box .whitebox:after {
					left: -1.6vw;
					border-color: transparent #fff transparent transparent;
					border-width: 1vw 1.6vw 1vw 0px;
				}
				#flow03 .year-list .left-area .box .whitebox:after {
					right: -1.6vw;
					border-color: transparent transparent transparent #fff;
					border-width: 1vw 0px 1vw 1.6vw;
				}
					#flow03 .year-list .box .year {
						display: inline-block;
						background: #BAEA4E;
						height: 2.4vw;
						padding: 0 1vw;
						border-radius: 0.3vw;
						font-size: 1.5vw;
						font-weight: 700;
						line-height: 2.4vw;
						position: absolute;
						top: -1.15vw;
					}
					#flow03 .year-list .left-area .box .year {
						right: 3vw;
					}
					#flow03 .year-list .right-area .box .year {
						left: 3vw;
					}

					#flow03 .year-list .box h3 {
						font-size: 2.2vw;
						font-weight: 700;
						line-height: 1.3em;
						margin-bottom: 1vw;
					}

					#flow03 .year-list .right-area .box:nth-child(3) .txt-16 {
						width: 57%;
					}

					#flow03 .year-list .right-area .box:nth-child(3) .pht {
						width: 28%;
						position: absolute;
						right: 3vw;
						bottom: 3vw;
					}

					#flow03 .year-list .box .zu {
						border: solid 1px #707070;
						margin-top: 1.5vw;
					}
@media screen and (max-width: 767px) {
	#flow03 .year-list {
		padding-left: 7vw;
		padding-bottom: 20vw;
	}
	#flow03 .year-list:before {
		left: 0;
		margin-left: 0;
	}
		#flow03 .year-list .box {
		}
		#flow03 .year-list .box:before {
			width: 4vw;
			height: 4vw;
			top: 4vw;
			left: -8.7vw;
		}
			#flow03 .year-list .box .whitebox {
				border-radius: 2vw;
				padding: 6vw 5vw 5vw 5vw;
				margin-top: 10vw;
			}
			#flow03 .year-list .box .whitebox:after {
				border-color: transparent #fff transparent transparent;
				border-width: 3vw 4.2vw 3vw 0px;
				top: 3.4vw;
				left: -3vw;
			}
				#flow03 .year-list .box .year {
					height: 6vw;
					padding: 0 2vw;
					border-radius: 0.6vw;
					font-size: 3.5vw;
					line-height: 6vw;
					top: -2.5vw;
					left: 5vw;
				}

				#flow03 .year-list .box h3 {
					font-size: 5.2vw;
					margin-bottom: 2vw;
				}

				#flow03 .year-list .box:nth-child(5) .txt-16 {
					width: 52%;
				}

				#flow03 .year-list .box:nth-child(5) .pht {
					width: 35%;
					position: absolute;
					right: 5vw;
					bottom: 30vw;
				}

				#flow03 .year-list .box .zu {
					margin-top: 3vw;
				}
}



	
/* flow04
------------------------------  */
#flow04 {
	background: #3D3D3D;
}
#flow04:before {
	background: #22201E;
}
	#flow04 .data-list {
	}
		#flow04 .data-list .item {
			width: 48%;
			margin-right: 2%;
			margin-bottom: 2%;
		}
		#flow04 .data-list .item:nth-child(2n) {
			width: 50%;
			margin-right: 0;
		}
		#flow04 .data-list .item:nth-child(1) {
			width: 36.6%;
		}
		#flow04 .data-list .item:nth-child(2) {
			width: 61.4%;
		}
			#flow04 .data-list .item .box:nth-last-child(1) {
				margin-top: 3.5%;
			}
@media screen and (max-width: 767px) {
	#flow04 .data-list {
		display: block;
	}
		#flow04 .data-list .item {
			width: 100%;
			margin-right: 0;
			margin-bottom: 4vw;
		}
		#flow04 .data-list .item:nth-last-child(1) {
			margin-bottom: 0;
		}
		#flow04 .data-list .item:nth-child(2n) {
			width: 100%;
			margin-right: 0;
		}
		#flow04 .data-list .item:nth-child(1) {
			width: 100%;
		}
		#flow04 .data-list .item:nth-child(2) {
			width: 100%;
		}
			#flow04 .data-list .item .box:nth-last-child(1) {
				margin-top: 4vw;
			}
}



	
/* flow05
------------------------------  */
#flow05 {
	background: #22201E;
}
#flow05:before {
	background: #3D3D3D;
}
	#flow05 .member-list .box {
		width: 21%;
		margin-right: 5.33333333333%;
	}
	#flow05 .member-list .box:nth-child(4n) {
		margin-right: 0;
	}
		#flow05 .member-list .box .head {
			text-align: center;
			margin-bottom: 0.8vw;
		}

		#flow05 .member-list .box .pht {
			border-radius: 1vw;
			margin-bottom: 2vw;
		}

		#flow05 .member-list .box .text .job {
			line-height: 1.3em;
			margin-bottom: 0.5vw;
		}

		#flow05 .member-list .box .text h3 {
			font-size: 1.8vw;
			line-height: 1;
			margin-bottom: 0.8vw;
		}

		#flow05 .member-list .box .text .name-en {
			opacity: 0.5;
			line-height: 1;
			margin-bottom: 1.5vw;
		}

		#flow05 .member-list .box .text .btn-external {
			width: 90%;
			margin: 2vw auto 0 auto;
			border-radius: 2vw;
			overflow: hidden;
			background: #3B94DB;
		}
			#flow05 .member-list .box .text .btn-external a {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 4vw;
				font-size: 1.1vw;
				font-weight: 700;
				line-height: 1;
				padding: 1.5vw;
				position: relative;
				z-index: 2;
			}
			#flow05 .member-list .box .text .btn-external a:after {
				content: "";
				width: 2vw;
				height: 2vw;
				background: url("../img/common/btn_external_white.svg") no-repeat center / 100%;
				position: absolute;
				top: 50%;
				right: 1vw;
				margin-top: -1vw;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#flow05 .member-list .box .text .btn-external a:before {
				content: "";
				width: 0;
				height: 100%;
				background: #fff;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			#flow05 .member-list .box .text .btn-external a:hover {
				color: #3B94DB;
			}
			#flow05 .member-list .box .text .btn-external a:hover:before {
				width: 100%;
			}
			#flow05 .member-list .box .text .btn-external a:hover:after {
				background: url("../img/common/btn_external_light-blue.svg") no-repeat center / 100%;
			}
@media screen and (max-width: 767px) {
	#flow05 .member-list {
		display: block;
		margin-bottom: 0;
	}
		#flow05 .member-list .box {
			width: 100%;
			margin-right: 0;
			margin-bottom: 10vw;
		}
		#flow05 .member-list .box:nth-last-child(1) {
			margin-bottom: 0;
		}
			#flow05 .member-list .box .head {
				margin-bottom: 2vw;
			}

			#flow05 .member-list .box .pht {
				border-radius: 2vw;
				margin-bottom: 7vw;
			}

			#flow05 .member-list .box .text {
				padding: 0 6vw;
			}
				#flow05 .member-list .box .text .job {
					line-height: 1.3em;
					margin-bottom: 2vw;
				}

				#flow05 .member-list .box .text h3 {
					font-size: 6.2vw;
					margin-bottom: 2.5vw;
				}

				#flow05 .member-list .box .text .name-en {
					margin-bottom: 5vw;
				}

				#flow05 .member-list .box .text .btn-external {
					width: 80%;
					margin-top: 5vw;
					border-radius: 7vw;
				}
					#flow05 .member-list .box .text .btn-external a {
						height: 14vw;
						font-size: 3.8vw;
						padding: 6vw;
					}
					#flow05 .member-list .box .text .btn-external a:after {
						width: 6vw;
						height: 6vw;
						top: 50%;
						right: 4vw;
						margin-top: -3vw;
					}
}



	
/* flow06
------------------------------  */
#flow06 {
	background: #3D3D3D;
	padding-bottom: 0;
}
#flow06:before {
	background: #22201E;
}
	#flow06 .flow-list {
		padding-bottom: 10vw;
	}
		#flow06 .flow-list .side {
			width: 35%;
		}
			#flow06 .flow-list .side .number {
				position: sticky;
				top: 10vw;
				left: 0;
			}
				#flow06 .flow-list .side .number dl {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-bottom: 1.5vw;
					position: relative;
				}
				#flow06 .flow-list .side .number dl:nth-last-child(1) {
					padding-bottom: 0;
				}
				#flow06 .flow-list .side .number dl:before {
					content: "";
					width: 2px;
					height: 100%;
					background: #B169AF;
					position: absolute;
					top: 0;
					left: 1.45vw;
					z-index: 0;
					opacity: 0;
				}
				#flow06 .flow-list .side .number dl.active:before {
					opacity: 1;
				}
					#flow06 .flow-list .side .number dl dt {
						width: 3vw;
						height: 3vw;
						border-radius: 0.3vw;
						background: #FFE3FE;
						font-size: 1.5vw;
						font-weight: 500;
						color: #B169AF;
						text-align: center;
						line-height: 1;
						padding-top: 0.5vw;
						position: relative;
						z-index: 1;
					}
					#flow06 .flow-list .side .number dl.active dt {
						background: #B169AF;
						color: #fff;
					}
					#flow06 .flow-list .side .number dl dd {
						padding-left: 1vw;
					}

		#flow06 .flow-list .area {
			width: 75%;
		}
			#flow06 .flow-list .area h3 {
				font-size: 2.0vw;
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: 3vw;
			}

			#flow06 .flow-list .area .box {
				background: #B169AF;
				border-radius: 1vw;
				margin-bottom: 2vw;
				padding: 2.5vw 4vw;
				position: relative;
			}
			#flow06 .flow-list .area .box:nth-last-child(1) {
				margin-bottom: 0;
			}
			#flow06 .flow-list .area .box:before {
				content: "";
				width: 2px;
				height: 70%;
				background: #fff;
				position: absolute;
				bottom: -3.5vw;
				left: 11%;
				z-index: 1;
			}
			#flow06 .flow-list .area .box:after {
				content: "";
				width: 1vw;
				height: 70%;
				background: url("../img/common/line_arrow.svg") no-repeat center bottom / 100%;
				position: absolute;
				bottom: -3.5vw;
				left: 10.2%;
				z-index: 1;
			}
			#flow06 .flow-list .area .box:nth-last-child(1):before,
			#flow06 .flow-list .area .box:nth-last-child(1):after {
				display: none;
			}
				#flow06 .flow-list .area .box .number {
					width: 7%;
					font-size: 4.8vw;
					letter-spacing: 0;
					line-height: 0.7;
				}

				#flow06 .flow-list .area .box .text {
					width: 83%;
				}
					#flow06 .flow-list .area .box .text h4 {
						font-size: 2.2vw;
						font-weight: 700;
						line-height: 1.3em;
						margin-bottom: 1.2vw;
					}
@media screen and (max-width: 767px) {
	#flow06 .flow-list {
		display: block;
		padding-bottom: 20vw;
	}
		#flow06 .flow-list .side {
			display: none;
		}
	
		#flow06 .flow-list .area {
			width: 100%;
		}
			#flow06 .flow-list .area h3 {
				font-size: 5.0vw;
				text-align: center;
				margin-bottom: 6vw;
			}

			#flow06 .flow-list .area .box {
				border-radius: 2vw;
				margin-bottom: 5vw;
				padding: 6vw 6vw;
			}
			#flow06 .flow-list .area .box:before {
				height: 85%;
				bottom: -8vw;
			}
			#flow06 .flow-list .area .box:after {
				width: 3vw;
				height: 85%;
				bottom: -8vw;
				left: 9.5%;
			}
				#flow06 .flow-list .area .box .number {
					width: 8%;
					font-size: 7.8vw;
				}

				#flow06 .flow-list .area .box .text {
					width: 82%;
				}
					#flow06 .flow-list .area .box .text h4 {
						font-size: 5.2vw;
						margin-bottom: 3vw;
					}
}