@charset "utf-8";
#about{

	@media (width <= 767px) {/* SP */
		padding-top: 3.2rem;
	}

	.c-introBlock{
		.in{
			/* @media (width > 1600px){
				width: 140rem;
			} */
			@media (width <= 767px) {/* SP */
				gap: 8rem;
			}
		}
		.txtarea{
			position: relative;

			@media (width > 767px) {/* PC */
				gap: 2.4em;
			}
			.txt{
				@media (width <= 767px) {/* SP */
					line-height: 2.12;
				}
			}
			p{
				position: relative;
			}
			.mapImg{
				img{
					max-width: none;
				}
				@media (width > 767px) {/* PC */
					position: absolute;
					left: 49.2rem;
					top: -6.4rem;
					img{

						width:87.1rem;
					}
				}
				@media (width <= 767px) {/* SP */
					width: 39rem;
					margin: 1rem 0 1rem -2rem;
					img{
						width: 38.2rem;
					}
				}
			}
		}
		.imgBlock{
			@media (width > 767px) {/* PC */
				width: 140rem;
			}
		}
	}

	.-txtStyle{
		text-align: justify;
		font-weight: 500;
		line-height: 2;
		letter-spacing: .12em;
		font-size: 1.6rem;
	}
	.p-pgCredit{
		position: absolute;
		color: #fff;
		font-family: var(--ff-avenir);
		line-height: 1;
		font-size: 1.6rem;

		@media (width > 767px) {/* PC */
			right: 1.2rem;
		bottom: 1rem;
		}
		@media (width <= 767px) {/* SP */
			color: var(--cc-gray-text);
			position: relative;
			padding: 1rem 1rem 0 0;
			text-align: right;
			font-size: 1.4rem;
		}
	}
	.pageCnt{
		color: var(--cc-gray-text);
		margin-left: auto;
		margin-right: auto;
		@media (width <= 767px) {/* SP */
			overflow: hidden;

		}
		img{
			max-width: none;
		}
		.secTtl{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-left: auto;
			margin-right: auto;
			@media (width > 767px) {/* PC */
				width: 120rem;
			}
			/* @media (width > 1600px){
				width: 140rem;
			} */
			@media (width <= 767px) {/* SP */
				width: 33rem;
			}
			.ttl{
				font-family: var(--ff-zen);
				display: flex;
				font-weight: 500;
				line-height: 130%;
				letter-spacing: .08em;
				font-size: 2.8rem;
				@media (width > 767px) {/* PC */
					background: var(--cc-red);
					padding-left: .5rem;
				}
				@media (width <= 767px) {/* SP */
					flex-direction: column;
					align-items: flex-start;
					gap: .8rem;
					font-size: 2.4rem;
				}
				span{
					display: inline-block;
					color: #fff;
					@media (width <= 767px) {/* SP */
						background: var(--cc-red);
						padding: .1rem .4rem .1rem .1rem;
					}
				}
			}
			.txt{
				text-align: justify;
				color: var(--cc-gray-text);
				font-weight: 500;
				line-height: 2;
				font-size: 1.6rem;
				margin-top: 4.8rem;
				letter-spacing: .12em;
				@media (width > 767px) {/* PC */
					width: 80rem;
				}

			}
		}
		.inKv{
			position: relative;
			height: 80rem;
			@media (width <= 767px) {/* SP */
				height: auto;
			}
			picture{
				height: 100%;
			}
			img{
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		.sec1{
			padding-top: 16rem;
			@media (width <= 767px) {/* SP */
				padding-top: 10rem;
			}
			figcaption{

				font-weight: 500;
				letter-spacing: .1em;
				line-height: 1.6;
				font-size: 1.5rem;
				margin-top: 1.2rem;
				@media (width <= 767px) {/* SP */
					margin-top: 2.5rem;
				}
			}
			.inKv{
				margin-top: 10rem;
				@media (width <= 767px) {/* SP */
					margin-top: 6.5rem;
				}
			}
			.block1Cnt{
				position: relative;
				margin-left: auto;
				margin-right: auto;
				@media (width > 767px) {/* PC */
					width: 128rem;
					height: 95rem;
					margin-top: 20rem;
				}
				@media (width <= 767px) {/* SP */
					width: 33rem;
					margin-top: 6.5rem;
				}
				img{
					width: 100%;
				}

				picture{
					img{
						width: 100%;
					}
					@media (width > 767px) {/* PC */
						position: absolute;
						width: 54.4rem;
					}
				}
				.img1{
					@media (width > 767px) {/* PC */
						position: absolute;
						width: 60rem;
						left: 0;
						top: 0rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 6.5rem;
						left: -3rem;
    					position: relative;
					}
				}
				.img2{

					@media (width > 767px) {/* PC */
						position: absolute;
						width: 32.8rem;
						right: 0;
						top: 40rem;
					}
					@media (width <= 767px) {/* SP */
						position: relative;
						left: 3rem;
                        width: 21.7rem;
                        max-width: none;
                        margin-top: 4rem;
					}
				}
				.img3{

					@media (width > 767px) {/* PC */
						position: absolute;
						width: 56rem;
						left: 8.5rem;
						bottom: 0;
					}
					@media (width <= 767px) {/* SP */
						position: relative;
                        max-width: none;
						width: 33rem;
                        margin-top: 7rem;
					}
				}
				.txt1{
					@media (width > 767px) {/* PC */
						position: absolute;
						left:72rem;
						top: 14.5rem;
						width: 36rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top:5rem
					}
				}
				.txt2{
					@media (width > 767px) {/* PC */
						position: absolute;
						width: 47.4rem;
						left: 72rem;
						bottom: 0;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 4.5rem;
					}
				}
			}
		}
		/* /.sec1 */

		.sec2{
			padding-top: 14.4rem;
			@media (width <= 767px) {/* SP */
				padding-top: 10rem;
			}
			.secTtl{
				.c-btn{
					margin-top: 3rem;
					@media (width <= 767px) {/* SP */
						margin-top: 4.5rem;
					}
				}
			}
			.inKv2{
				overflow: hidden;
				position: relative;
				margin-top: 7rem;

				.inKv2__in{
					margin-left: auto;
					margin-right: auto;
					@media (width > 767px) {/* PC */
						width: 120rem;
					}
					@media (width <= 767px) {/* SP */
						margin-right: 0;
						width: 36rem;
					}
					img{
						@media (width > 767px) {/* PC */
							width: 140rem;
							width: calc(120rem + ((100vw - 120rem)/2));
						}
						@media (width <= 767px) {/* SP */
							width: 100%;
						}
					}
				}
			}

			.topTxt{
				margin-left: auto;
				margin-right: auto;
				margin-top: 10.5rem;
				@media (width > 767px) {/* PC */
					width: 100rem;
				}
				@media (width <= 767px) {/* SP */
					margin-top: 6.5rem;
					width: 33rem;
					justify-self: center;

				}
				p{
					text-align:justify;
					@media (width > 767px) {/* PC */
						width: 100rem;
						margin-left: auto;
					}
				}
				.btnBlock{
					display: flex;
					flex-direction: column;
					@media (width > 767px) {/* PC */
						margin-top: 4rem;
						align-items: flex-end;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 5rem;
						align-items: center;
					}
				}
			}
			.topPhoto{
				width: 100%;
				max-width: 160rem;
				margin: 10rem auto 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img1{
					width: 87.6rem;
				}
				.img2{
					width: 48rem;
				}
			}
			.topBlock{
				background: var(--cc-back-gray);
				box-sizing: border-box;

				margin-left: auto;
				@media (width > 767px) {/* PC */
					padding: 8rem 17rem;
					width: 140rem;
					margin: 12rem auto 0;
				}
				@media (width <= 767px) {/* SP */
					padding: 5.6rem 0;
					width: 35rem;
					margin: 6.4rem auto 0;
				}
				.cnt{
					display: flex;
					@media (width > 767px) {/* PC */
						/* width:96rem; */
						justify-content: space-between;
						align-items: center;
					}
					@media (width <= 767px) {/* SP */
						flex-direction:column;
					}
				}
				.ttl{
					margin: 0 auto 6.5rem;
					width: 31.8rem;
					@media (width <= 767px) {/* SP */
						margin-bottom: 3.5rem;
						width: 28rem;
					}
					img{
						width: 31.8rem;
						height: auto;
						@media (width <= 767px) {/* SP */
							width: 100%;
							height: auto;
						}
					}
				}
				.list{
					display: flex;
					justify-content: center;
					gap: 6.4rem;
					width: 51.2rem;
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						margin: 0 auto;
						gap: 3.4rem;
						margin: 5.5rem auto 0;
                        width: 29rem;
					}
					.item{
						width: 56.8rem;
						@media (width <= 767px) {/* SP */
							width:100%;
						}
						.item__img{
							position: relative;
							img{
								width: 100%;
							}
							.csTxt{
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%,-50%);
								line-height: 1;
								color: var(--cc-red);
								letter-spacing: .05em;
								border-bottom: .15rem dashed var(--cc-red);
								font-size: 2.2rem;
								padding-bottom: 1rem;
								@media (width <= 767px) {/* SP */
									font-size: 1.6rem;
								}
							}
						}
						.item__txt{
							text-align: center;
							letter-spacing: .1em;
							font-size: 1.8rem;
							margin-top: 1.2rem;
							@media (width <= 767px) {/* SP */
								font-size: 1.6rem;
							}
						}
					}
				}
				.btnBlock {
					margin-top: 6.4rem;
					display: flex;
					justify-content: center;
					@media (width <= 767px) {/* SP */
						margin-top: 0;
					}
					.c-btn {
						background-color: transparent;
					}
				}
			}
			.nonfictionBlock{
				background: var(--cc-back-gray);
				box-sizing: border-box;

				margin-left: auto;
				@media (width > 767px) {/* PC */
					padding: 8rem 17rem;
					width: 140rem;
					margin: 12rem auto 0;
				}
				@media (width <= 767px) {/* SP */
					padding: 5.6rem 0;
					width: 35rem;
					margin: 6.4rem auto 0;
				}
				.cnt{
					display: flex;
					@media (width > 767px) {/* PC */
						/* width:96rem; */
						justify-content: space-between;
						align-items: center;
					}
					@media (width <= 767px) {/* SP */
						flex-direction:column;
					}
				}
				.c-btn{
					background: transparent;
				}
				.txtarea{
					display: flex;
					flex-direction: column;
					align-items: center;
					.ttl{
						margin-bottom: 5rem;
						@media (width <= 767px) {/* SP */
							margin-bottom: 3.5rem;
						}
						img{
							width: 31.8rem;
							@media (width <= 767px) {/* SP */
								width: 28rem;
							}
						}
					}
				}

				.movarea{
					position: relative;
					@media (width > 767px) {/* PC */
						width:51.2rem;
					}
					@media (width <= 767px) {/* SP */
						margin: 5.5rem auto 0;
						width: 29rem;
					}
					img{
						width: 100%;
					}
					.csTxt{
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						line-height: 1;
						color: var(--cc-red);
						letter-spacing: .05em;
						border-bottom: .15rem dashed var(--cc-red);
						font-size: 2.2rem;
						padding-bottom: 1rem;

					}
				}
			}
			.block2Cnt{
				position: relative;
				margin-left: auto;
				margin-right: auto;
				@media (width > 767px) {/* PC */
					max-width: 160rem;
					width: 100%;
					height: 121rem;
					margin-top: 12rem;
				}
				@media (width <= 767px) {/* SP */
					width: 33rem;
					margin-top: 6rem;
				}
				.txt1{
					@media (width > 767px) {/* PC */
						position: absolute;
						top: 0;
						right: 25.2rem;
					}
					.btnBlock{
						margin-top: 3rem;
					}
				}
				.img1{
					@media (width > 767px) {/* PC */
						position: absolute;
						top: 12rem;
						left: 0;
						width: 87.6rem;
					}
					@media (width <= 767px) {/* SP */
						width: 36rem;
						margin: 8rem 0 0 -3rem;
					}
					img{
						width: 100%;
					}
				}
				.txt2{
					text-align: justify;
					@media (width > 767px) {/* PC */
						position: absolute;
						top: 88rem;
						left: 10rem;
						width: 67.6rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 4rem;
					}
				}
				.img2{
					position: relative;
					@media (width > 767px) {/* PC */
						position: absolute;
						bottom: 0;
						right: 0;
						width: 58rem;
						height: 67.2rem;
					}
					@media (width <= 767px) {/* SP */
						height: 27rem;
						width: 39rem;
						margin: 4rem 0 0 -3rem;
					}
					.img2-1{
						position: absolute;
						top: 0;
						right: 0;
						img{
							width: 100%;
						}
						@media (width > 767px) {/* PC */
							width: 48rem;
						}
						@media (width <= 767px) {/* SP */
							width: 22.7rem;
						}
					}
					.img2-2{
						position: absolute;
						bottom: 0;
						left: 0;
						@media (width > 767px) {/* PC */
							width: 20rem;
						}
						@media (width <= 767px) {/* SP */
							width: 12.3rem;
						}
					}

				}
				.txt3{
					margin-top: 6rem;
				}
			}
		}
		/* /.sec2 */
		.sec3{
			@media (width > 767px) {/* PC */
				padding-top: 16rem;
			}
			@media (width <= 767px) {/* SP */
				padding-top: 10rem;
			}
			.eatBlock{
				display: flex;

				@media (width > 767px) {/* PC */
					width: 140rem;
					margin: 0 auto;
					justify-content: space-between;
					align-items: center;
				}
				@media (width <= 767px) {/* SP */
					flex-direction: column;
				}
				.secTtl{
					@media (width > 767px) {/* PC */

						width:49.6rem;
						margin: 0 ;
						.txt{
							width: auto;
						}
					}
					.btnBlock{
						margin-top: 3rem;
						@media (width <= 767px) {/* SP */
							margin-top: 4.5rem;
						}
					}
				}
				.eatBlock__imgarea{
					@media (width > 767px) {/* PC */
						width: 60rem;
					}
					@media (width <= 767px) {/* SP */
						width: 33rem;
						margin: 6rem auto 0;
					}
					.img1{
						margin-left: auto;
						@media (width > 767px) {/* PC */
							width: 48rem;
							margin-bottom: 4.8rem;
						}
						@media (width <= 767px) {/* SP */
							width: 26.4rem;
							margin-bottom: 3.2rem;
						}
					}
					.img2{
						@media (width > 767px) {/* PC */
							width: 48rem;
						}
						@media (width <= 767px) {/* SP */
							width: 26.4rem;
						}
					}
				}
			}
			.inKv{
				margin-top: 16rem;
				@media (width <= 767px) {/* SP */
					margin-top: 10rem;
				}
			}
			.cntBlock{
				.col-1{
					display: flex;
					margin:14.4rem auto 0;
					max-width: 160rem;
					width: 100%;
					@media (width > 767px) {/* PC */
						align-items: center;
					}
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						margin-top: 7rem;
					}
					.img{
						@media (width > 767px) {/* PC */
							width: 54.688%;
						}
						@media (width <= 767px) {/* SP */
							width: 31rem;
						}
					}
					p{
						@media (width > 767px) {/* PC */
							width: 25.875%;
							margin-left: 9.2%;
						}
						@media (width <= 767px) {/* SP */
							width: 33rem;
							margin: 4rem auto 0;
						}
					}
				}
				.col-2{
					display: flex;
					margin:10.4rem auto 0;
					width: 100%;
					@media (width > 767px) {/* PC */
						align-items: center;
						flex-direction: row-reverse;
						justify-content: space-between;
						width: 97.6rem;
					}
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						margin-top: 6rem;
						width: 33rem;
					}
					.img{
						@media (width > 767px) {/* PC */
							width: 48rem;
						}
						@media (width <= 767px) {/* SP */
							width: 30rem;
							margin-left: auto;
						}
					}
					p{
						@media (width > 767px) {/* PC */
							width: 38rem;
							padding-top: 2em;
						}
						@media (width <= 767px) {/* SP */
							padding-top: 4rem;
						}
					}
				}
			}
		}

		.sec4{
			padding-top: 16rem;
			@media (width <= 767px) {/* SP */
				padding-top: 10rem;
			}
			.secTtl{
				@media (width > 767px) {/* PC */
					width: 140rem;
				}
			}
			.cntBlock{
				margin: 0 auto;
				@media (width > 767px) {/* PC */
					width: 96rem;
					margin-top: 10rem;
				}
				@media (width <= 767px) {/* SP */
					width: 33rem;
				}
				.imgBlock{
					display: flex;
					margin-bottom: 7rem;

					@media (width <= 767px) {/* SP */
						flex-direction: column;
						margin: 8rem auto 4rem;
					}
					img{
						@media (width > 767px) {/* PC */
							width: 50%;
						}
					}

				}
			}
			.inKv4{
				overflow: hidden;
				position: relative;
				margin-top: 16rem;
				@media (width <= 767px) {/* SP */
					margin-top: 10rem;
				}
				.inKv4__in{
					margin-left: auto;
					margin-right: auto;
					position: relative;
					@media (width > 767px) {/* PC */
						width: 120rem;
					}
					@media (width <= 767px) {/* SP */
						margin-left: 0;
						width: 36rem;
					}
					img{
						@media (width > 767px) {/* PC */
							position: relative;
							width: 140rem;
							width: calc(120rem + ((100vw - 120rem)/2));
							right: calc(((100vw - 120rem)/2));
						}
						@media (width <= 767px) {/* SP */
							width: 100%;
						}
					}
				}
			}
		}

		.sec5{
			padding-top: 15rem;
			@media (width <= 767px) {/* SP */
				padding-top: 4rem;
			}
			.secHead{
				display: flex;
				margin-left: auto;
				margin-right: auto;
				@media (width > 767px) {/* PC */
					align-items: center;
					justify-content: space-between;
					width: 110rem;
					.secTtl{
						width: auto;
						margin: 0;
						padding-top: 5rem;
					}
					.txt{
						width: auto;
					}
				}
				@media (width <= 767px) {/* SP */
					flex-direction: column;
				}
				img{
					@media (width > 767px) {/* PC */
						width: 54.4rem;
					}
					@media (width <= 767px) {/* SP */
						width: 33rem;
                        margin: 4rem auto 0;
					}
				}
			}
			.cntBlock{
				position: relative;
				margin: 0 auto;
				@media (width > 767px) {/* PC */
					/* width: 110rem; */
					padding-top: 13.5rem;
				}
				@media (width <= 767px) {/* SP */
					padding-top: 6.5rem;
				}

				.col-1{
					display: flex;
					margin-left: auto;
					margin-right: auto;

					@media (width > 767px) {/* PC */
						justify-content: space-between;
						align-items: center;
						width: 110rem;
						padding-right: 2rem;
					}
					@media (width <= 767px) {/* SP */
						flex-direction: column-reverse;
						width: 33rem;
						margin: 0 auto;
						gap: 4rem;
					}
					img{
						@media (width > 767px) {/* PC */
							width: 54.4rem;
						}
					}
				}
				.col-2{
					display: flex;

					margin-left: auto;
					margin-right: auto;
					margin-top: 8rem;
					@media (width > 767px) {/* PC */
						/* align-items: center;
						justify-content: space-between;
						flex-direction: row-reverse;*/
						width: 110rem;
						margin-top: 14.5rem;
					}
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						width: 33rem;
						margin: 6.5rem auto 0;
						gap: 4rem;
					}
					img{
						@media (width > 767px) {/* PC */
							width: 54.4rem;
						}
					}
				}
				.col-3{
					display: flex;
					margin:14rem auto 0;
					max-width: 160rem;
					width: 100%;
					@media (width > 767px) {/* PC */
						align-items: flex-end;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 8rem;
						flex-direction: column;
					}
					.img{
						@media (width > 767px) {/* PC */
							width: 55%;
						}
						img{
							width: 100%;
						}
					}
					.txt{
						@media (width > 767px) {/* PC */
							/* width: 25.875%; */
							margin-left: 7.4%;
						}
						@media (width <= 767px) {/* SP */
							width: 33rem;
							margin: 6rem auto 0;
						}
						.btnBlock{
							margin-top: 3rem;
							@media (width <= 767px) {/* SP */
								margin-top: 4.5rem;
							}
						}
					}
				}
			}
		}
	}

	.bottomBlock{
		position: relative;
		height: 52.8rem;
		margin-top: 20rem;
		@media (width <= 767px) {/* SP */
			height: 50rem;
			margin-top: 10rem;
		}
		picture{
			height: 100%;
		}
		img{
			object-fit: cover;
			height: 100%;
			width: 100%;
		}
		.cnt{

			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 36.4rem;

			top: 19.9rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				top: 8rem;
			}
			.cntTtl{
				font-family: var(--ff-zen);
				color: var(--cc-red);
				background: #fff;
				line-height: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				border-radius: .8rem .8rem 0 0;
				height: 8.5rem;

				font-size: 2.4rem;
				font-weight: 400;

				letter-spacing: 0.08em;
				gap: 1.2rem;
				@media (width <= 767px) {/* SP */
					font-size: 2.17rem;
					gap: 1.1rem;
					height: 7.5rem;
				}
				p{
					padding-bottom: .6rem;
					border-bottom: 1px dashed var(--red, #FF000A);
					@media (width <= 767px) {/* SP */
						padding-bottom: .8rem;
					}
				}
				&:before,
				&:after{
					content: '';
					background: url(../images/common/ico-leaf.svg) center center /100% auto no-repeat;
					width: 2.4rem;
					height: 2.3rem;
					@media (width <= 767px) {/* SP */
						width: 2.1rem;
						height: 2.0rem;
					}
				}
				&:before{
					transform: scaleX(-1);
				}
			}
			.cntBtn{

				.c-btn{
					font-family:var(--ff-default);
					padding:1rem 0;
					border: none;
					justify-content: center;
					font-size: 1.7rem;
					width: 100%;
					padding: 1.4rem 0;
					@media (width <= 767px) {/* SP */
						font-size: 1.54rem;
					}
				}
			}
		}
	}
}

.mod_footer{
	/* background: #fff; */
	margin-top: 20rem;
}