/* /details/ 理由  ------------------------------------------------------- */
.l-detail_reason {
	position: relative;
	z-index: 2;
	background: #fff;
	&::before {
		content: '';
		display: block;
		width: 120vw;
		height: 80%;
		background: #f7e1ca;
		background-size: cover;
		position: absolute;
		left: 50%;
		top: 0;
		translate: -50% 0;
		z-index: 0;
		gap: 1px;
		opacity: .7;
		mix-blend-mode: lighten;
	}
	&::after {
		content: '';
		display: block;
		width: 120vw;
		height: 80%;
		background: url(/common/img/bg_reason.png) 50% 50% no-repeat;
		background-size: cover;
		position: absolute;
		left: 50%;
		top: 0;
		translate: -50% 0;
		z-index: -1;
		gap: 1px;
		opacity: 1;
	}
	&.-grid {
		padding: 100px 0;
		&::before, 
		&::after {
			display: none;
		}
		@media (max-width:768px) {
			padding: calc((100 / 750) * 100vw) 0;
		}		
	} 
	.p-grid-reason__bg {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 110vw;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		translate: -50% 0;
		z-index: -1;
		@media (max-width:768px) {
			grid-template-columns: repeat(2, 1fr);
		}		
		li {
			overflow:hidden;
			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
				opacity: .45;
			}
			@media (max-width:768px) {
				&:nth-last-child(1),
				&:nth-last-child(2) {
					display: none;
				}
			}		
		}
		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #f4e9dc 32%, rgb(218, 228, 255) 80%);
			background-size: cover;
			position: absolute;
			left: 50%;
			top: 0;
			translate: -50% 0;
			z-index: 1;
			opacity: .9;
			mix-blend-mode: hard-light;
			/* mix-blend-mode: lighten; */
		}		
	}
}


.l-detail_reason__buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 88%;
	margin: 0 auto;
	box-shadow: 0 0 30px rgba(0,0,0,.2);
}
.l-detail_reason__buttons__item {
	background: #1751a4;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 5/3.5;
	color: #fff;
	text-decoration: none;
	position: relative;
	li:nth-of-type(2) &,
	li:nth-of-type(4) & {
		background: #003b87;
	}
	li:nth-of-type(6) & {
		background: #212836;
	}
}
.hl-detail_reason {
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: .03em;
	padding-bottom: 30px;
	.-label {
		display: inline-block;
		/* padding: .3em 1.2em .25em;
		border-radius: 100vmax; 
		border: 1px solid #fff;
		padding-bottom: .2em;
		border-bottom: 1px solid rgba(255,255,255,.5);
		*/
		margin-bottom: .6em;
		color: #fff;
		font-weight: 500;
		font-size: 1.7rem;
		line-height: 1;
	}
	b {
		font-size: 3.6rem;
		display: block;
		margin-bottom: 12px;
		position: relative;
		left: -.1em;
		color: #ffb90c;
		&::before {
			content: '#';
			color: #fff;
			font-size: 2rem;
			margin-right: .3em;
			font-weight: normal;
		}
		&.-small {
			font-size: 2.5rem;
			line-height: 1.1;
		}
	}
	&::after {
		content:'';
		display: block;
		width: 1.5em;
		aspect-ratio: 1/1;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-CircleChevronRight%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.5%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
		background-size: contain;
		position: absolute;
		left: 50%;
		translate: -50% 0;
		bottom: 32px;
	}
}

.c-btn-reason {
	display: inline-flex;
	font-size: 2.5em;
	line-height: 1.4;
	font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
	gap: .6em;
	font-weight: bold;
	&::after {
		content: '';
		display: block;
		width: 1.6em;
		aspect-ratio: 1/1;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
	}
}
.l-detail_reason__header {
	padding: 200px 0 60px;
	position: relative;
	h2 {
		font-size: min(calc((100 / 1200) * 100vw), 100px);
		height: min(calc((100 / 1200) * 100vw), 100px);
		position: relative;
		z-index: 0;
		color: #fff;
		@media (max-width:768px) {
			font-size: calc((68 / 750) * 100vw);
			height: calc((68 / 750) * 100vw);
		}			
		span {
			font-size: min(calc((100 / 1200) * 100vw), 100px);
			position: absolute;
			display: block;
			white-space:nowrap;
			left: 50%;
			translate: -50% 0;
			opacity: 1;
			font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
			text-shadow: 0 0 .4em rgba(0, 0, 20, .4);
			opacity: .6;
			@media (max-width:768px) {
				font-size: calc((68 / 750) * 100vw);
			}			
		}
	}
	p {
		font-weight: 700;
		font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
		font-size: min(calc((48 / 1200) * 100vw), 48px);
		text-align: center;
		position: relative;
		z-index: 1;
		line-height: 1.5;
		letter-spacing: .04em;
		margin-top: -.8em;
		color: #000;
		filter: drop-shadow(0 0 4px rgba(255,255,255,1));
		span {
			font-weight: bold;
			color: rgba(0,0,0,0);
			background: linear-gradient(135deg, #2b7ce5 0%, #134c95 60%);
			background-clip: text;
		}
		@media (max-width:768px) {
			font-size: calc((40 / 750) * 100vw);
		}
	}
	&::after {
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			height: 120%;
			aspect-ratio: 1/1;
			border-radius: 50%;
			background: #fff;
			content: "";
			opacity: .4;
			z-index: 0;
			filter: blur(60px);
	}
}

.p-grid-reason {
	max-width: 1040px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(17, 1fr);
	@media (max-width:768px) {
		grid-template-columns: auto;
	}	
	.l-detail_reason__header {
		color: #111;
		padding: 32px 0 72px;
		div {
			text-align: center;
			padding-top: 12px;
			@media (max-width:768px) {
				padding-top: 0;
			}			
		}
		@media (max-width:768px) {
			padding: calc((24 / 750) * 100vw) 0 calc((48 / 750) * 100vw) 0;
		}		
		@media (min-width:769px) {
			grid-column: 1/18;
			grid-row: 2/3;
		}		
	}
	@media (min-width:769px) {	
		.reason1 {
			grid-column: 1/6;
			grid-row: 1/2;
		}
		.reason2 {
			grid-column: 7/12;
			grid-row: 1/2;
		}
		.reason3 {
			grid-column: 13/18;
			grid-row: 1/2;
		}
		.reason4 {
			grid-column: 4/9;
			grid-row: 3/4;
		}
		.reason5 {
			grid-column: 10/15;
			grid-row: 3/4;
		}
	}
	@media (max-width:768px) {
		*+* {
			margin-top: 1.6em;
		}
		div:nth-of-type(2n) {
			position: relative;
			left: 8%;
		}
	}
	.is-sp {
		font-size: 1.3rem;
		text-align: center;
		@media (min-width: 751px) {
			display: none;
		}
	}
}

.p-grid-reason__item {
	background: linear-gradient(135deg, #fff 0%, #fff 40%, rgba(228, 238, 255) 100%) ;
	color: #333;
	border-radius: 20px;
	filter: drop-shadow(8px 8px 8px rgba(83, 128, 219, 0.5));
	transition: .3s filter;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 4.5/3;
	text-decoration: none;
	position: relative;
	border: 4px solid #fff;
	translate: 0 4em;
	opacity: 0;
	.is-visible & {
		transition-delay: 1.2s;
		transition: .8s translate, .8s opacity;
		opacity: 1;
		translate: 0 0;		
	}

	&::before {
		content: '';
		position: absolute;
		width: 37px;
		aspect-ratio: 3/2;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		background: #fff;
		bottom: -25px;
		left: 50%;
		translate: -50% 0;
		transition: .3s background;
		@media (max-width:768px) {
			rotate: 90deg;
			width: 20px;
			bottom: auto;
			top: 50%;
			translate: 0 -50%;
			left: -18px
		}
	}
	&::after {
		content: '';
		position: absolute;
		width: 30px;
		aspect-ratio: 3/2;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		background: #f0f6ff;
		bottom: -19px;
		left: 50%;
		translate: -50% 0;
		border-top: none;
		@media (max-width:768px) {
			rotate: 90deg;
			width: 20px;
			bottom: auto;
			top: 50%;
			translate: 0 -50%;
			left: -12px;
			background: #fff;
		}	
	}

	@media (hover:hover) {
		&:hover {
			transition: .3s translate, .3s border-color, .3s filter;
			translate: 0 10px;
			filter: drop-shadow(8px 8px 12px rgba(83, 128, 219, 0.5));
			border-color :#0255c1;
			&::before {
				background: #0255c1;
			}			
			.hl-detail_reason {
				&::after {
					background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%230255c1%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');
				}
			}
		}
	}
	@media (max-width:768px) {
		aspect-ratio: unset;
		padding: 1.5em 0;
		border-radius: calc((15 / 750) * 100vw);
		width: 92%;
		.reason2 &,
		.reason4 & {
			&::before {
				left: auto;
				right: -18px;
				rotate: -90deg;
			}
			&::after {
				left: auto;
				right: -12px;
				rotate: -90deg;
				background: #f0f6ff;
			}
		}
	}
	@media (min-width:769px) {
		.reason4 &,
		.reason5 & {
			&::before {
				content: '';
				bottom: auto;
				top: -24px;
				left: 50%;
				rotate: 180deg;
			}
			&::after {
				content: '';
				bottom: auto;
				top: -19px;
				left: 50%;
				rotate: 180deg;
				background: #fff;
			}
		}
	}

	.hl-detail_reason {
		text-align: center;
		font-size: 18px;
		letter-spacing: .02em;
		padding-bottom: 0;
		color: #0d2d5a;
		@media (max-width:768px) {
			font-size:calc((24 / 750) * 100vw);
		}
		&::before {
			content: '❞';
			color:#528cd7;
			position: absolute;
			rotate: 180deg;
			font-size: min(calc((60 / 1200) * 100vw), 60px);
			position: absolute;
			left: 20px;
			top: -0.2em;
			@media (max-width:768px) {
				font-size: calc((48 / 750) * 100vw);
			}		
		}
		.-label {
			color: #0d2d5a;
			padding: 0 .4em .2em;
			font-size: min(calc((18 / 1120) * 100vw), 18px);
			background: linear-gradient(transparent 60%, #f6aa1b 60%);
			font-weight: bold;
			@media (max-width:768px) {
				font-size:calc((24 / 750) * 100vw);
				font-weight: bold;
				margin-bottom: 5px;
				position: relative;
				top:-4px
			}	
		}
		b {
			font-size: min(calc((34 / 1400) * 100vw), 34px);
			display: block;
			margin-bottom: 12px;
			position: relative;
			left: -.1em;
			color: rgba(0,0,0,0);
			background: linear-gradient(90deg, #2b7ce5 16%, #134c95 80%);
			background-clip: text;			
			@media (max-width:768px) {
				display: inline;
				font-size:calc((34 / 750) * 100vw);
				br {
					display: none;
				}
			} 
			&::before {
				color: currentColor;
				@media (max-width:768px) {
					font-size:calc((24 / 750) * 100vw);
				}
			}
			&.-small {
				font-size: min(calc((29 / 1400) * 100vw), 29px);
				line-height: 1.1;
				@media (max-width:768px) {
					font-size:calc((35 / 750) * 100vw);
					letter-spacing: -.21em;
				} 	
			}	
		}
		&::after {
			background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23528cd7%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');
			background-size: contain;
			position: absolute;
			left: auto;
			right: 2px;
			bottom: 15px;
			width: 1.6em;
			transition: .3s background;
			@media (max-width:768px) {
				right: 1em;
				bottom: 50%;
				translate: 0 50%;
				width: 1.5em;
			}		
		}
	}
}

.c-btn-round_reason {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 2.5rem;
	text-decoration: none;
	position: relative;
	font-weight: bold;
	@media (max-width:768px) {
		font-size:calc((26 / 750) * 100vw);
		font-weight: bold;
	}
	&:hover {
		span {
			translate: 0 4px;
			&::before {
				opacity:0;
			}
		}
		&::after {
			translate: 0 calc(-50% + 4px );
		}
	}
	span {
		color: #fff;
		border: 3px solid #fff;
		background: transparent;
		padding: .8em 4em;
		border-radius: 100vmax;
		line-height: 1.5;
		display: flex;
		gap: 1em;
		align-items: center;
		position: relative;
		z-index: 1;
		transition: .3s background, .3s translate;
		overflow: hidden;
		letter-spacing: .1em;
		filter: drop-shadow(8px 8px 4px rgba(83, 128, 219, 0.3));
		&::before {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			display: block;
			background: linear-gradient(90deg,#164b8f 0%, #0056c5 100%);
			z-index: -1;
			transition: .3s opacity;
		}
		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			display: block;
			background: #164b8f;
			z-index: -2;
		}
		@media (max-width:768px) {
			padding: .8em 3em;
		}
	}
	&::after {
		content: '';
		display: block;
		width: 1.3em;
		aspect-ratio: 1/1;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		right: 1.2em;
		z-index: 2;
		translate: 0 -50%;
		transition: .3s translate;
	}
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 100vmax;
		background: rgba(83, 128, 219, 0.8);
		position: absolute;
		top: 4px;
		z-index: 0;
	}
}