@charset "utf-8";

.requirePage {
	background: #e8d200;
	.pageHead{
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			width: 103.5rem;
			padding: 11rem 0 7.4rem 0.7rem;
			position: relative;
		}
		@media (width <= 767px) {/* SP */
			width: 29.5rem;
			padding: 4rem 0 3rem;
		}
		img{
			@media (width > 767px) {/* PC */
				width: 39.9rem;
			}
			@media (width <= 767px) {/* SP */
				width: 20rem;
			}
		}
	}

	.pageCnt{
		position: relative;
		font-weight: 700;
		margin: 0 auto;
		padding-bottom: 16rem;
		line-height: 1.9;
		font-size: 2rem;
		@media (width > 767px) {/* PC */
			position: relative;
			width: 103.5rem;
		}
		@media (width <= 767px) {/* SP */
			line-height: 2.1;
			font-size: 1.4rem;
			padding-bottom: 5rem;
		}
		.pageTtl{

			@media (width > 767px) {/* PC */
				position: absolute;
				left: 0;
				top: 0;
				width: 7.6rem;
			}
			@media (width <= 767px) {/* SP */
				margin-left: 4rem;
				width: 10.6rem;
			}
			img{
				width: 100%;
			}
		}
		.pageCnt__in{
			@media (width > 767px) {/* PC */
			}
		}
		.lclNavBlock{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			font-weight: 700;
			font-size: 2rem;
			gap: 1.3rem;
			width: 79.5rem;
			margin-left: 12rem;
			margin-bottom: 18rem;
			letter-spacing: 0.06em;
			@media (width > 767px) {/* PC */
				font-size: 2.6rem;
			}
			@media (width <= 767px) {/* SP */
				width: auto;
				margin: 2rem 0 2.3rem 4.4rem;
				font-size: 1.9rem;
				gap: 1.9rem;
			}
			a{
				display: flex;
				align-items: center;
				line-height: 1.2;
				&:before{
					background: url(../images/common/ico-arw.svg) center center /cover no-repeat;
					content: '';
					display: inline-block;
					width: 2.7rem;
					height: 2.7rem;
					margin-right: 1rem;
				}
			}
		}
		.secHead{
			img{
				width: 100%;
			}
		}

		.secCnt{
			font-size: 2rem;
			font-weight: 700;
			line-height: 190%; /* 38px */
			@media (width <= 767px) {/* SP */
				line-height: 2.1;
				font-size: 1.4rem;
			}
		}

		.secBtn{
			margin-top: 4rem;
			font-size: 1.7rem;
			@media (width <= 767px) {/* SP */
				position: relative;
				left: -4rem;
				width: 33.5rem;
				margin-top: 2.2rem;
			}
			a{
				position: relative;
				text-align: center;
				display: block;
				color: #fff;
				background: var(--cc-black-A);
				line-height: 1;
				border-radius: 0 2rem 2rem 0;
				padding: 1.2rem 0;
				background: url(../images/require/btn_icon-blue.png) center right .5rem / 2.7rem 2.7rem var(--cc-black-A) no-repeat;
				@media (width <= 767px) {/* SP */
					background: url(../images/require/btn_icon-blue.png) center right 1.8rem / 2.3rem 2.3rem var(--cc-black-A) no-repeat;
					text-align: left;
					padding: 1.6rem 0 1.6rem 4.7rem;
					border-radius: 0 1rem 1rem 0;
				}
			}
		}

		.sec1{
			margin-bottom: 8.2rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 4rem;
			}
			.secCnt{
				margin-top: 2.8rem;
				@media (width <= 767px) {/* SP */
					margin-left: auto;
					margin-right: auto;
					width: 31.5rem;
					margin-top: 2.3rem;
				}
			}
			.list{
				border: 1px solid var(--cc-yellow-2);
				font-weight: 700;
				line-height: 200%; /* 30px */
				font-size: 1.84rem;
				@media (width > 767px) {/* PC */
					display: flex;
				}
				@media (width <= 767px) {/* SP */
					line-height: 1.6;
					font-size: 1rem;
				}
				.list__clm{
					@media (width > 767px) {/* PC */
						display: inline-flex;
						flex-direction: column;
						align-items: flex-start;
						width: 50%;
						&:first-child{
							border-right: 1px solid var(--cc-yellow-2);
						}
					}
					@media (width <= 767px) {/* SP */
						&:first-child{
							border-bottom: 1px solid var(--cc-yellow-2);
						}
					}
				}
				.listItem{
					width: 100%;
					display: flex;
					border-bottom: 1px solid var(--cc-yellow-2);
					&:last-child{
						border-bottom: none;
					}
					.listItem__label{
						background: #7F7F7F;
						box-sizing: border-box;
						color: #FFF;
						width: 11.2rem;
						padding: 0.9rem 1.4rem;
						white-space: nowrap;
						line-height: 1.5;
						@media (width <= 767px) {/* SP */
							padding: .5rem .8rem;
							width: 7.1rem;
						}
					}
					.listItem__label.type01{
						@media (width > 767px) {/* PC */
							padding: 0.9rem 1.4rem;
						}
						@media (width <= 767px) {/* SP */
							padding-top: 1rem;
						}
					}
					.listItem__val{
						box-sizing: border-box;
						background: var(--White, #FFF);
						border-left: 1px solid var(--cc-yellow-2);
						padding: 0.9rem 1.6rem;
						width: calc(100% - 11.2rem);
						line-height: 1.55;
						letter-spacing: -0.02em;
						@media (width > 767px) {/* PC */
							&.-pcAdjst{
								height: 16rem;
							}
						}
						@media (width <= 767px) {/* SP */
							padding: 0.5rem 1.2rem;
							width: calc(100% - 7.1rem);
						}
						li:before {
							content: "・";
						}
					}
					.listItem__val.type01{
						@media (width > 767px) {/* PC */
							padding: 0.9rem 1.6rem;
							letter-spacing: 0.04em;
						}
						@media (width <= 767px) {/* SP */
							padding-top: 1rem;
						}
					}
					.listItem__val.type02{
						@media (width > 767px) {/* PC */
							letter-spacing: -0.05em;
						}
					}
					.listItem__val.type03{
						@media (width > 767px) {/* PC */
							/* line-height: 1.43; */
						}
					}
				}
				.right {
					.listItem__val {
						@media (width > 767px) {/* PC */
							line-height: 1.645;
						}
					}
				}
				.clm_small {
					.listItem__label{
						@media (width > 767px) {/* PC */
							font-size: 1.3rem;
							font-weight: 400;
						}
					}
					.listItem__val{
						@media (width > 767px) {/* PC */
							font-size: 1.3rem;
							font-weight: 400;
							line-height: 2.1;
						}

					}
				}
			}
			.secBtn{
				letter-spacing: 0.06em;
				@media (width <= 767px) {/* SP */
					left: -3rem;
					font-size: 1.4rem;
				}
				a {
					padding-right: 5rem;
				}
			}
		}

		.sec2{
			margin-bottom: 7.8rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 2rem;
			}
			.secCnt{
				margin-top: 5.7rem;
				@media (width <= 767px) {/* SP */
					margin-left: auto;
					margin-right: auto;
					width: 29.5rem;
					margin-top: 3.6rem;
				}
			}
			.topBlock{
				dl{
					display: flex;
					align-items: flex-start;
					line-height: 1.5;
					margin-bottom: 1.2rem;
					gap: 1.5rem;
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						gap: .5rem;
						margin-bottom: 1rem;
					}
					dt{
						background: #FFF;
						width: 13.7rem;
						padding-left: 0.6rem;
						box-sizing: border-box;
						@media (width <= 767px) {/* SP */
							width: 100%;
							padding-left: 0;
							font-size: 1.3rem;
							letter-spacing: -0.04em;
						}
					}
					dd{
						line-height: 1.8;
						@media (width <= 767px) {/* SP */
							line-height: 2.2;
							font-size: 1.3rem;
							letter-spacing: -0.04em;
						}
					}
				}
			}
			.entryBlock{
				position: relative;
				@media (width <= 767px) {/* SP */
					margin-top: -.5rem;
				}
				.blockTtl_warp {
					display: flex;
					@media (width <= 767px) {/* SP */
						flex-wrap: wrap;
					}
				}
				.pointTtl{
					width: 10rem;
					@media (width <= 767px) {/* SP */
						width: 3rem;
					}
				}
				.blockTtl{
					background: #FFF;
					margin-bottom: 3rem;
					line-height: 1.5;
					@media (width > 767px) {/* PC */
						width: 13.7rem;
						height: 3rem;
						padding-left: 0.6rem;
						box-sizing: border-box;
					}
					@media (width <= 767px) {/* SP */
						width: 100%;
						margin-top: 0.6rem;
						margin-bottom: 2.6rem;
					}
				}
				.point1{
					@media (width <= 767px) {/* SP */
						padding-bottom: 3rem;
					}
					.pointTtl{
						margin-left: 2rem;
						@media (width <= 767px) {/* SP */
							position: absolute;
							left: 0.4rem;
							top: 6.2rem;
							margin-left: 0;
						}
					}
					.point1_txtarea {
						width: 75.8rem;
						margin-left: 1rem;
						@media (width <= 767px) {/* SP */
							margin-left: 5rem;
						}
					}
					.txt1{
						font-size: 2rem;
						line-height: 1;
						@media (width <= 767px) {/* SP */
							line-height: 2.1;
							font-size: 1.4rem;
						}
					}
					.txt2{
						margin-top: 1rem;
						font-size: 1.6rem;
						line-height: 1.7;
						letter-spacing: -0.05em;
						@media (width <= 767px) {/* SP */
							font-size: 1rem;
						}
					}
					.logoList{
						display: flex;
						justify-content: space-between;
						margin-top: 2.2rem;
						margin-left: 15.4rem;
						@media (width <= 767px) {/* SP */
							flex-wrap: wrap;
							gap:1.2rem 0;
							width: 24.4rem;
							margin-left: auto;
							margin-top: 2.5rem;
						}
						li{
							width: 20rem;
							@media (width <= 767px) {/* SP */
								width: 11.6rem;
							}
						}
						img{
							width: 100%;
						}
					}
				}
				.pointBox{
					position: relative;
					margin-top: 2.6rem;
					margin-left: 15.4rem;
					@media (width > 767px) {/* PC */
						display: flex;
					}
					@media (width <= 767px) {/* SP */
						display: flex;
						font-size: 1.2rem;
						line-height: 1.7;
						justify-content: space-between;
						margin-top: 1.5rem;
						margin-left: 0;
					}
					+ .pointBox{
						@media (width <= 767px) {/* SP */
						margin-top: 3rem;
						}
					}
					.pointTtl {
						padding-top: 0.4rem;
					}

					.pointBox__txtarea{
						margin-left: 1.6rem;
						@media (width <= 767px) {/* SP */
							width: 25rem;
						}
						.ttl{
							@media (width > 767px) {/* PC */
								font-size: 2rem;
								margin-bottom: .8rem;
								line-height: 1.6;
							}
						}
						.txt {
							font-size: 1.6rem;
							line-height: 1.7;
							letter-spacing: -0.05em;
							@media (width <= 767px) {/* SP */
								font-size: 1rem;
							}
						}
						.spTtl{
							@media (width <= 767px) {/* SP */
								font-size: 1.4rem;
								margin-bottom: 1rem;
								line-height: 2.1;
								margin-top: -0.2rem;
								letter-spacing: -0.07em;
							}
						}
						.spTtl.type01 {
							@media (width <= 767px) {/* SP */
								margin-top: 1.8rem;
							}
						}
						.spTtl.type02 {
							@media (width <= 767px) {/* SP */
								margin-top: 2.2rem;
							}
						}
					}

				}
				.secBtn{
					margin-top: 2rem;
					letter-spacing: 0.06em;
					@media (width <= 767px) {/* SP */
						margin-top: 1.8rem;
						font-size: 1.4rem;
					}
				}
			}
		}

		.sec3{
			.secCnt{
				display: flex;
				flex-direction: column;
				gap: 5.5rem;
				margin-top: 5.6rem;
				@media (width <= 767px) {/* SP */
					margin-left: auto;
					margin-right: auto;
					width: 31.5rem;
					margin-top: 3.7rem;
					gap: 2.7rem;
				}
			}
			.acd{
				.acd__head{
					color: #FFF;
					background:  var(--cc-blue-1);
					position: relative;
					line-height: 1;
					padding: 1rem .9rem;
					font-size: 2rem;
					@media (width <= 767px) {/* SP */
						text-align: center;
						font-size: 1.8rem;
					}
					&::after{
						content: '';
						position: absolute;
						right: .8rem;
						top: 50%;
						transform: translateY(-50%) rotate(90deg);
						background: url(../images/require/btn_icon.png) center center /cover no-repeat;
						width: 2.7rem;
						height: 2.7rem;
					}
				}
				.acd__cnt{
					overflow: hidden;
					max-height: 0;
					transition: max-height 0.4s ease;
					@media (width <= 767px) {/* SP */
						padding: 0 0.6rem;
					}
				}
				&.is-open{
					margin-bottom: 2rem;
					.acd__head::after{
						transform: translateY(-50%) rotate(-90deg);
					}
				}
			}
			.qaList{
				display: flex;
				flex-direction: column;
				padding-top: 1.6rem;
				gap: 0.6rem;
				@media (width <= 767px) {/* SP */
				padding-top: 1.8rem;
				gap: 1.4rem;
			}
			}
			.qaItem{
				display: flex;
				flex-direction: column;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1.8;
				@media (width <= 767px) {/* SP */
					gap: 0;
					font-size: 1.4rem;
					line-height: 2.1;
					letter-spacing: -0.04em;
				}
				dt{
					color: var(--cc-blue-1);
				}
			}
		}

	}

	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}
}