@charset "utf-8";

main {
	line-height: 1;
}

main .mainVisual {
	position: relative;
}

main .mainVisual img {
	max-width: 100%;
	height: auto;
}

main .mainVisual .bold_23px {
	position: absolute;
	bottom: 2%;
	left: 2%;
}

main .bold_20px {
	line-height: 3.25;
	background: #00afCC;
	text-align: center;
	color: #f4f6f5;
}

main .section1 {
	text-align: center;
	padding-top: 34px;
	background: #ffffff;
}

main .section1 .flexArea { 
	margin: 19px auto 0;
	padding-bottom: 32px;
	justify-content: center; /* 左右余白(最大160px * 2) */
	gap: 20px; /* 要素間の余白(固定20px * 3) */
}

main .section1 .flexArea li a { /* 固定幅(130px * 4) */
	display: block;
	color: #858585;
	border: 5px solid #c1e9dd;
	border-radius: 50%;
	line-height: 130px; /* 固定する */
	width: 130px; /* 固定する */
	text-align: center;
}

main .section1 .flexArea li a:hover {
	border: 5px solid #00afCC;
	color: #000000;

}

main .section2 { /* 背景色と縦方向の設定 */
	background: #f4f6f5;
	padding-top: 26px;
	padding-bottom: 38px;
	text-align: center;
}

main .section2 table { /* 固定幅500px */
	line-height: 3.6672;
	width: 500px;
	margin: 17px auto 19px;
	background: #ffffff;
}

main .section2 table .t_consultation_hours { /* 固定幅200px */
	width: 200px;
}

main .section3 { /* 最大幅752px */
	padding-left: max(10px, calc((100% - 649px) * 0.2949));
	padding-right: max(10px, calc((100% - 649px) * 0.2949));
	flex-wrap: nowrap;
	justify-content: center;
	gap: max(20px,calc((100% - 649px) * 0.4104));
	background: #ffffff;
}

main .s3_left { /* 現在幅213px */
	padding-top: 25px;
	padding-bottom: 24px;
}

main .s3_left dt {
	line-height: 1;
	padding-bottom: 19px;
}

main .s3_left dd,
main .s3_left p,
main .s3_right dt,
main .s3_right dd {
	line-height: 1.5;
}

main .s3_left p {
	padding-left: 3em;
}

main .s3_right {
	padding-top: 25px;
	width: 65%;
	max-width: 436px;
}

main .s3_right h2 {
	line-height: 1;
	padding-bottom: 19px;
}

main .s3_right dl {  /* 最大幅436px */
	padding-bottom: 23px;
}

main .s3_right dd {
	padding-left: 1em;
}

/* 画面サイズ600px以下の場合 */

@media (max-width: 600px) {

	main .mainVisual picture {
		max-width: 100%;
		height: auto;
	}

	main .mainVisual .bold_23px {
		font-size: 1.6rem;
		line-height: 1.125;
		display: flex;
		flex-wrap: wrap;
	}

	main .mainVisual .bold_23px span {
		display: block;
	}

	main .bold_20px {
		line-height: 1.1429;
		font-size: 1.5rem;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		justify-content: center;
		padding: 5px 0;
	}

	main .bold_20px .full-width_midpoint {
		display: none;
	}

	main .bold_20px span {
		display: block;
	}

	main .section1 {
		padding-top: 20px;
	}
	
	main .section1 .flexArea { 
		margin: 11px auto 0;
		position: relative;
		height: 287px;
	}

	main .section1 .flexArea li {
		position: absolute;
		/* font-size: 14px; */
		/* line-height: 122px; */
		/* width: 122px; */
	}

	main .section1 .flexArea li:first-child {
		top: 0%;
		left: calc((100% - 280px) / 3);
	}

	main .section1 .flexArea li:nth-child(2) {
		top: 0%;
		right: calc((100% - 280px) / 3);
	}

	main .section1 .flexArea li:nth-child(3) {
		top: 50%;
		left: calc((100% - 280px) / 3);
	}

	main .section1 .flexArea li:last-child {
		top: 50%;
		right: calc((100% - 280px) / 3);
	}

	main .section2 { /* 背景色と縦方向の設定 */
		padding-top: 22px;
		padding-bottom: 21px;
	}

	main .section2 h2 {
		font-size: 1.6rem;
	}

	main .section2 table {
		margin: 10px auto 20px;
		width: 93.75%; 
	}

	main .section2 table tr,
	main .section2 table th,
	main .section2 table td	{
		font-size: 1.4rem;
		line-height: 1.7857;
	}

	main .section2 table .t_consultation_hours { 
		width: 40%; 
	}

	main .section3 { 
		padding-left: 10px;
		padding-right: 11px;
		gap: 0 22px;
		flex-wrap: wrap;
		justify-content: center;
	}

	main .s3_left {
		padding-top: 21px;
		padding-bottom: 13px;
	}

	main .s3_left dt {
		font-size: 1.6rem;
		padding-bottom: 11px;
	}

	main .s3_left dd,
	main .s3_left p,
	main .s3_right dt,
	main .s3_right dd {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	main .s3_right {
		width: 341px;
	}

}