@charset "utf-8";

.environmentPage{
	background: var(--Blue-3);
	/* scroll-margin-top: 0; */

	.pageHead{
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			padding-top: 10.5rem;
			width: 103rem;
			img{
				width: 72.4rem;
			}
		}
		@media (width <= 767px) {/* SP */
			display: block;
			padding-top: 4rem;
			width: 29.5rem;
			img{
				width: 23.2rem;
			}
		}
	}
	.pageCnt{
		overflow: hidden;
		padding: 7rem 0 16rem;
		@media (width <= 767px) {/* SP */
			padding: 3.5rem 0 4.8rem;
		}
		.pageCnt__in{
			flex-direction: column;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			position: relative;
			@media (width > 767px) {/* PC */
				padding-left: 12rem;
				width: 91rem;

			}
			@media (width <= 767px) {/* SP */
				display: block;
			}
		}
	}
	.topSec{
		.topSec__in{
			position: relative;
		}
		.kvBlock{
			position: relative;
			@media (width <= 767px) {/* SP */
				width: 29.5rem;
				margin-left: auto;
			}
			.img{
				max-width: none;
				width: 100%;
			}
		}
	
		.pageTtl{
			position: absolute;
			@media (width > 767px) {/* PC */
				padding-left: 2.6rem;
				padding-top: .5rem;
				width: 4.4rem;
				left: -12rem;
				height: 31rem;
			}
			@media (width <= 767px) {/* SP */
				left: 3rem;
				width: 1.91rem;
				top: 0rem;
			}
		}
	}
	
	.lclNavBlock{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-weight: 700;
		margin-top: 4rem;
		font-size: 2rem;
		gap: 1.5rem;
		@media (width > 767px) {/* PC */
			font-size: 2.5rem;
		}
		@media (width <= 767px) {/* SP */
			margin: 4.5rem 0 0 4rem;
			font-size: 1.8rem;
			gap: 1.8rem;
		}
		a{
			display: flex;
			align-items: center;
     	line-height: 1;
			&: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;
			}
		}
	}

	.cntarea{
		letter-spacing: .05em;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 200%; /* 30px */
		@media (width > 767px) {/* PC */
			max-height: none !important;
			width: 91rem;
		}
		@media (width <= 767px) {/* SP */

		}
	}



	.secHead{
		@media (width > 767px) {/* PC */
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1.6rem;
			margin-bottom: 4.5rem;
		}
		@media (width <= 767px) {/* SP */
			position: relative;
			width: 29.5rem;
			margin: 0 auto 3rem;
		}
		.ttl{
			position: relative;
			font-weight: 700;
			font-size: 3rem;
			@media (width <= 767px) {/* SP */
				font-size: 2.8rem;
				white-space: nowrap;
				z-index: 1;
				line-height: 1.4;
			}
		}
		.num{
			color: #fff;
			font-weight: 700;
			font-size: 7rem;
			@media (width <= 767px) {/* SP */
				position: absolute;
				right: 0;
				top: 2rem;
			}
		}
	}
	.secTopBlock{
		position: relative;
		margin-top: 3rem;
		@media (width <= 767px) {/* SP */
			width: 29.5rem;
			margin: 0 auto 1rem;
		}
		.ttl{
			display: flex;
			flex-direction: column;
			gap:1rem;
			
			font-size: 1.5rem;
			@media (width > 767px) {/* PC */
				font-size: 2rem;
				padding: .2rem 0;
			}
			@media (width <= 767px) {/* SP */
				width: 29.5rem;
			}
			span{
				color: #fff;
				background: var(--cc-black-A);
				padding-left: .8rem;
			}
		}
		.txt{
			text-align: justify;
			line-height: 2;
			font-size: 1.8rem;
			margin-top: 2rem;
			@media (width > 767px) {/* PC */
				line-height: 1.6;
			}
			@media (width <= 767px) {/* SP */
				font-size: 1.4rem;
			}
		}
	}
	

	.sec1{
		padding-top: 6rem;
		margin-bottom: 6rem;
		@media (width <= 767px) {/* SP */
			padding-top: 4rem;
			margin-bottom: 1rem;
		}
		.secTopBlock{
			@media (width > 767px) {/* PC */
				margin-top: 8.5rem;
				.ttl{
					gap: 0;
					width: 57.7rem;
					background: var(--cc-black-A);
					flex-direction: row;
					font-size: 2.2rem;
				}
				.txt{
					line-height: 1.9;
					width: 57.7rem;
					font-size: 2rem;
				}
			}
			.img{
				
				@media (width > 767px) {/* PC */
					position: absolute;
					right: 0;
					top: 0;
					width: 29.5rem;
				}
				@media (width <= 767px) {/* SP */
					width: 100%;
					margin-top:2rem;
				}
			}
		}


		.kensyuSec{
			margin-top: 8rem;
			font-size: 1.4rem;
			@media (width > 767px) {/* PC */
				font-size: 1.8rem;
			}
			@media (width <= 767px) {/* SP */
				margin-top:3rem;
			}
			.kensyuSec__head{
				margin-bottom: 7rem;
				@media (width <= 767px) {/* SP */
					width: 30rem;
					margin: 0 auto 3rem;
				}
				.secTtl{
					text-align: center;
					position: relative;
					color: #fff;
					margin-bottom: 5rem;
					
					.txt{
						font-weight: 700;
						font-size: 2.8rem;
					}
					
					@media (width > 767px) {/* PC */
						padding-right: 2rem;
					}
					@media (width <= 767px) {/* SP */
						text-align: center;
						line-height: 1.4;
						margin-bottom: 3.5rem;
						.txt{
							position: relative;
							z-index: 1;
						}
					}
					.obj-1{
						position: absolute;
						width: 4.45rem;
						@media (width > 767px) {/* PC */
							left: 11.2rem;
							top: -2.4rem;
						}
						@media (width <= 767px) {/* SP */
							left: -1.3rem;
							bottom: 0rem;
						}
					}
					.obj-2{
						position: absolute;
						width: 7.49rem;
						right: 11.5rem;
						top: -2.4rem;
					}
				}
	
				.toptxtBlock{
					.txt1{
						background: var(--cc-yellow);
						line-height: 1;
						font-weight: 700;
						font-size: 1.6rem;
						@media (width > 767px) {/* PC */
							padding: 1rem .5rem .5rem .5rem;
							font-size: 3rem;
						}
						@media (width <= 767px) {/* SP */
							/* width: 20.5rem; */
							width: 100%;
						}
					}
					.txt2{
						letter-spacing: 0;
						line-height: 1;
						font-weight: 700;
						color: #fff;
						margin-top: 2rem;
						@media (width > 767px) {/* PC */
							font-size: 2rem;
						}
						@media (width <= 767px) {/* SP */

						}
					}
				}
			}
			.kensyuSec__cnt{
				@media (width > 767px) {/* PC */
					/* width: 93.4rem; */
				}
				@media (width <= 767px) {/* SP */
					margin-left: 3.8rem;
				}
				.pclineBlock{
					display: flex;
					justify-content: space-between;
					position: relative;
					height: .9rem;
					margin-top: 7rem;
					margin-bottom: 1rem;
					&.-top{
						margin-top: 0;
					}
					.line{
						position: absolute;
						width: 5000px;
						background: #fff;

						height: 1px;
						top: 0.4rem;;
						&.-c{
							left: 50%;
							transform: translateX(-50%);
						}
						&.-r{
							right: 0;
						}
					}
					.clm{
						position: relative;
						width: 28rem;
						&:last-child{
							width: 27rem;
						}
						&.dot{
							&::before{
								position: absolute;
								border-radius: 50%;
								background: #fff;
								content: '';
								left: 0;
								width: .9rem;
								height: .9rem;
							}
							&.-l:before{
								left: -.3rem;
							}
						}
					}
				}
				

				.itemList{
					.ttlDot{
						position: relative;
						&:before{
							background: #fff;
							border-radius: 50%;
							content: '';
							position: absolute;
							left: -2rem;
							top: 0.5rem;
							width: .9rem;
							height: .9rem;
							@media (width > 767px) {/* PC */
								left: -3.46rem;
								top: 0.7rem;
								width: 1.3rem;
								height: 1.3rem;
							}
						}
					}
					.item{
						
						position: relative;
						&:before{
							content: '';
							position: absolute;
							top: 0;
							left: .85rem;
							width: 1px;
							height: 100%;
							background: #fff;
							@media (width > 767px) {/* PC */
								left: -0.15rem;
							}
						}
						@media (width > 767px) {/* PC */
							padding-left: 2.8rem;
						}
						@media (width <= 767px) {/* SP */
							width: 28rem;
							padding-left: 2.5rem;
							
						}
						.item__head{
							line-height: 1;
							
							color: #fff;
							white-space: nowrap;
							font-size: 2rem;
							margin-bottom: 1rem;
							@media (width > 767px) {/* PC */
								font-size: 3rem;
								display: flex;
								align-items: center;
							}
							.-sml{
								font-size: 1rem;
								@media (width > 767px) {/* PC */
									margin-left: 2rem;
									font-size: 1.5rem;
								}
								@media (width <= 767px) {/* SP */
									display: block;
									text-align: right;
									margin-top: .3rem;
								}
							}
							.konna{
								width: 13.9rem;
								margin-right: 1.5rem;
								@media (width > 767px) {/* PC */
									position: relative;
                 	left: -2.8rem;
									width: 18.7rem;
								}
								@media (width <= 767px) {/* SP */
									position: relative;
									left: -1.5rem;
								}
							}
						}
						.itemTtl{
							white-space: nowrap;
							background: var(--cc-black-A);
							color: #fff;
							font-weight: 700;
							line-height: 1;
							font-size: 1.3rem;
							margin-top: 1.5rem;
							letter-spacing: 0.1em;
              padding: .4rem .8rem;
							@media (width > 767px) {/* PC */
								letter-spacing: 0.04em;
								font-size: 2rem;
								margin-top: 3rem;
								padding: .6rem .8rem;
							}
							@media (width <= 767px) {/* SP */
								margin-top: 2rem;
    						width: 25.5rem;
							}
						}
						.balloon{
							box-sizing: border-box;
							border-radius: 2rem;
							border: solid .13rem #fff;
							background: var(--Blue-3);
							position: relative;
							color: #fff;
							margin-top: 4rem;
							font-weight: 700;
							line-height: 210%; /* 29.4px */
							padding: 2.4rem 2.4rem 1.4rem;
							@media (width > 767px) {/* PC */
								line-height: 1.6;
								font-size: 1.8rem;
								width: 29.8rem;
								position: absolute;
								right: 0;
								top: 0;
								margin-top: 0;
							}
							@media (width <= 767px) {/* SP */
								left: -2.4rem;
                width: 29.9rem;
							}
							&:before{
								content: '';
								background: url(../images/environment/ballon-obj.png) top center /100% auto no-repeat;
								width: 2.85rem;
								height: 3.2rem;
								position: absolute;
								
								@media (width > 767px) {/* PC */
									background-image: url(../images/environment/ballon-obj-pc.png);
									width: 3.1rem;
									height: 2.95rem;
									left: -2.6rem;
									top: 3.7rem;
								}
								@media (width <= 767px) {/* SP */
									right: 4rem;
				                	top: -2.4rem;
								}
							}
							img{
								padding: 1rem 0;
								@media (width <= 767px) {/* SP */
									width: 100%;
								}
							}
						}

						.voice{
							position: relative;
							background: var(--cc-yellow);
							border-radius: 3.2rem;
							display: flex;
							align-items: center;
							gap: .5rem;
							padding: .7rem 0 .6rem 1rem;
							@media (width > 767px) {/* PC */
								box-sizing: border-box;
								width: 53rem;
								padding: 0;
								padding: 1.2rem 0 1.2rem 7.5rem;
								letter-spacing: 0;
							}
							.voice__img{
								width: 4.8rem;
								@media (width > 767px) {/* PC */
									position: absolute;
									left: 0;
									top: 50%;
									transform: translateY(-50%);
									width: 6.93rem;
								}
							}
							.voice__txt{
								color: var(--cc-black-A);
								font-weight: 700;
								line-height: 1.2;
								font-size: 1.3rem;
								@media (width > 767px) {/* PC */
									font-size: 1.8rem;
								}
							}
						}
						&.-item1{
							
							.item1__txtImg{
								position: relative;
								margin-top: 1rem;
								margin-bottom: 1rem;
								@media (width > 767px) {/* PC */
									margin-top: 2.5rem;
								}
								@media (width <= 767px) {/* SP */
									margin-bottom: 1rem;
								}
								.ttl{
									color: #fff;
									font-weight: 700;
									font-size: 1.5rem;
									@media (width > 767px) {/* PC */
										font-size:2rem;
									}
								}
								.txt{
									@media (width > 767px) {/* PC */
										display: flex;
										align-items: center;
										text-align: center;
										line-height: 1.3;
										font-size: 1.8rem;
										margin-bottom: 3rem;
										gap: 3rem;
										margin-left: .3rem;
										li{
											&:last-child{
												margin-left: -1.2rem;
											}
										}
									}
								}
								.img{
									@media (width <= 767px) {/* SP */
										position: absolute;
										top: 0;
										right: .3rem;
										width: 9.83rem;
									}
									@media (width > 767px) {/* PC */
										width: 46.5rem;
										margin: 2rem 0 1.3rem 3rem;
									}
								}
							}
							&:before{
								top: 1rem;
							}
							@media (width > 767px) {/* PC */
								height: 46rem;
								.balloon{
									top: 13rem;
								}
							}
						}

						&.-item2{
							@media (width > 767px) {/* PC */
								height: 47rem;
							}
							.item2__txtImg{
								margin-top: 1rem;
								margin-bottom: 1rem;
								@media (width > 767px) {/* PC */
									margin-top: 2.5rem;
								}
								.ttl{
									color: #fff;
									font-weight: 700;
									font-size: 1.5rem;
									@media (width > 767px) {/* PC */
										font-size:2rem;
									}
								}
								.txts{
									display: flex;
									flex-direction: column;
									
									margin-top: 0.2rem;
									gap: 1.1rem;
									line-height: 1.6;
									letter-spacing: -.04em;
									@media (width <= 767px) {/* SP */
										white-space: nowrap;
										.img{
											margin: .5rem auto 1.5rem;
											width: 24.63rem;
										}
									}
									@media (width > 767px) {/* PC */
										flex-wrap: wrap;
										flex-direction: row;
										justify-content: space-between;
										width: 54.4rem;
										margin-top: 3rem;
										margin-bottom: 3.5rem;
										gap: 2.5rem 0rem;
										.txts__item{
											display: flex;
											align-items: center;
											gap: 1rem;
										}
										.txts__img{
											width: 8.9rem;
											img{
												margin: 0 auto;
												&.-ico-1{
													width:5.4rem;
												}
												&.-ico-2{
													width:8.9rem;
												}
												&.-ico-3{
													width:8rem;
												}
											}
										}
										p{
											font-size: 1.8rem;
											
										}
									}
									b{
										letter-spacing: 0;
										font-weight:700;
										font-size: 1.5rem;
										@media (width > 767px) {/* PC */
											font-size: 2rem;
											margin-bottom: .3rem;
										}
										&:before {
											content: "・";
										}
									}
									
								}
								
							}
							.balloon{
								@media (width > 767px) {/* PC */
									top: 13rem;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 1.8rem;
							}
						}
						&.-item3{
							@media (width > 767px) {/* PC */
								padding-bottom: 5rem;
							}
							.txt{
								line-height: 2.1;
								margin-bottom: .5rem;
								@media (width > 767px) {/* PC */
									width: 53rem;
									margin-top: 2.5rem;
									line-height: 1.6;
								}
							}
							@media (width > 767px) {/* PC */
								.item__head{
									flex-direction: column;
									align-items: flex-start;
									gap: 2rem;
									.ttlDot{
										&:before{
											display: none;
										}
									}
								}
								.imgBox{
									position: absolute;
									right: 0;
									top: 2rem;
									width: 31.1rem;
									height: 17rem;
									img{
										object-fit: cover;
										object-position: right center;
										width: 100%;
										height: 100%;
									}
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3rem;
								.txt{
									margin-top: 1.3rem;
								}
								.ttlDot{
									margin-top: 1.3rem;
								}
							}
						}
						&.-item4{
							.item4__txt{
								margin-top: 1.2rem;
								@media (width > 767px) {/* PC */
									margin-top: 2.2rem;
									padding-bottom: 3.5rem;
								}
								.ttl{
									color: #fff;
									font-weight: 700;
									font-size: 1.5rem;
									@media (width > 767px) {/* PC */
										font-size: 2rem;
									}
								}
								.txts{
									display: flex;
									flex-direction: column;
									gap: .5rem;
									@media (width > 767px) {/* PC */
										flex-direction: row;
										margin-top: 2rem;
									}
									dl{
										dt{
											font-weight: 700;
											font-size: 1.5rem;
											@media (width > 767px) {/* PC */
												font-size: 2rem;
											}
										}
										dd{
											@media (width > 767px) {/* PC */
												line-height: 1.6;
												margin-top: .5rem;
												.-pcindent{
													padding-left: 0.5rem;
												}
											}
											@media (width <= 767px) {/* SP */
												white-space: nowrap;
												line-height: 2;
											}
											li {
												padding-left: 0.5rem;
												text-indent: -0.5em;
											}
											li:before {
												content: "・";
												width: 0.5rem;
											}
										}
									}
								}
							}
							.balloon{
								@media (width > 767px) {/* PC */
									top: 13rem;
								}
								@media (width <= 767px) {/* SP */
									margin-top: 3rem;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3.7rem;
								.itemTtl{
									margin-top: 3rem;
								}
								
							}
						}
						&.-item5{
							.txt{
								line-height: 2;
								letter-spacing: 0.03em;
							}
							.voice{
								margin: 2rem 0;
							}
							@media (width > 767px) {/* PC */
								padding-bottom: 2rem;
								.item__head{
									flex-direction: column;
									align-items: flex-start;
									gap: 2rem;
									.ttlDot{
										&:before{
											display: none;
										}
									}
								}
								.txt{
									width: 53rem;
									margin: 2.4rem 0 3rem;
									line-height: 1.6;
								}
								.img{
									position: absolute;
									right:0;
									top: 1rem;
									width: 31.1rem;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3rem;
								.item__head{
									line-height: 1;
									p{
										margin-top: 1.5rem;
									}
								}
								.voice{
									margin: 1.5rem 0;
								}
							}
						}
						&.-item6{
							@media (width > 767px) {/* PC */
								padding-bottom: 5rem;
							}
							.toptxt{
								@media (width > 767px) {/* PC */
									margin: 2rem 0 2.5rem;
								}
								@media (width <= 767px) {/* SP */
									margin-top: 1.3rem;
								}
							}
							.item6__txts{
								display: flex;
								flex-direction: column;
								margin-top: 1.3rem;
								gap: 3.2rem;
								@media (width > 767px) {/* PC */
									flex-direction: row;
									justify-content: space-between;
									gap: 0;
									& > div{
										width: calc(50% - 1rem);
									}
								}
								@media (width <= 767px) {/* SP */
									margin-top: 3.2rem;
								}
								.ttl{
									color: #fff;
									line-height: 1;
									font-size: 1.3rem;
									letter-spacing: 0.1em;
									padding: .4rem .8rem;
									@media (width > 767px) {/* PC */
										text-align: center;
										line-height: 1.2;
										font-size: 2rem;
									}
									&.-pink{
										background: var(--cc-pink);
									}
									&.-och{
										background: var(--cc-ocher);
									}
								}
								.subTtl{
									line-height: 1;
									font-weight: 700;
									font-size: 1.5rem;
									margin: 1.6rem 0 1rem;
									@media (width > 767px) {/* PC */
										font-size: 2rem;
										margin-top: 2.7rem;
									}
								}
								.txt{
									line-height: 2;
									@media (width > 767px) {/* PC */
										line-height: 1.6;
									}
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3.5rem;
								.itemTtl{
									margin-top: 3rem;
								}
							}
						}
						&.-item7{
							.bangaiTxt{
								@media (width > 767px) {/* PC */
									position: relative;
									/* width: 93.4rem; */
									width: 11.4rem;
									margin-right: 1rem;
								}
								@media (width <= 767px) {/* SP */
									width: 8.65rem;
									position: absolute;
									top: -5rem;
									left: -3.3rem;
								}
							}
							@media (width > 767px) {/* PC */
								padding-bottom: 3.5rem;
								.item__head{
									margin-bottom: 2rem;
								}
								.ttlDot{
									&::before{
										left: -16rem;
									}
								}
								.txt{
									width: 53rem;
								}
								.img{
									width: 31.1rem;
									position: absolute;
									right: 0;
									top: 0;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 7rem;
								.item__head{
									position: relative;
									.doki{
										position: absolute;
										width: 8.95rem;
										left: 18rem;
										top: -4rem;
									}
								}
							}
						}
						&.-item8{
							img{
								padding-top: 1rem;
							}
							@media (width <= 767px) {/* SP */
								img{
									padding-top: .5rem;
								}
							}
						}
						&.-item9{
							@media (width > 767px) {/* PC */
								&:before{
									height: 1.5rem;
								}
								p{
									margin-top: 2rem;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3.5rem;
								&:before{
									height: 4.5rem;
								}
							}
						}
						
						&.-item10{
							.ttl{
								padding-top: 1.3rem;
								font-weight: 700;
								font-size: 2rem;
								line-height: 1;
								margin-bottom: 1rem;
							}
							.txt{
								@media (width > 767px) {/* PC */
									width: 53rem;
								}
							}
							.txtImg{
								margin: 2.4rem 0;
								width: 26.5rem;
								@media (width > 767px) {/* PC */
									position: absolute;
									margin: 0;
									top: 6rem;
									right: 0;
									width: 30.2rem;
								}
							}
							.btn{
								width: 27rem;
								margin-bottom: 2rem;
								@media (width > 767px) {/* PC */
									width: 53rem;
									margin-top: 4rem;
								}
								a{
									display: block;
									background: url(../images/common/ico-arw.svg) center right .4rem / 2.3rem 2.3rem var(--cc-black-A) no-repeat;
									color: #fff;
									border-radius: 0 3rem 3rem 0;
									position: relative;
									padding-left: 1rem;
									@media (width > 767px) {/* PC */
										font-size: 2rem;
									}
								}
							}
							.prof{
								width: 27rem;
								@media (width > 767px) {/* PC */
									width: 55rem;
								}
								.prof__txtarea{
									display: flex;
									color: #fff;
									margin-top: .6rem;
									@media (width > 767px) {/* PC */
										justify-content: space-between;
									}
								}
								.prof__txt{
									width: 50%;
									@media (width > 767px) {/* PC */
										display: flex;
										width: auto;
										align-items: flex-start;
										.profimg{
											width: 13.3rem;
											margin-right: 1.3rem;
										}
									}
									p{
										letter-spacing: 0;
										white-space: nowrap;
										font-size: 1.2rem;
										line-height: 1.4;
										@media (width > 767px) {/* PC */
											font-size: 1.6rem;
										}
										.name{
											font-size: 1.5rem;
											@media (width > 767px) {/* PC */
												font-size: 2rem;
											}
										}
									}
								}
							}
							&:before{
								top: 1rem;
							}
							@media (width > 767px) {/* PC */
								padding-bottom: 3.5rem;
								.item__cnt{
									margin-top: 2.2rem;
								}
							}
							@media (width <= 767px) {/* SP */
								.ttl{
									padding-top: 2.6rem;
								}
							}
						}
						&.-item11{
							.item__cnt{
								@media (width > 767px) {/* PC */
									margin-top: 2rem;
									padding-bottom: 3.5rem;
								}
							}
							.ttl{
								padding-top: 1.3rem;
								font-weight: 700;
								font-size: 2rem;
								line-height: 1;
								margin-bottom: 1rem;
							}
							.txt{
								@media (width > 767px) {/* PC */
									width: 53rem;
									margin: 2rem 0 2rem;
								}
							}
							.txt2{
								.txt2__ttl{
									color: #fff;
									font-size: 1.5rem;
									font-weight: 700;
									@media (width > 767px) {/* PC */
										font-size: 2rem;
										margin-bottom: 0.5rem;
										letter-spacing: .1em;
									}
								}
								.txt2__list{
									li{
										&:before {
											content: "・";
										}
									}
									@media (width > 767px) {/* PC */
										display: flex;
										flex-wrap: wrap;
										width: 52rem;
										line-height: 1.64;
										li{
											width: 50%;
											&:nth-child(1){
												order: 1;
											}
											&:nth-child(2){
												order: 3;
											}
											&:nth-child(3){
												order: 5;
											}
											&:nth-child(4){
												order: 2;
											}
											&:nth-child(5){
												order: 4;
											}
										}
									}
								}
							}
							.bgBkTxt{
								display: flex;
								flex-direction: column;
								gap: .7rem;
								margin: 2rem 0 1rem;
								@media (width > 767px) {/* PC */
									background: var(--cc-black-A);
									margin: 3rem 0 1rem;
									flex-direction: row;
									gap: 0;
									font-size: 2rem;
									padding: .7rem 0 .6rem .6rem;
								}
								span{
									letter-spacing: 0;
									line-height: 1;
									color: #fff;
									background: var(--cc-black-A);
									padding: .5rem 0 .2rem .6rem;
									@media (width > 767px) {/* PC */
										letter-spacing: .03em;
										padding: 0;
									}
								}
							}
							.balloon{
								margin-top: 3rem;
								@media (width > 767px) {/* PC */
									top: 17rem;
									margin-top: 0;
								}
							}
							
							@media (width <= 767px) {/* SP */
								padding-top: 4rem;
								.ttl{
									padding-top: 3rem;
								}
							}
						}
						&.-item12{
							&:before{
								@media (width > 767px) {/* PC */
									height: 1.5rem;
								}
								@media (width <= 767px) {/* SP */
									height: 4rem;
								}
							}
							.voice{
								margin-top: 2.5rem;
								@media (width > 767px) {/* PC */
									letter-spacing: .05em;
									margin-top: 3rem;
									padding: 0.5rem 0 0.5rem 7.5rem;
								}
							}
							@media (width <= 767px) {/* SP */
								padding-top: 3.5rem;
							}
						}

						&.-item3,&.-item6,&.-item9,&.-item12{
							@media (width <= 767px) {/* SP */
								width: 27rem;
							}
						}
					}/* .item */
				}

				.midtxtBlock{
					@media (width > 767px) {/* PC */
						margin-top: 12rem;
						margin-bottom: 5.5rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 3.4rem;
						margin-bottom: 3.6rem;
					}
					.txt{
						background: var(--cc-yellow);
						line-height: 1;
						font-weight: 700;
						font-size: 1.6rem;
						@media (width > 767px) {/* PC */
							padding: 1rem .5rem .5rem .5rem;
              font-size: 3rem;
						}
						@media (width <= 767px) {/* SP */
							/* width: 20.5rem; */
							width: 29rem;
						}
					}
				}
			}/* .kensyuSec__cnt */
		}

	}

	.sec2{
		padding-top: 6rem;
		@media (width <= 767px) {/* SP */
			padding-top: 4rem;
		}
		.secHead{
			@media (width > 767px) {/* PC */
				padding-left: 2.5rem;
				.num{
					margin-left: -5rem;
				}
			}
		}
		.sec2__cnt{
			display: flex;
			flex-direction: column;
			gap:4rem;
			margin-top: 4rem;
			@media (width > 767px) {/* PC */
				/* width: 93.5rem; */
				gap:7rem;
			}
			@media (width <= 767px) {/* SP */
				gap: 1.5rem;
				width: 29.5rem;
				margin: 3rem auto 0;
			}
		}
		.cntBlock{
			color: #fff;
			position: relative;
			display: flex;
			padding: 4rem 4rem 3.5rem 4.5rem;
			
			@media (width > 767px) {/* PC */
				flex-direction: column;
				padding: 4.5rem 4.5rem 2rem 4.5rem ;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				padding: 1.8rem 2.3rem 2.5rem 2.3rem;
			}
			.headGraph{
				@media (width > 767px) {/* PC */
					position: absolute;
					left: 24rem;
					top: -1.2rem;
					z-index: 1;
				}
			}

			.blockLeft{
				
				@media (width > 767px) {/* PC */
					
					border-bottom: solid 1px #fff;
					padding-bottom: 1rem;
					padding-bottom: 2.5rem;
					margin-bottom: 3rem;
				}
				.blockTtl{
					text-align: center;
					font-size: 2.8rem;
					font-weight: 700;
					@media (width > 767px) {/* PC */
						padding: .5rem 0 0 0rem;
						font-size: 3.5rem;
					}
				}
				.txt{
					font-size: 1.4rem;
					font-weight: 700;
					line-height: 210%; /* 29.4px */
					letter-spacing: -.03em;
					
					@media (width > 767px) {/* PC */
						line-height: 1.6;
						margin-top: 4rem;
						font-size: 1.8rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top: .5rem;
					}
				}
			}
			.blockRight{
				position: relative;
				@media (width > 767px) {/* PC */
					
				}
				@media (width <= 767px) {/* SP */
					padding-top: 1rem;
				}
				.exttl{
					margin: 0 auto 1.5rem;
					width: 40rem;
					@media (width > 767px) {/* PC */
						width: 52.1rem;
						margin-left: 0;
					}
					@media (width <= 767px) {/* SP */
						width: 24.3rem;
					}
				}
				.txtList{
					color: #251E1C;
					display: flex;
					flex-direction: column;
					line-height: 210%;
					letter-spacing: -.1em;
					font-size: 1.4rem;
					&.-list-1{
						li{
							&:before {
								content: "・";
							}
						}
					}
					&.-list-2{
						li{
							&:before {
								content: "・";
							}
						}
					}
					@media (width > 767px) {/* PC */
						display: grid;
						grid-template-columns: repeat(2 ,1fr);
						width: 47.9rem;
						line-height: 1.6;
						font-size: 1.8rem;
						margin-top: 2rem;
						margin-bottom: 2rem;

						&.-list-1{
							li{
								&:nth-child(1){
									order: 1;
								}
								&:nth-child(2){
									order: 3;
								}
								&:nth-child(3){
									order: 5;
								}
								&:nth-child(4){
									order: 2;
								}
								&:nth-child(5){
									order: 4;
								}
								&:nth-child(6){
									order: 6;
								}
							}
						}
						&.-list-2{
							li{
								&:nth-child(1){
									order: 1;
								}
								&:nth-child(2){
									order: 3;
								}
								&:nth-child(3){
									order: 2;
								}
								&:nth-child(4){
									order: 4;
								}
							}
						}
					}
					@media (width <= 767px) {/* SP */
						margin-bottom: 1.5rem;
					}
				}
				.graph{
					@media (width > 767px) {/* PC */
						position: absolute;
						/* left: 0;
						bottom: 0; */
						top: 0;
						right: 0;
					}
				}
				.balloon{
					@media (width > 767px) {/* PC */
						
					}
					@media (width <= 767px) {/* SP */
						margin: 0 auto;
						width: 24.4rem;
					}
				}
			}

			.peopleBlock{
				display: flex;
				justify-content: space-between;
				margin-top: 2.5rem;
				@media (width > 767px) {/* PC */
					width: 43.5rem;
					margin: 2.5rem auto 0;
				}
				@media (width <= 767px) {/* SP */
					display: block;
					position: relative;
					width: 24.5rem;
					margin: 2rem auto 0;
				}
				.peopleBlock__img{
					@media (width > 767px) {/* PC */
						width: 13.3rem;
					}
					@media (width <= 767px) {/* SP */
						width: 8.2rem;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
				.peopleBlock__info{
					line-height: 1;
					@media (width > 767px) {/* PC */
						width: 29rem;
					}
					.link{
						border-radius: 0 3rem 3rem 0;
						background:url(../images/common/ico-arw.svg) center right .4rem /2.3rem 2.3rem var(--cc-black-A) no-repeat ;
						color: #fff;
						line-height: 1;
						display: block;
						font-size: 1.4rem;
						padding: .7rem 0 .7rem 1.3rem;
						@media (width > 767px) {/* PC */
							font-size: 2rem;
						}
						@media (width <= 767px) {/* SP */
							background-position: center right 2.7rem ;
						}
					}
					.dep{
						font-size: 1.2rem;
						margin-top: 1.5rem;
						@media (width > 767px) {/* PC */
							font-size: 1.6rem;
						}
						@media (width <= 767px) {/* SP */
							margin-top: 2.5rem;
							margin-left: 10rem;
						}
					}
					.name{
						margin-top: .5rem;
						font-size: 1.5rem;
						@media (width > 767px) {/* PC */
							font-size: 2rem;
						}
						@media (width <= 767px) {/* SP */
							margin-left: 10rem;
							padding-bottom: 1.5rem;
						}
						.-sml{
							font-size: 1.2rem;
							@media (width > 767px) {/* PC */
								font-size: 1.6rem;
							}
						}
					}
				}
			}
		}
		.-block1{
			background: var(--cc-pink);
			.headGraph{
				width: 11.45rem;
				@media (width <= 767px) {/* SP */
					width: 7.3rem;
					margin: 0 auto 1.5rem;
				}
			}
			.blockRight{
				.graph{
					width: 31.25rem;
					@media (width <= 767px) {/* SP */
						width: 25.8rem;
						max-width: none;
						margin-left: -.5rem;
					}
				}
			}
		}
		.-block2{
			background: var(--cc-ocher);
			.headGraph{
				@media (width > 767px) {/* PC */
					margin-left: -4.3rem;
					width: 13.8rem;
				}
				@media (width <= 767px) {/* SP */
					width: 8.7rem;
					margin: 0 auto 1.5rem;
				}
			}
			.blockRight{
				.graph{
					width: 28.75rem;
					@media (width <= 767px) {/* SP */
						width: 23.7rem;
						margin: 2rem auto 0.1rem;
					}
				}
				.balloon{
					@media (width > 767px) {/* PC */
						top: 7.5rem;
					}
				}
			}
		}
	}
	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}
}