@charset "UTF-8";


	
	
/* kv
--------------------- */
#kv {
	width: 100%;
	height: calc(780 * var(--vw-ratio));
	margin-top: calc(80 * var(--vw-ratio));
	background: url("../img/reasons/thumbnail_pht01.webp") no-repeat center top / 100%;
	position: relative;
}
	#kv .inner_420 {
		padding-top: calc(100 * var(--vw-ratio));
	}
		#kv .text {
			width: calc(456 * var(--vw-ratio));
			height: calc(456 * var(--vw-ratio));
			border-radius: 50%;
			padding-top: calc(80 * var(--vw-ratio));
			background: rgba(255,255,255,0.2);
			border: solid calc(2 * var(--vw-ratio)) #fff;
			position: relative;
			text-align: center;
		}
			#kv .text h1 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: calc(140 * var(--vw-ratio));
				height: calc(140 * var(--vw-ratio));
				border-radius: 50%;
				position: absolute;
				top: calc(20 * var(--vw-ratio));
				left: calc(-20 * var(--vw-ratio));
			}

			#kv .text .en {
				font-weight: 500;
				line-height: 1;
				margin-bottom: calc(15 * var(--vw-ratio));
			}

			#kv .text h2 {
				font-size: calc(40 * var(--vw-ratio));
				letter-spacing: 0.1em;
				font-weight: 700;
				line-height: 1.5em;
				margin-bottom: calc(15 * var(--vw-ratio));
			}

			#kv .text .txt-18 {
				font-weight: 500;
				letter-spacing: 0.1em;
			}

	#kv .leef {
		position: absolute;
		pointer-events: none; 
	}
	#kv .leef01 {
		width: calc(810 * var(--vw-ratio));
		top: calc(-45 * var(--vw-ratio));
		left: calc(-20 * var(--vw-ratio));
		z-index: 1;
	}
	#kv .leef02 {
		width: calc(810 * var(--vw-ratio));
		top: calc(-45 * var(--vw-ratio));
		left: calc(-20 * var(--vw-ratio));
		z-index: 2;
	}
@media screen and (max-width: 767px) {
	#kv {
		height: auto;
		margin-top: calc(70 * var(--vw-ratio));
		background: url("../img/reasons/thumbnail_pht01_sp.webp") no-repeat center top / 100%;
	}
		#kv .inner_420 {
			padding-top: calc(40 * var(--vw-ratio));
			padding-bottom: calc(350 * var(--vw-ratio));
		}
			#kv .text {
				width: 100%;
				height: 100%;
				aspect-ratio: 1 / 1;
				padding-top: calc(65 * var(--vw-ratio));
			}
				#kv .text h1 {
					width: calc(120 * var(--vw-ratio));
					height: calc(120 * var(--vw-ratio));
					top: calc(15 * var(--vw-ratio));
					left: calc(-25 * var(--vw-ratio));
				}

				#kv .text h2 {
					font-size: calc(30 * var(--vw-ratio));
				}

				#kv .text .txt-18 {
					font-size: calc(14 * var(--vw-ratio));
					line-height: 1.7em;
				}

		#kv .leef01 {
			width: calc(500 * var(--vw-ratio));
			top: calc(-15 * var(--vw-ratio));
			left: calc(-85 * var(--vw-ratio));
		}
		#kv .leef02 {
			width: calc(500 * var(--vw-ratio));
			top: calc(-15 * var(--vw-ratio));
			left: calc(-85 * var(--vw-ratio));
		}
}


	
	
/* reasons
--------------------- */
.reasons {
	position: relative;
}
#reasons01 {
	margin-top: calc(-115 * var(--vw-ratio));
}
#reasons02 {
	padding-top: calc(405 * var(--vw-ratio));
	background: url("../img/reasons/thumbnail_pht02.webp") no-repeat center top / 100%;
}
#reasons03 {
	padding-top: calc(405 * var(--vw-ratio));
	background: url("../img/reasons/thumbnail_pht03.webp") no-repeat center top / 100%;
}
	.reasons .leef {
		position: absolute;
		z-index: 1;
	}
	.reasons .leef03 {
		width: calc(280 * var(--vw-ratio));
		bottom: calc(-80 * var(--vw-ratio));
		left: calc(-90 * var(--vw-ratio));
	}
	.reasons .leef04 {
		width: calc(226 * var(--vw-ratio));
		bottom: calc(360 * var(--vw-ratio));
		right: calc(60 * var(--vw-ratio));
	}
	.reasons .leef05 {
		width: calc(146 * var(--vw-ratio));
		top: calc(-80 * var(--vw-ratio));
		left: calc(70 * var(--vw-ratio));
	}
	.reasons .leef06 {
		width: calc(200 * var(--vw-ratio));
		bottom: calc(-50 * var(--vw-ratio));
		left: calc(90 * var(--vw-ratio));
	}

	.reasons .whitebox {
		background: #fff;
		padding: calc(70 * var(--vw-ratio)) calc(70 * var(--vw-ratio)) 0 calc(70 * var(--vw-ratio));
		border-radius: calc(30 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) 0 0;
		position: relative;
	}
		.reasons .whitebox .head {
			font-weight: 500;
			position: absolute;
			top: calc(-55 * var(--vw-ratio));
		}
		#reasons01 .whitebox .head,
		#reasons03 .whitebox .head {
			left: calc(70 * var(--vw-ratio));
		}
		#reasons02 .whitebox .head,
		#reasons04 .whitebox .head {
			right: calc(70 * var(--vw-ratio));
			text-align: right;
		}
			.reasons .whitebox .head .txt {
				display: block;
				font-size: calc(26 * var(--vw-ratio));
				line-height: 1;
			}
			.reasons .whitebox .head .number {
				display: block;
				font-size: calc(60 * var(--vw-ratio));
				line-height: 1;
			}

		.reasons .whitebox .area {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: calc(100 * var(--vw-ratio));
			position: relative;
		}
		#reasons01 .whitebox .area {
			align-items: flex-end;
		}
			.reasons .whitebox .area .text {
				width: 47%;
			}
			#reasons01 .whitebox .area .text {
				order: 2;
			}
			#reasons02 .whitebox .area .text {
				width: 58%;
				order: 2;
			}
				.reasons .whitebox .area .text h2 {
					font-size: calc(24 * var(--vw-ratio));
					font-weight: 500;
					letter-spacing: 0.1em;
					line-height: 1.7em;
					margin-bottom: calc(35 * var(--vw-ratio));
				}
				#reasons01 .whitebox .area .text h2 {
					position: absolute;
					top: 0;
					left: 0;
				}
				#reasons02 .whitebox .area .text h2 {
					text-align: right;
				}

				.reasons .whitebox .area .text .txt-14 {
					line-height: 2.1em;
				}

			.reasons .whitebox .area .pht {
				width: 47%;
			}
			#reasons01 .whitebox .area .pht {
				order: 1;
			}
			#reasons02 .whitebox .area .pht {
				width: 35%;
				order: 1;
			}

		.reasons .whitebox .profile {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: calc(30 * var(--vw-ratio));
			padding: calc(40 * var(--vw-ratio)) calc(260 * var(--vw-ratio)) calc(40 * var(--vw-ratio)) calc(80 * var(--vw-ratio));
			position: relative;
		}
			.reasons .whitebox .profile .tit {
				height: 100%;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				text-align: center;
				position: absolute;
				top: 0;
				left: calc(20 * var(--vw-ratio));
			}

			.reasons .whitebox .profile .read {
				width: calc(420 * var(--vw-ratio));
				font-weight: 500;
			}

			.reasons .whitebox .profile .information {
				text-align: right;
				font-weight: 500;
			}
				.reasons .whitebox .profile .information h3 {
					font-size: calc(24* var(--vw-ratio));
					font-weight: 500;
					line-height: 1;
				}

				.reasons .whitebox .profile .information .txt-14 {
					line-height: 1.5em;
					margin-top: calc(6* var(--vw-ratio));
					margin-bottom: calc(12* var(--vw-ratio));
				}
				.reasons .whitebox .profile .information .txt-12 {
					line-height: 1;
				}

			.reasons .whitebox .profile .human {
				width: calc(210 * var(--vw-ratio));
				position: absolute;
				bottom: calc(30 * var(--vw-ratio));
				right: calc(30 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#reasons01 {
		margin-top: calc(-100* var(--vw-ratio));
	}
	#reasons02 {
		padding-top: calc(360 * var(--vw-ratio));
		background: url("../img/reasons/thumbnail_pht02_sp.webp") no-repeat center top / 100%;
	}
	#reasons03 {
		padding-top: calc(360 * var(--vw-ratio));
		background: url("../img/reasons/thumbnail_pht03_sp.webp") no-repeat center top / 100%;
	}
		.reasons .leef03 {
			width: calc(140 * var(--vw-ratio));
			bottom: calc(-40 * var(--vw-ratio));
			left: calc(-30 * var(--vw-ratio));
		}
		.reasons .leef04 {
			width: calc(126 * var(--vw-ratio));
			bottom: calc(320 * var(--vw-ratio));
			right: calc(10 * var(--vw-ratio));
		}
		.reasons .leef05 {
			width: calc(70 * var(--vw-ratio));
			top: calc(-50 * var(--vw-ratio));
			left: calc(20 * var(--vw-ratio));
		}
		.reasons .leef06 {
			width: calc(100 * var(--vw-ratio));
			bottom: calc(-50 * var(--vw-ratio));
			left: calc(90 * var(--vw-ratio));
		}
	
		.reasons .inner_280 {
			width: -webkit-calc(100% - calc(30 * var(--vw-ratio)));
			width: calc(100% - calc(30 * var(--vw-ratio)));
		}
			.reasons .whitebox {
				padding: calc(30 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) 0 calc(30 * var(--vw-ratio));
				border-radius: calc(20 * var(--vw-ratio)) calc(20 * var(--vw-ratio)) 0 0;
			}
				.reasons .whitebox .head {
					top: calc(-45 * var(--vw-ratio));
				}
				#reasons01 .whitebox .head,
				#reasons03 .whitebox .head {
					left: calc(30 * var(--vw-ratio));
				}
				#reasons02 .whitebox .head,
				#reasons04 .whitebox .head {
					right: calc(30 * var(--vw-ratio));
				}
					.reasons .whitebox .head .txt {
						font-size: calc(20 * var(--vw-ratio));
					}
					.reasons .whitebox .head .number {
						font-size: calc(50 * var(--vw-ratio));
					}

				.reasons .whitebox .area {
					display: block;
					margin-bottom: calc(40 * var(--vw-ratio));
				}
					.reasons .whitebox .area .text {
						width: 100%;
						margin-bottom: calc(25 * var(--vw-ratio));
					}
					#reasons02 .whitebox .area .text {
						width: 100%;
					}
						.reasons .whitebox .area .text h2 {
							font-size: calc(22 * var(--vw-ratio));
							line-height: 1.6em;
							margin-bottom: calc(20 * var(--vw-ratio));
						}
						#reasons01 .whitebox .area .text h2 {
							position: static;
						}
						#reasons02 .whitebox .area .text h2 {
							text-align: left;
						}

						.reasons .whitebox .area .text .txt-14 {
							line-height: 2.1em;
						}

					.reasons .whitebox .area .pht {
						width: 100%;
					}
					#reasons02 .whitebox .area .pht {
						width: 100%;
					}

				.reasons .whitebox .profile {
					display: block;
					border-radius: calc(20 * var(--vw-ratio));
					padding: calc(25 * var(--vw-ratio)) calc(35 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(35 * var(--vw-ratio));
					position: relative;
				}
					.reasons .whitebox .profile .tit {
						height: auto;
						-ms-writing-mode: revert;
						writing-mode: revert;
						position: static;
					}

					.reasons .whitebox .profile .read {
						width: 100%;
						margin-bottom: calc(15 * var(--vw-ratio));
					}

					.reasons .whitebox .profile .information {
						text-align: center;
						margin-top: calc(10 * var(--vw-ratio));
					}

					.reasons .whitebox .profile .human {
						width: 60%;
						margin: 0 auto;
						position: static;
					}
}