@charset "utf-8";

/*--hero section--*/
.hero-section {
	margin:0 auto ;
	background: linear-gradient(135deg, #ADBAD1 0%, #DBE0EB 50%, #F6F9FF 80% ,#f5f5f5 100%);
	text-align:center;
	font-size:1.25rem;
	line-height:2rem;
	h2 {
		letter-spacing: -0.02em;
		color:var(--blue);
		font-size:3.75rem;
		line-height:1.25;
		margin-bottom:0.5em;
		font-weight:400;
		}
	p{
		max-width:56rem;
		margin:0 auto;
	}
	.flex {
		justify-content:center;
		margin:2.0em auto;
		a {
			padding:1.0em 2.0em;
		}
	}
	span {
		margin:0 0.4em ;
		color:var(--primary);
	}
}
/*--section-01--*/
.section-01 {
	h2 {
		margin-bottom:1.0em;
		font-weight:300;
		line-height:1.25;
	}
	ul {
	list-style:inside disc;
		li {
			margin-top:1.0em;
		}
		li::marker {
			color:var(--primary);
		}
	}
	.grid-2 {
		align-items:center;
	}
	figure {
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 4px 8px var(--shadow);
		img {
			height:auto;
		}
}
}

/*--section-02--*/
.section-02 {
	h2 {
		font-weight:300;
		line-height:1.25;
	}
	.grid-4 {
		background:#fff;
		border-radius:16px;
		box-shadow:0px 16px 16px var(--shadow);
		padding:1.8em 1.0em;
		letter-spacing: -0.02em;
		.number {
			font-weight:900;
			font-size:3.0rem;
			line-height:1.0;
		}
		h3 {
			margin:1.0em 0;
			font-weight:500;
			font-size:1.25rem;
			line-height:1.0;
		}
}
}
/*--section-03--*/
.section-03 {
	background:linear-gradient(180deg, var(--cream) 50%, #fefefe 100%);
	h3 {
		min-height:100px;
		height:auto;
	}
	dl {
		font-size:1.05rem;
		dt {
			font-size:1.2rem;
			font-weight:600;
			margin:1.6em 0 0.6em;
			i {
				margin-right:0.5em;
			}
		}
		dd {
			margin-left:1.6em;
		}
	}
}

/*--section-04--*/
.section-04 {
	background:#fefefe;
	h2 {
		margin-bottom:1.6em;
	}
	.grid-3 {
		.card {
			position:relative;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 2px;
				background: linear-gradient(90deg, transparent, var(--primary), transparent);
			}
			i {
				font-size:2.4rem;
				display:block;
				text-align:center;
				line-height:1.0;
				margin:0.4em 0 0.8em;
			}
			h3 {
				font-size:1.5rem;
				line-height:1.25;
				font-weight:500;
				margin-bottom:1.0em;
			}
			.list-check {
				padding-top:1.0em;
			}
		}
	}
}

/*--section-05--*/
.section-05 {
	background:linear-gradient(180deg, var(--cream) 50%, #fefefe 100%);
	text-align:center;
	.step-by-step {
		display:grid;
		grid-template-columns: repeat(5, 1fr);
		gap:16px;
		margin-bottom:4.0em;
		counter-reset: num;
		.card {
			box-shadow:0px 0px 8px var(--shadow);
			padding:1.6em 1.0em;
			margin-top:4.0em;
			position:relative;
			counter-increment: num;
			&::before {
				display:block;
				content: counter(num , decimal-leading-zero); 
				line-height:1.0;
				color: var(--white);
				font-weight:600;
				position:absolute;
				top:-72px;
				left: calc( 50% - 24px);
				width:48px;
				height:48px;
				padding-top:14px;
				background: var(--primary);
				border-radius:50%;
			}
			&::after {
				display:block;
				content:"";
				width:2.0em;
				height:2px;
				background:var(--primary);
				position:absolute;
				top:-50px;
				right:-28px;
			}
			dt {
				font-size:1.175rem;
				font-weight:600;
			}
			dd {
				p {
					font-size:.875rem;
					line-height:1.25;
					margin-top:1.5em;
					color:#666;
				}
				strong {
					display:inline-block;
					width:auto;
					background:#DBE0EB;
					font-size:.875rem;
					line-height:1.0;
					font-weight:600;
					border-radius:16px;
					margin-top:2.0em;
					padding:0.5em 1.4em;
				}
			}
		}
		dl:last-child::after {
			content:none;
		}
	}
	.button-area {
		width:65%;
		margin-left:auto;
		margin-right:auto;
		.button01 {
			display:block;
			width:100%;
			padding:1.0em 2.0em;
		}
	}
}

/*--section-06--*/
.section-06 {
	background:linear-gradient(rgba(213, 211, 240, 0.7), rgba(255, 255, 255, 1.0)), url(../img/bg-01.jpg) no-repeat center;
	background-size:cover;
	z-index:0;
	position:relative;
	overflow:hidden;
	&::before{
		content: '';
		background: inherit;
		-webkit-filter: blur(6px);
		-moz-filter: blur(6px);
		-o-filter: blur(6px);
		-ms-filter: blur(6px);
		filter: blur(6px);
		position: absolute;
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
		z-index: -1;
	}
	h3 {
		font-weight:400;
	}
	.text-lg {
		margin:2.0em 0;
	}
	h4 {
		font-weight:600;
	}
	.card {
		padding:1.5em 2.0em;
		position:relative;
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, var(--primary), transparent);
			}
		.flex {
			align-items:center;
			margin-bottom:2.0em;
			.mask-circle {
				width:120px;
				height:120px;
				border-radius:50%;
				overflow:hidden;
				box-shadow:0px 8px 20px var(--shadow);
				position:relative;
				background:#fff;
				border:5px solid #fff;
				img{
					display:block;
					margin:auto;
					width:120%;
					position:relative;
					top:-20px;
					filter: brightness(1.2);
					opacity:0.8;
					}
			}
		}
		ul {
			li {
				margin-top:1.0em;
				strong {
					font-weight:600;
				}
			}
		}
		ul + ul{
			border-top:1px solid #ccc;
			padding-top:2.0em;
			margin-top:2.0em;
		}

	}
}
/*--section-07--*/
.section-07 {
	background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 1.0)), url(../img/bg-02.jpg) no-repeat center;
	background-size:cover;
	z-index:0;
	position:relative;
	overflow:hidden;
	&::before{
		content: '';
		background: inherit;
		-webkit-filter: blur(4px);
		-moz-filter: blur(4px);
		-o-filter: blur(4px);
		-ms-filter: blur(4px);
		filter: blur(4px);
		position: absolute;
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
		z-index: -1;
	}
	h2 {
		color:var(--white);
		font-weight:400;
	}
	h3 {
		color:var(--white);
		margin-bottom:1.0em;
	}
	dt {
		font-weight:600;
		margin-bottom:1.0em;
		i {
			margin-right:0.5em;
		}
	}
	dd {
		margin-left:1.6em;
	}
}
/*--section-08--*/
.section-08 {
	background:#fefefe;
	.card {
		padding:2.0em 3.0em 1.0em;
		dt {
			margin-bottom:1.0em;
			font-weight:600;
			&::before {
				content:"Q";
				color:var(--primary);
				margin-right:0.8em;
			}
		}
		dd {
			margin:1.5em 0;
			padding:0 1.8em 1.5em;
			font-size:1.05rem;
			border-bottom:1px solid #ccc;
			}
		dd:last-of-type {
		border:none;
		}
	}
}
/*--section-form--*/
.section-form {
	background:#F6F9FF;
	.card {
		margin:3.0em 0 2.0em;
		padding:2.0em 4.0em;
		background: linear-gradient(135deg, #ADBAD1 0%, #DBE0EB 60%, #F6F9FF 100%);
		h3 {
			margin-bottom:1.0em;
			font-weight:500;
			color:var(--blue);
		}
		div {
			margin:1.0em 0;
			
			input,select,textarea {
				width:100%;
				padding:1.0em 0.5em;
				font-size:1.05rem;
				color:#666;
				border-radius:8px;
				background:#fff;
			}
			select[name="source"]{
				width:47.5%;
			}
			input:focus ,select:focus ,textarea:focus {
				outline:none;
				border:none;
			}
		}
		.terms-check {
			margin:3.0em 0;
			text-align:center;
			font-size:1.05rem;
			input[type="checkbox"] {
				width:auto;
				margin-right:0.5em;
			}
			a {
				margin:0 0.5em 0 1.0em;
				text-decoration:underline;
			}
			a:hover {
				text-decoration:none !important;
			}
			i {
				color:#666;
			}
		}
		.button01 {
		display:block;
		width:65%;
		padding:1.0em 2.0em;
		margin:0 auto;
		}
		p {
			margin-top:2.0em;
			color:#555;
			span {
				margin:2.0em 0.2em 0 1.0em;
			}
		}
	}
}


@media (max-width: 1024px) {

/*--hero-section --*/
.hero-section {
	p{
		max-width:100%;
	}
}
/*--section-01--*/
.section-01 {
	.grid-2 {
		align-items:center;
	}
}
/*--section-02--*/
.section-02 {
		padding-top: 2em;
}
/*--section-04--*/
.section-04 {
		padding-top: 2em;
	.grid-3 {
		.card {
			padding-left:6.5em;
			i {
				position:absolute;
				left:3rem;
				top:0.8rem;
			}
		}
	}
}
/*--section-05--*/
.section-05 {
	h2 {
		line-height:1.25;
	}
	.step-by-step {
		gap:1rem;
		.card {
			padding:1.2em 0.4em;
		}
	}
	.button-area {
		width:100%;
	}
}
/*--section-06--*/
.section-06 {
	.card {
		.flex {
			flex-flow: column;
			div {
				text-align:center;
			}
		}
	}
}
/*--section-08--*/
.section-08 {
	.card {
		padding:2.0em 1.5em 0;
		dt {
			text-indent:-1.6em;
			padding-left:1.6em;
		}
		dd {
			padding:0 0 1.5em 1.8rem;
			}
	}
}
/*--section-form--*/
.section-form {
	.card {
		.button01 {
		width:100%;
		}
	}
}

}

@media (max-width: 768px) {

/*--hero section--*/
.hero-section {
	line-height:1.5;
	h2 {
		font-size:1.875rem;
		line-height:2.6rem;
		font-weight:500;
		}
	.flex {
		a {
			font-size:1rem;
		}
	}
}
/*--section-01--*/
.section-01 {
	.grid-2 div{
		order:2;
	}
	figure {
		order:1;
	}
}

/*--section-02--*/
.section-02 {
	.grid-4 {
		padding:1.0em 1.0em;
		.number {
			font-size:2.5rem;
		}
		h3 {
			margin: 0.6em 0;
			font-size:1.1rem;
		}
}
	.grid-4 > div {
		margin-bottom:1.0em;
		}
}
/*--section-02--*/
.section-03 {
	h3 {
		min-height:auto;
	}
	.grid-2 div:nth-of-type(2) h3 {
		margin-top:1.2em;
}

}

/*--section-04--*/
.section-04 {
		padding-top: 2em;
	.grid-3 {
		.card {
			padding:1.5em 1.5em;
			i {
				position:static;
				margin:0em 0 0.5em;
			}
		}
	}
}
/*--section-05--*/
.section-05 {
	.step-by-step {
	grid-template-columns: repeat(1, 1fr);
		counter-reset: num;
		.card {
			margin-top:0;
			margin-left:4em;
			padding:1.0em 1.0em;
			text-align:left;
			&::before {
				top:0;
				left: -5.5em;
				font-size: 0.875rem;
				width:3em;
				height:3em;
				padding-top:1.0em;
				text-align:center;
			}
			&::after {
				display:block;
				content:"";
				width:2px;
				height:5rem;
				background:var(--primary);
				position:absolute;
				top:3.0em;
				right:0;
				left:-2.8em;
			}
			dd {
				p {
					margin-top:0.5em;
				}
				strong {
					margin-top:1.0em;
					font-size:0.75rem;
				}
			}
		}
	}
	.button-area {
		.button01 {
			padding:1.0em 0;
		}
	}
}



/*--section-form--*/
.section-form {
	h2 {
	font-size:2.0rem;
}
	.card {
		margin:2.0em 0 0;
		padding:1.5em 1.0em;
		h3 {
			font-size:1.8rem;
			text-align:left;
		}
		div {
			select[name="source"]{
				width:100%;
			}
		}
		.terms-check {
			margin:3.0em 0;
			text-align:center;
			font-size:1.05rem;
			input[type="checkbox"] {
				width:auto;
				margin-right:0.5em;
			}
		}
		.button01 {
		width:100%;
		padding:1.0em 0.1em;
		}
		p {
			margin-top:2.0em;
			color:#555;
			span {
				margin:2.0em 0.1em 0;
			}
		}
	}
}


}
