@charset "UTF-8";


	
	
/* about
--------------------- */
#about .read {
	text-align: center;
}

#about .area {
	margin-top: calc(100 * var(--vw-ratio));
}
	#about .area .nav {
		width: calc(250 * var(--vw-ratio));
	}
		#about .area .nav .anchor {
			border: solid 1px #41536A;
			overflow: hidden;
			border-radius: calc(20 * var(--vw-ratio));
			position: sticky;
			top: calc(150 * var(--vw-ratio));
			left: 0;
			z-index: 2;
		}
			#about .area .nav .anchor a.aclink {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: calc(80 * var(--vw-ratio));
				padding: 0 calc(20 * var(--vw-ratio));
				border-bottom: solid 1px #41536A;
				background: #fff url("../../common/img/anchor_arrow_black.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
			}
			#about .area .nav .anchor a.aclink:nth-last-child(1) {
				border-bottom: none;
			}
			#about .area .nav .anchor a.aclink:hover {
				background: #fff url("../../common/img/anchor_arrow_purple.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
				color: #51489D;
			}
			#about .area .nav .anchor a.aclink.active {
				background: #F4F4F7 url("../../common/img/anchor_arrow_purple.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
				color: #51489D;
			}
				#about .area .nav .anchor a.aclink span {
					line-height: 1.4em;
					font-weight: 500;
				}

	#about .area .contents {
		width: calc(800 * var(--vw-ratio));
	}
		#about .area .contents .row {
			padding-top: calc(100 * var(--vw-ratio));
			padding-bottom: calc(100 * var(--vw-ratio));
			position: relative;
		}
		#about .area .contents #section02:before{
			content: "";
			width: 100vw;
			height: 100%;
			background: #F4F4F7 url("../img/point_pht.webp") no-repeat right calc(0 * var(--vw-ratio)) bottom / calc(500 * var(--vw-ratio));
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-63.5%);
			z-index: -1;
		}
		#about .area .contents #section04:before {
			content: "";
			width: 100vw;
			height: 100%;
			background: #F4F4F7;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-63.5%);
			z-index: -1;
		}
		#about .area .contents .row:nth-child(1) {
			padding-top: 0;
		}
		#about .area .contents .row:nth-last-child(1) {
			padding-bottom: 0;
		}
			#about .area .contents .row .txt-16.mb {
				margin-bottom: calc(15 * var(--vw-ratio));
			}

			#about .area .contents .row .cell {
				margin-bottom: calc(50 * var(--vw-ratio));
				position: relative;
			}
			#about .area .contents .row .cell:nth-last-child(1) {
				margin-bottom: 0;
			}
				#about .area .contents .row .cell h3 {
					border-top: solid 1px #ddd;
					font-size: calc(26 * var(--vw-ratio));
					line-height: 1.4em;
					padding-top: calc(10 * var(--vw-ratio));
					margin-bottom: calc(12 * var(--vw-ratio));
					position: relative;
				}
				#about .area .contents .row .cell h3:before {
					content: "";
					width: calc(50 * var(--vw-ratio));
					height: 1px;
					background: #51489D;
					position: absolute;
					top: -1px;
					left: 0;
				}

				#about .area .contents .row .cell .text-pht .text {
					width: 48%;
				}

				#about .area .contents .row .cell .text-pht .pht {
					width: 48%;
				}
					#about .area .contents .row .cell .text-pht .pht img {
						border-radius: calc(10 * var(--vw-ratio));
					}

				#about .area .contents .row .cell .flow {
					margin-top: calc(40 * var(--vw-ratio));
				}

			#about .area .contents .row .check {
				background: #51489D;
				border-radius: calc(10 * var(--vw-ratio));
				margin-top: calc(30 * var(--vw-ratio));
				padding: calc(30 * var(--vw-ratio));
				text-align: center;
				color: #fff;
				position: relative;
			}
			#about .area .contents .row .check:before {
				content: "";
				width: calc(50 * var(--vw-ratio));
				height: calc(50 * var(--vw-ratio));
				background: url("../img/icon_check.svg") no-repeat center / 100%;
				position: absolute;
				top: calc(-10 * var(--vw-ratio));
				left: calc(15 * var(--vw-ratio));
			}

			#about .area .contents .row .point-list .box {
				width: 48.5%;
				border-radius: calc(10 * var(--vw-ratio));
				background: #fff;
				padding: calc(40 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
				margin-right: 3%;
				margin-bottom: 3%;
				position: relative;
			}
			#about .area .contents .row .point-list .box:nth-child(2n) {
				margin-right: 0;
			}
			#about .area .contents .row .point-list .box:nth-last-child(1) {
				margin-bottom: 0;
			}
				#about .area .contents .row .point-list .box .en {
					line-height: 1;
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
					position: absolute;
					top: calc(10 * var(--vw-ratio));
					left: calc(10 * var(--vw-ratio));
				}

				#about .area .contents .row .point-list .box .icon {
					width: calc(170 * var(--vw-ratio));
					margin: 0 auto calc(15 * var(--vw-ratio)) auto;
				}

				#about .area .contents .row .point-list .box h4 {
					font-size: calc(22 * var(--vw-ratio));
					font-weight: 700;
					text-align: center;
					line-height: 1.3em;
					margin-bottom: calc(12 * var(--vw-ratio));
				}

			#about .area .contents .row .swiper-container {
				padding: 0 0 calc(40 * var(--vw-ratio)) 0;
				position: relative;
				overflow: hidden;
			}
				#about .area .contents .row .swiper-container .swiper-slide .pht {
					overflow: hidden;
					border-radius: calc(10 * var(--vw-ratio));
				}

				#about .area .contents .row .swiper-container .swiper-slide .text .year {
					width: calc(100 * var(--vw-ratio));
					height: calc(34 * var(--vw-ratio));
					border-radius: calc(17 * var(--vw-ratio));
					background: #51489D;
					font-size: calc(22 * var(--vw-ratio));
					font-weight: 500;
					text-align: center;
					color: #fff;
					line-height: calc(34 * var(--vw-ratio));
					margin-top: calc(-17 * var(--vw-ratio));
					margin-left: auto;
					margin-right: auto;
					margin-bottom: calc(8 * var(--vw-ratio));
					position: relative;
					z-index: 2;
				}

				#about .area .contents .row .swiper-container .swiper-slide .text h4 {
					font-weight: 700;
					line-height: 1.3em;
				}

				#about .area .contents .row .swiper-container .swiper-slide .text .txt-16 {
					font-weight: 500;
					line-height: 1.3em;
					margin-bottom: calc(10 * var(--vw-ratio));
				}

				#about .area .contents .row .swiper-container .swiper-pagination {
					bottom:  calc(10 * var(--vw-ratio));
				}
					#about .area .contents .row .swiper-container .swiper-pagination .swiper-pagination-bullet {
						width: calc(8 * var(--vw-ratio));
						height: calc(8 * var(--vw-ratio));
						border-radius: 50%;
						background: #fff;
						border: solid 1px #51489D;
						opacity: 1;
						transition: 0.3s;
						-webkit-transition: 0.3s;
					}
					#about .area .contents .row .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
						background: #51489D;
						opacity: 1;
					}

					#about .area .contents .row .swiper-container .swiper-button-prev {
						width: calc(42 * var(--vw-ratio));
						height: calc(42 * var(--vw-ratio));
						background: url("../../common/img/btn_arrow_prev.svg") no-repeat center / 100%;
						top: auto;
						left: auto;
						right: calc(52 * var(--vw-ratio));
						bottom: 0;
						margin: 0;
					}
					#about .area .contents .row .swiper-container .swiper-button-prev:after {
						display: none;
					}

					#about .area .contents .row .swiper-container .swiper-button-next {
						width: calc(42 * var(--vw-ratio));
						height: calc(42 * var(--vw-ratio));
						background: url("../../common/img/btn_arrow_next.svg") no-repeat center / 100%;
						top: auto;
						right: 0;
						bottom: 0;
						margin: 0;
					}
					#about .area .contents .row .swiper-container .swiper-button-next:after {
						display: none;
					}

			#about .area .contents .row .btn-external {
				width: calc(220 * var(--vw-ratio));
				margin: calc(20 * var(--vw-ratio)) auto 0 auto;
			}
				#about .area .contents .row .btn-external a {
					display: block;
					height: calc(50 * var(--vw-ratio));
					background: #fff url("../../common/img/icon_external_purple.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(14 * var(--vw-ratio));
					border: solid 1px #ddd;
					border-radius: calc(25 * var(--vw-ratio));
					padding-left: calc(20 * var(--vw-ratio));
					line-height: calc(47 * var(--vw-ratio));
				}
				#about .area .contents .row .btn-external a:hover {
					background: #51489D url("../../common/img/icon_external_white.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(14 * var(--vw-ratio));
					border: solid 1px #51489D;
					color: #fff;
				}

			#about .area .contents #section04 .sub-pht {
				width:  calc(200 * var(--vw-ratio));
				position: absolute;
				top: calc(-50 * var(--vw-ratio));
				right: calc(40 * var(--vw-ratio));
				z-index: 2;
			}

			#about .area .contents .row .trend {
				background: #fff;
				padding: calc(10 * var(--vw-ratio));
				border-radius: calc(10 * var(--vw-ratio));
				margin-bottom: calc(40 * var(--vw-ratio));
			}
				#about .area .contents .row .trend .text {
					width: 55%;
					padding: calc(30 * var(--vw-ratio));
				}
					#about .area .contents .row .trend .text h4 {
						font-size: calc(22 * var(--vw-ratio));
						font-weight: 700;
						line-height: 1.3em;
						margin-bottom: calc(15 * var(--vw-ratio));
					}

					#about .area .contents .row .trend .text ol {
						padding-left: calc(25 * var(--vw-ratio));
					}
						#about .area .contents .row .trend .text ol li {
							list-style-type: disc;
							line-height: 1.5em;
							margin-bottom: calc(5 * var(--vw-ratio));
						}
						#about .area .contents .row .trend .text ol li:nth-last-child(1) {
							margin-bottom: none;
						}

				#about .area .contents .row .trend .illust {
					width: 40%;
					overflow: hidden;
					border-radius: calc(5 * var(--vw-ratio));
				}
					#about .area .contents .row .trend .illust img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

			#about .area .contents .row .stage {
				margin-top: calc(30 * var(--vw-ratio));
				margin-bottom: calc(30 * var(--vw-ratio));
				position: relative;
			}
				#about .area .contents .row .stage .box {
					background: #F4F4F7;
					border-radius: calc(10 * var(--vw-ratio));
					padding: calc(20 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
					margin-bottom: calc(20 * var(--vw-ratio));
				}
					#about .area .contents .row .stage .box .en {
						width: calc(40 * var(--vw-ratio));
						height: calc(40 * var(--vw-ratio));
						background: #fff;
						border-radius: 50%;
						font-weight: 600;
						line-height: calc(40 * var(--vw-ratio));
						margin: 0 auto calc(10 * var(--vw-ratio)) auto;
					}

					#about .area .contents .row .stage .box h4 {
						line-height: 1.4em;
						margin-bottom: calc(5 * var(--vw-ratio));
					}

				#about .area .contents .row .text-pht .pht.border img {
					border: solid 1px #ddd;
				}

			#about .area .contents .row .attempt .text-pht {
				margin-top: calc(25 * var(--vw-ratio));
				margin-bottom: calc(40 * var(--vw-ratio));
			}
				#about .area .contents .row .attempt .text-pht .text .head {
					display: inline-block;
					padding: calc(5 * var(--vw-ratio)) calc(10 * var(--vw-ratio));
					border-radius: calc(5 * var(--vw-ratio));
					background: #51489D;
					line-height: 1;
					font-weight: 700;
					color: #fff;
					margin-bottom: calc(10 * var(--vw-ratio));
				}

				#about .area .contents .row .attempt .text-pht .text h4 {
					font-size: calc(20 * var(--vw-ratio));
					line-height: 1;
					font-weight: 700;
					margin-bottom: calc(15 * var(--vw-ratio));
				}

			#about .area .contents .row .attempt .last-txt {
				border-top: dashed 1px #ddd;
				padding-top: 30px;
				text-align: center;
			}
@media screen and (max-width: 767px) {
	#about .read {
		text-align: left;
	}
	
	#about .area {
		display: block;
		margin-top: calc(70 * var(--vw-ratio));
	}
		#about .area .nav {
			display: none;
		}

		#about .area .contents {
			width: 100%;
		}
			#about .area .contents .row {
				padding-top: calc(70 * var(--vw-ratio));
				padding-bottom: calc(70 * var(--vw-ratio));
			}
			#about .area .contents #section02,
			#about .area .contents #section04 {
				width: 117%;
				margin-left: -8.5%;
				padding-left: 8.5%;
				padding-right: 8.5%;
				background: #F4F4F7;
			}
			#about .area .contents #section02:before,
			#about .area .contents #section04:before {
				display: none;
			}
				#about .area .contents .row .txt-16.mb {
					margin-bottom: calc(12 * var(--vw-ratio));
				}

				#about .area .contents .row .cell {
					margin-bottom: calc(40 * var(--vw-ratio));
				}
					#about .area .contents .row .cell h3 {
						font-size: calc(24 * var(--vw-ratio));
					}
					#about .area .contents .row .cell h3:before {
						width: calc(30 * var(--vw-ratio));
					}

					#about .area .contents .row .cell .text-pht {
						display: block;
					}
						#about .area .contents .row .cell .text-pht .text {
							width: 100%;
							margin-bottom: calc(20 * var(--vw-ratio));
						}

						#about .area .contents .row .cell .text-pht .pht {
							width: 100%;
						}

					#about .area .contents .row .cell .flow {
						margin-top: calc(20 * var(--vw-ratio));
					}

				#about .area .contents .row .check {
					padding: calc(25 * var(--vw-ratio));
					text-align: left;
				}
				#about .area .contents .row .check:before {
					width: calc(30 * var(--vw-ratio));
					height: calc(30 * var(--vw-ratio));
				}

				#about .area .contents .row .point-list {
					display: block;
					margin-top: calc(15 * var(--vw-ratio));
				}
					#about .area .contents .row .point-list .box {
						width: 100%;
						padding: calc(40 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
						margin-right: 0;
						margin-bottom: calc(25 * var(--vw-ratio));
					}

				#about .area .contents .row .swiper-container {
					width: 116%;
					margin-left: -8%;
					padding: 0 0 calc(55 * var(--vw-ratio)) 0;
				}
					#about .area .contents .row .swiper-container .swiper-slide .text .year {
						width: calc(80 * var(--vw-ratio));
						height: calc(30 * var(--vw-ratio));
						border-radius: calc(15 * var(--vw-ratio));
						font-size: calc(18 * var(--vw-ratio));
						line-height: calc(29 * var(--vw-ratio));
						margin-top: calc(-15 * var(--vw-ratio));
					}

					#about .area .contents .row .swiper-container .swiper-button-prev {
						width: calc(40 * var(--vw-ratio));
						height: calc(40 * var(--vw-ratio));
						right: calc(70 * var(--vw-ratio));
					}

					#about .area .contents .row .swiper-container .swiper-button-next {
						width: calc(40 * var(--vw-ratio));
						height: calc(40 * var(--vw-ratio));
						right: calc(25 * var(--vw-ratio));
					}

				#about .area .contents #section04 .sub-pht {
					display: none;
				}

				#about .area .contents .row .trend {
					display: block;
					margin-bottom: calc(30 * var(--vw-ratio));
				}
					#about .area .contents .row .trend .text {
						width: 100%;
						padding: calc(15 * var(--vw-ratio));
					}
						#about .area .contents .row .trend .text h4 {
							font-size: calc(20 * var(--vw-ratio));
							margin-bottom: calc(12 * var(--vw-ratio));
						}

					#about .area .contents .row .trend .illust {
						width: 100%;
					}

				#about .area .contents .row .stage {
					margin-top: calc(20 * var(--vw-ratio));
					margin-bottom: calc(20 * var(--vw-ratio));
				}
					#about .area .contents .row .stage .box {
						margin-bottom: calc(15 * var(--vw-ratio));
					}
						#about .area .contents .row .stage .box .en {
							width: calc(40 * var(--vw-ratio));
							height: calc(40 * var(--vw-ratio));
							background: #fff;
							border-radius: 50%;
							font-weight: 600;
							line-height: calc(40 * var(--vw-ratio));
							margin: 0 auto calc(10 * var(--vw-ratio)) auto;
						}

						#about .area .contents .row .stage .box h4 {
							line-height: 1.4em;
						}
	

				#about .area .contents .row .attempt .text-pht .text h4 {
					font-size: calc(18 * var(--vw-ratio));
				}
}


	
	
/* recommended
--------------------- */
#recommended {
	padding-left: calc(20 * var(--vw-ratio));
	padding-right: calc(20 * var(--vw-ratio));
}
	#recommended .bg {
		background-image: linear-gradient(135deg, #51489d, #c9c3f4);
		border-radius: calc(20 * var(--vw-ratio));
		padding: calc(100 * var(--vw-ratio)) 0;
		position: relative;
	}
	#recommended .bg:before {
		content: "";
		width: 1px;
		height: calc(50 * var(--vw-ratio));
		background: #FFF;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -0.5px;
		z-index: 2;
	}
	#recommended .bg:after {
		content: "";
		width: 1px;
		height: calc(50 * var(--vw-ratio));
		background: #736CAF;
		position: absolute;
		top: calc(-50 * var(--vw-ratio));
		left: 50%;
		margin-left: -0.5px;
		z-index: 2;
	}
		#recommended .bg .head {
			text-align: center;
			margin-bottom: calc(50 * var(--vw-ratio));
		}
			#recommended .bg .head .en {
				font-size: calc(40 * var(--vw-ratio));
				line-height: 1.3em;
			}

			#recommended .bg .head h2 {
				line-height: 1.3em;
			}

		#recommended .bg .area {
			width: calc(750 * var(--vw-ratio));
			margin: 0 auto;
			border-radius: calc(10 * var(--vw-ratio));
		}
		#recommended .bg .area.work {
			background: url("../img/recommended_pht.webp") no-repeat center / cover;
		}
			#recommended .bg .area a {
				display: block;
				color: #fff;
				background: url("../../common/img/icon_arrow_white.svg") no-repeat right calc(50 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
				padding: calc(100 * var(--vw-ratio)) calc(50 * var(--vw-ratio));
			}
			#recommended .bg .area a:hover {
				opacity: 0.7;
				background: url("../../common/img/icon_arrow_white.svg") no-repeat right calc(45 * var(--vw-ratio)) center / calc(30 * var(--vw-ratio));
			}
				#recommended .bg .area a .en {
					font-size: calc(40 * var(--vw-ratio));
					line-height: 1;
				}
@media screen and (max-width: 767px) {
	#recommended {
		padding-left: calc(10 * var(--vw-ratio));
		padding-right: calc(10 * var(--vw-ratio));
	}
		#recommended .bg {
			border-radius: calc(15 * var(--vw-ratio));
			padding: calc(40 * var(--vw-ratio)) 0;
		}
		#recommended .bg:before {
			height: calc(30 * var(--vw-ratio));
		}
		#recommended .bg:after {
			height: calc(30 * var(--vw-ratio));
			top: calc(-30 * var(--vw-ratio));
		}
			#recommended .bg .head {
				margin-bottom: calc(30 * var(--vw-ratio));
			}
				#recommended .bg .head .en {
					font-size: calc(30 * var(--vw-ratio));
					line-height: 1.1em;
					margin-bottom: calc(10 * var(--vw-ratio));
				}

				#recommended .bg .head h2 {
					line-height: 1.3em;
				}

			#recommended .bg .area {
				width: 100%;
			}
				#recommended .bg .area a {
					background: url("../../common/img/icon_arrow_white.svg") no-repeat right calc(30 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
					padding: calc(60 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
				}
				#recommended .bg .area a:hover {
					background: url("../../common/img/icon_arrow_white.svg") no-repeat right calc(30 * var(--vw-ratio)) center / calc(20 * var(--vw-ratio));
				}
					#recommended .bg .area a .en {
						font-size: calc(32 * var(--vw-ratio));
					}
}