@charset "UTF-8";
/* CSS Document */

#pageWrap {
    padding: 0 0;
}
.notes-area {
    margin: 0 auto 0;
}
.boxWidth {
	container-type: inline-size;
}
#sec01 {
	position: relative;
}
#sec01 .h3Box {
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translateX(-50%);
	h3 {
		font-size: 2.1cqw;
		letter-spacing: 0.1em;
		font-size: clamp(16px, 2.2cqw, 24px);
	}
	p {
		font-size: 16px;
		font-size: clamp(13px, 1.6cqw, 16px);
		padding-top: 0.6em;
	}
}
#sec01 .kigou {
	position: absolute;
	width: 17%;
	right: 10%;
	bottom: 10%;
}

#sec02 {}
#sec02 .boxWidth {
	max-width: 1100px;
	background-color: #000;
	padding: 30px;
}
#sec02 .flex01 {
	h3 {
		width: 67%;
		color: #fff000;
		border-top: #fff000 solid 1px;
		border-bottom: #fff000 solid 1px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3.2cqw;
		line-height: 1;
		.num {
			font-size: 300%;
			display: inline-block;
			position: relative;
			top: -0.1em;
		}
		.kanbi{
			font-size: 180%;
		}
		sup {
			font-size: 20%;
			color: #fff;
			display: inline-block;
			position: relative;
			vertical-align: super;
			top: -2em;
	
		}
	}
	.imgBox {
		width: 29.5%;
	}
	
}
#sec02 p.lead {
		color: #fff;
	font-size: 16px;
	padding: 2em 0;
	}
#sec02 .merit {
	background-color: #fff;
	h4 {
		width: 100%;
		background-color: #fff000;
		color: #000;
		font-size: 24px;
		padding: 0.1em;
	}
}
#sec02 .merit .flex02 {
	padding: 20px;
	.imgBox {
		width: 23.5%;
		max-width: 244px;
	}
	.flex03 {
		container-type: inline-size;
		width: 75%;
		gap:20px 0;
		dl{
			position: relative;
			padding-left: 6.8cqw;
		}
		dl::before {
			position: absolute;
			left: 0;
			top:3%;
			width: 6cqw;
			height: 6cqw;
			content: "1";
			background-color: #fff000;
			border: #000 solid 1px;
			font-size: 4cqw;
			line-height: 1.3;
		}
		dl:nth-child(2)::before {
			content: "2";
		}
		dl:nth-child(3)::before {
			content: "3";
		}
		dl:nth-child(4)::before {
			content: "4";
		}
		.dlL {

			width: 52%;
		}
		.dlR {

			width: 46%;
		}
		dt {
			text-align: left;
			font-size: 2.2cqw;
		}
		dd {
			text-align: left;
			font-size: 1.6cqw;
		}
	}
}

#sec03 {
	background: #FFFFFF;
	padding: 3% 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%);
	.boxWidth {
		max-width: 1100px;
		text-align: left;
	}
}
#sec03 .flex01 {
	.itemBox {
		width: 32%;
		max-width: 350px;
		container-type: inline-size;
		h4 {
			font-size: 5.3cqw;
			span {
				color: #ac0051;
				font-size: 150%;
				position: relative;
				display: inline-block;
				margin-right: 0.1em;
				top: 0.1em;
			}
		}
		p {
			padding-top: 0.5em;
			line-height: 1.4;
			text-align: justify;
			letter-spacing: -0.01em;
			.caption {
				font-size: 10px;
				padding-top: 0;
			}
		}
		ul {
			border: #777 solid 1px;
			padding: 0.2em 0.5em;
			line-height: 1.2;
			margin-top: 0.2em;
			li {
				padding: 0;
				font-size: 3.2cqw;
				display: inline-block;
				margin-right: 0.3em;
				letter-spacing: -0.05em;
			}
		}
	}
}
.capImg.illust::after {
	content: "image illustration"
}

#sec03 .flex02 {
	margin-top: 3%;
	.itemBox {
		width: 48.2%;
		max-width: 530px;
		background-color: #fff;
		.imgBox {
			width: 47.2%;
		max-width: 250px;
		}
		dl {
			flex: 1;
			padding: 1em;
			display: flex;
justify-content: flex-start;
align-items: center;
			flex-wrap: wrap;
			align-content: center;
			container-type: inline-size;
			dt{
				font-size: 7.3cqw;
			}
			dd{
				.caption {
					font-size: 10px;
				}
			}
		}
	}
}

#sec03 .flex03 {
	margin-top: 3%;
	background-color: #fff;
	box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
	padding: 30px;
	.leftBox {
		container-type: inline-size;
		width: 44%;
		h4 {
			text-align: center;
			font-size: 3.6cqw;
			padding-bottom: 1em;
		}
		h3{
			text-align: center;
			font-size: 4.8cqw;
			line-height: 1.4;
			
			img{
				width: 70%;
				max-width: 150px;
			}
			span {
				display: block;
				padding: 0;
				padding-top: 1em;
				font-size: 60%;
			}

		}
		.lead {
			text-align: center;
			font-size: 3.0cqw;
			padding-top: 2em;
		}
	}
	.rightBox {
		width: 53%;
		max-width: 550px;
		container-type: inline-size;
		.fig {}
		.flex033 {
			.txtBox {
				width: 72%;
			}
			padding-top: 10px;
			p {
				width: 48%;
				line-height: 1.3;
				padding: 0 0 0.4em 0;
				font-size: 2.4cqw;
				i {
					font-style: normal;
					color: #409fbd;
				}
					span {
						display: block;
						padding-left: 1em;
						color: #409fbd;
						letter-spacing: -0.02em;
				}
				sup {
					font-size: 50%;
					vertical-align:super;
				}
				}
			.cap {
				width: 100%;
				font-size: 10px;
			}
			.imgBox {
				width: 26.2%;
				max-width: 144px;
			}
		}
	}
	.btBox {
		padding-top: 30px;
	width: 100%;
		text-align: center;
		a {
			display: inline-block;
			margin: 0 auto;
			background-color: #409fbd;
			color: #fff;
			padding: 0.5em 7em;
			border-radius: 10px;
			box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
			font-size: 15px;
			line-height: 1.3;
			i {
				font-size: 70%;
				font-style: normal;
			}
			span {
				display: block;
				font-size: 110%;
				&::after{
					content: "▼";
					font-size: 75%;
					display: inline-block;
					transform: rotateZ(-90deg);
					margin-left: 0.5em;
				}
			}
		}
	}
}
#sec03 .flex04 {
	margin-top: 3%;
	background-color: #fff;
	box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
	padding: 30px;
	.h3Box {
		width: 100%;
		h3 {
			font-size: 20px;
			padding-right: 3em;
			border-bottom: #000 solid 1px;
			padding-bottom: 0.2em;
		}
		.lead {
			font-size: 14px;
			padding: 1em 0;
		}
	}
	.leftBox {
		width: 53%;
		max-width: 550px;
	}
	.rightBox {
		width: 37.2%;
		max-width: 410px;
	}
}


@media screen and (max-width: 959px){
	#sec02 .merit .flex02 {
	.imgBox {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	.flex03 {
		width: 100%;
		padding-top: 20px;
		}
	}
	#sec03 .flex01 {
		max-width: 350px;
		margin: 0 auto;
	.itemBox {
		width: 100%;
		h4 {
			font-size: 5.3cqw;
		}
		p {
			font-size: 4cqw;
		}
		}
	}
	#sec03 .flex02 {
		margin: 0 auto;
		max-width: 600px;
		
	margin-top: 3%;
	.itemBox {
		padding: 20px;
		width: 100%;
		max-width: 600px;
		.imgBox {
			width: 47.2%;
		max-width: 250px;
		}
		
		}
	}

#sec03 .flex02 .itemBox  dl dd {
	font-size: 4.8cqw; 
}
	#sec03 .flex03 {
		max-width: 600px;
		box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
		padding: 30px;
		.leftBox {
			container-type: inline-size;
			width: 100%;
			.lead {
				font-size: 2.6cqw;
				padding: 2em 0;
			}
		}
		.rightBox {
			width: 100%;
			max-width: 600px;
			container-type: inline-size;
			.fig {}

		}

	}
	#sec03 .flex04 {
		box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
		padding: 30px;
		max-width: 600px;
		.h3Box {

			h3 {
				font-size: 3.3cqw;
			}
			.lead {
				font-size: 2.6cqw;
			}
		}

		.leftBox {
			width: 100%;
			max-width: 550px;
			padding-bottom: 8px;
		}
		.rightBox {
			width: 100%;
			max-width: 410px;
			margin: 0 auto;
		}
	}
}

@media screen and (max-width: 599px){
	#sec01 .h3Box {
		h3 {
			font-size: 2.1cqw;
			letter-spacing: 0.1em;
			font-size: clamp(15px, 4.2cqw, 28px);
		}
		p {
			font-size: 16px;
			font-size: clamp(12px, 3.2cqw, 16px);
			padding-top: 0.6em;
		}
	}
	#sec01 .kigou {
    position: absolute;
    width: 45%;
    right: 2%;
    bottom: 8%;
}
	
	#sec02 .boxWidth {
    padding: 20px;
		width: 100%;
	}
	#sec02 .flex01 {

		h3 {
			width: 100%;
			font-size: 5.2cqw;
			.num {
			}
			.kanbi{
			}
			sup {
			}
		}
		.imgBox {
			width: 100%;
			/*max-width: 400px;*/
			margin: 0 auto;
			padding-top: 10px;
		}
	}
	#sec02 p.lead {
		font-size: clamp(13px, 4cqw, 16px);
    padding: 2em 0;
	}
	#sec02 .merit {
		/*max-width: 400px;*/
		margin: 0 auto;
    h4 {
       font-size: 20px;
			
    }
	}
	#sec02 .merit .flex02 {
		.flex03 {
			.dlL,.dlR {
				width: 100%;
      }
    }
	}
	#sec02 .merit .flex02 {
    .flex03 {
        gap: 10px 0;
    }
}
	#sec02 .merit .flex02 {
		padding: 15px;

	.flex03 {
		.dlL {
			width: 100%;
		}
		.dlR {
			width: 100%;
		}
		dt {
			text-align: left;
			font-size: 5.6cqw;
			font-size: clamp(13px, 5.6cqw, 18px);
			line-height: 1.3;
		}
		dd {
			text-align: left;
			font-size: 4.6cqw;
			font-size: clamp(12px, 4.6cqw, 15px);
			line-height: 1.3;
			padding: 0.2em 0;
		}
	}
}
	#sec03 .flex01 {
		width: 86%;
		.itemBox {
			padding: 15px 0;
        }
    }

	#sec03 .flex02 {
		.itemBox {
			padding: 20px;
			width: 100%;
			max-width: 350px;
			margin: 0 auto;
     }
    }
	#sec03 .flex02 .itemBox .imgBox {
		width: 100%;
		max-width: 100%;
	}
	#sec03 .flex02 .itemBox dl dt {
		font-size: 7.3cqw;
		font-size: clamp(14px, 6.6cqw, 18px);
	}
	#sec03 .flex03 .leftBoxh4 {
		font-size: 4cqw;
		font-size: clamp(14px, 4cqw, 16px);
	}
	    #sec03 .flex03 {
        padding: 15px;
    }
	#sec03 .flex03 .leftBox .lead {
		font-size: 3.0cqw;
		font-size: clamp(13px, 3.6cqw, 16px);
	}
	#sec03 .flex03  .rightBox  .flex033 {
		padding-top: 10px;
		flex-direction: column-reverse;
		.imgBox {
			width: 50%;
			margin: 0 auto;
			max-width: 250px;
			padding-bottom: 20px;
		}
		.txtBox {
			width: 100%;
			p {
				width: 100%;
				font-size: clamp(13px, 4.6cqw, 18px);
				span {
					display: inline;
          padding-left: 0em;
				}
			}
			.cap {
				font-size: 10px;
			}
		}
		

	}

	#sec03 .flex03  .btBox a {
		padding: 0.5em 3em;

	}
	#sec03 .flex04 {
		padding: 15px;
		.h3Box {
			h3 {
				font-size: clamp(13px, 5cqw, 18px);
				line-height: 1.3;
			}
			.lead {
				font-size: clamp(13px, 3.6cqw, 16px);
    }

	}


}