@charset "UTF-8";
@media only screen and (min-width: 480px) {
	body {
		color: #2d404f;
	}
	a {
		color: #2d404f;
	}
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: none;
		font-style: normal;
		text-align: left;
		zoom: 1;
	}
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	table {
		border-collapse: collapse;
		font-family: inherit;
	}
	input,
	textarea,
	select {
		font-family: inherit;
		font-size: 16px;
	}
	input[type="button"],
	input[type="text"],
	input[type="submit"] {
		-webkit-appearance: none;
		border-radius: 0;
	}
	textarea {
		resize: none;
		-webkit-appearance: none;
		border-radius: 0;
	}
	th,
	td {
		border-collapse: collapse;
	}
	table th,
	table td {
		white-space: nowrap;
	}
	ul,
	ol {
		list-style-type: none;
	}
	img {
		vertical-align: text-bottom;
		vertical-align: -webkit-baseline-middle;
		max-width: 100%;
		height: auto;
	}
	.h_ai_red {
		color: #e60012;
	}
	.font_yugo {
		font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif, 'Arial';
	}
	.h_ai_wrap {
		padding: 90px 0 0 0;
		.h_ai_title {
			text-align: center;
			.h_ai_tit_icon {
				margin: 0 0 30px 0;
			}
			>h2 {
				margin: 0;
				font-size: 40px;
				line-height: 1.2;
				letter-spacing: 0.02em;
				position: relative;
				font-weight: 900;
				text-align: center;
				color: #111111;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				gap: 0 50px;
				>span {
					text-align: center;
					.h_ai_red {
						font-size: 60px;
					}
				}
				.h_ai_red {
					font-size: 60px;
					letter-spacing: 0.05em;
					color: #e60012;
					margin: 0px 0px 0px 10px;
				}
				&:before {
					content: '';
					width: 31px;
					height: 40px;
					background-repeat: no-repeat;
					background-image: url(../img/support/con_fuki1.png);
				}
				&:after {
					content: '';
					width: 34px;
					height: 38px;
					background-repeat: no-repeat;
					background-image: url(../img/support/con_fuki2.png);
				}
			}
		}
		#h_ai_main {
			width: 100%;
			overflow: hidden;
			background: #fdf9f4;
			margin: 0 0 60px 0;
			padding: 70px 0 75px 0;
			position: relative;
			&:before {
				content: "";
				width: 1320px;
				height: 339px;
				margin: auto;
				background-image: url(/img/hakaseai/main_en.webp);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 5vw;
				z-index: 1;
			}
			>div {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0 40px;
				margin: 0 auto;
				position: relative;
				z-index: 3;
				>img {
					width: 23vw;
					max-width: 407px;
					min-width: 320px;
				}
				>div {
					.h_ai_main_catch {
						margin: 0 0 25px 0;
						font-size: clamp(30px, 2.4vw, 38px);
						line-height: 1.3;
						font-weight: bold;
						letter-spacing: 0.16em;
					}
					>h2 {
						margin: 0 0 20px 0;
						font-size: clamp(65px, 5vw, 80px);
						line-height: 1.25;
						font-weight: bold;
						letter-spacing: 0.05em;
						>span {
							position: relative;
							&:before {
								content: "";
								display: block;
								width: 12px;
								height: 12px;
								margin: auto;
								background: #2d404f;
								border-radius: 50%;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
							}
						}
					}
					.h_ai_main_txt {
						font-size: clamp(18px, 1.4vw, 23px);
						line-height: 1.6;
						letter-spacing: 0.14em;
						font-weight: bold;
					}
				}
			}
		}
		#h_ai_sort {
			width: 1200px;
			margin: 0 auto 120px auto;
			>h2 {
				margin: 0 0 40px 0;
				>span {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0 20px;
					font-size: 30px;
					line-height: 1;
					font-weight: bold;
					color: #2d404f;
					&:before, &:after {
						content: "";
						width: 20px;
						height: 50px;
						background-repeat: no-repeat;
						background-size: cover;
					}
					&:before {
						background-image: url(/img/hakaseai/can_title_l.webp);
					}
					&:after {
						background-image: url(/img/hakaseai/can_title_r.webp);
					}
				}
			}
			>ul {
				display: flex;
				justify-content: space-between;
				>li {
					width: 270px;
					>a {
						display: block;
						padding: 15px 0 40px 0;
						border: 3px solid #e60012;
						border-radius: 10px;
						text-align: center;
						overflow: hidden;
						position: relative;
						.h_ai_sort_num {
							width: 87px;
							height: 87px;
							box-sizing: border-box;
							padding: 50px 0 0 47px;
							background: #e60012;
							border-radius: 50%;
							font-size: 20px;
							line-height: 1;
							font-weight: bold;
							letter-spacing: 0.05em;
							color: #FFF;
							position: absolute;
							top: -40px;
							left: -40px;
						}
						>img {
							margin: 0 0 10px 0;
						}
						.h_ai_sort_name {
							font-size: 22px;
							line-height: 1;
							font-weight: bold;
							letter-spacing: 0.05em;
							text-align: center;
						}
						&:after {
							content: "";
							display: block;
							width: 17px;
							height: 9px;
							clip-path: polygon(50% 100%, 0 0, 100% 0);
							margin: auto;
							background: #e60012;
							position: absolute;
							bottom: 15px;
							left: 0;
							right: 0;
						}
					}
				}
			}
		}
		#h_ai_point {
			position: relative;
			margin: 0 0 90px 0;
			padding: 0 0 130px 0;
			&:after {
				content: "";
				width: 100%;
				height: calc(100% - 125px);
				background: #f4f9fe;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: -1;
			}
			.h_ai_title {
				margin: 0 0 50px 0;
			}
			>ul {
				display: flex;
				width: 1200px;
				margin: 0 auto;
				padding: 30px 0;
				background: #FFF;
				border-radius: 10px;
				>li {
					width: calc(100% / 3);
					text-align: center;
					box-sizing: border-box;
					&:not(:last-child) {
						border-right: 1px solid #d6e8fb;
					}
					>img {
						margin: 0 0 25px 0;
					}
					>p {
						text-align: center;
						letter-spacing: 0.05em;
					}
					.h_ai_point_name {
						margin: 0 0 25px 0;
						>span {
							padding: 0 5px;
							background: linear-gradient(transparent 60%, #fff600 60%);
							font-size: 28px;
							line-height: 1.2;
							font-weight: bold;
						}
					}
					.h_ai_point_txt {
						font-size: 20px;
						line-height: 1.2;
					}
				}
			}
		}
		#h_ai_stage {
			width: 1100px;
			margin: 0 auto;
			.h_ai_title {
				margin: 0 0 50px 0;
			}
			.h_ai_stage_type {
				margin: 0 0 50px 0;
				padding: 0 0 55px 0;
				position: relative;
				&:before {
					content: "";
					width: 490px;
					height: 3px;
					margin: auto;
					background: #FFF;
					position: absolute;
					top: 41px;
					left: 0;
					right: 0;
					z-index: -1;
				}
				&:after {
					content: "";
					width: 100%;
					height: calc(100% - 45px);
					border: 2px solid #e60012;
					border-radius: 10px;
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: -2;
				}
				>h3 {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0 50px;
					margin: 0 0 45px 0;
					font-size: 30px;
					line-height: 1;
					font-weight: bold;
					color: #2d404f;
					&:before, &:after {
						content: "";
						width: 20px;
						height: 50px;
						background-repeat: no-repeat;
						background-size: cover;
					}
					&:before {
						background-image: url(/img/hakaseai/can_title_l.webp);
					}
					&:after {
						background-image: url(/img/hakaseai/can_title_r.webp);
					}
					>span {
						display: flex;
						align-items: center;
						gap: 0 30px;
						padding: 0 10px 0 0;
						&:before {
							content: "";
							width: 37px;
							height: 80px;
							background-image: url(/img/hakaseai/stage_icon.webp);
							background-repeat: no-repeat;
							background-size: cover;
						}
					}
				}
				>ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 30px 55px;
					>li {
						width: 200px;
						height: 200px;
						box-sizing: border-box;
						padding: 15px 0 0 0;
						background: #f4f9fe;
						border-radius: 50%;
						text-align: center;
						>img {
							margin-bottom: 4px;
						}
						>p {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 32px;
							font-size: 22px;
							line-height: 26px;
							font-weight: bold;
							letter-spacing: 0.05em;
							text-align: center;
						}
					}
				}
			}
			.h_ai_stage_list {
				&:not(:last-of-type) {
					margin: 0 0 80px 0;
				}
				>h3 {
					display: inline-block;
					margin: 0 0 30px 0;
					padding: 10px 20px 10px 10px;
					background: #2d404f;
					border-radius: 5px;
					color: #FFF;
					font-weight: bold;
					font-size: 30px;
					line-height: 30px;
					>span {
						display: inline-block;
						width: 100px;
						margin: 0 15px 0 0;
						padding: 10px 0;
						background: #FFF;
						border-radius: 5px;
						font-size: 27px;
						line-height: 30px;
						color: #2d404f;
						font-weight: bold;
						text-align: center;
					}
				}
			}
		}
		.before_after_slider {
			position: relative;
			overflow: hidden;
			width: 1100px;
			max-width: 100%;
			margin: 0 auto;
		}
		.box_before {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 50%;
			height: 100%;
			border-right: 4px solid rgba(255, 255, 255, 0.7);
			box-shadow: 10px 0 15px -13px #000;
		}
		.box_before img {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 1100px;
			height: 100%;
			object-fit: cover;
			object-position: left center;
		}
		.box_before::before {
			content: '';
			z-index: 1;
			position: absolute;
			top: 0;
			right: -27px;
			bottom: 0;
			width: 50px;
			height: 50px;
			margin: auto;
			border-radius: 50%;
			background-image: url(/img/hakaseai/slide_ar.webp);
			background-repeat: no-repeat;
			background-size: cover;
		}
		.slider_range {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			opacity: 0;
			cursor: col-resize;
		}
	}
}