@charset "utf-8";
#photograph{
	@media (width <= 767px) {/* SP */
		padding-top: 3.2rem;
	}
	.pageCnt{
		/* margin: 20rem auto 0; */

		@media (width > 767px) {/* PC */
			margin-top: 20rem;
			padding-bottom: 20rem;
		}
		@media (width <= 767px) {/* SP */
			/* width: 33rem; */
			margin-top: 8rem;
			padding-bottom: 8rem;
		}
		.c-ttl{
			.txtEn{
				font-size: 1.4rem;
			}
		}

		.photogThList{
			display: flex;
			margin-top: 8rem;

			@media (width > 767px) {/* PC */
				justify-content: center;
				gap: 3rem;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				margin: 5rem auto 0;
				width: 33rem;
				gap: 2.4rem;
			}
			.th{
				@media (width > 767px) {/* PC */
					width:27.7rem;
				}
				@media (width <= 767px) {/* SP */
					display:flex;
					justify-content: space-between;
					align-items: center;
				}
				.th__img{
					@media (width <= 767px) {/* SP */
						width: 15.6rem;
					}
				}
				.th__txtarea{
					@media (width > 767px) {/* PC */
						text-align: center;
						margin-top: 2.5rem;
					}
					@media (width <= 767px) {/* SP */
						width: 14.5rem;
					}
				}
				.th__occ{
					font-family: var(--ff-zen);
					line-height: 1;
					letter-spacing: .1em;
					font-size: 1.5rem;
					margin-bottom: 1.5rem;
					@media (width <= 767px) {/* SP */
						white-space: nowrap;
					}
				}
				.th__name{
					font-family: var(--ff-zen);
					line-height: 1;
					letter-spacing: .1em;
					font-size: 2.4rem;
					@media (width <= 767px) {/* SP */
						font-size: 2.2rem;
					}
				}
				.th__btn{
					margin-top: 2rem;
					@media (width <= 767px) {/* SP */
						margin-top: 2.5rem;
					}
					.c-btn{
						font-size: 1.5rem;
						&:after{
							transform: rotate(90deg);
						}
					}

				}
			}
		}

	}


	.photogCnt{
		display: flex;
		flex-direction: column;
		padding-top: 20rem;
		gap: 20rem;
		@media (width <= 767px) {
			padding-top: 8rem;
			gap: 8rem;
		}
		.photgSec{
			/* padding-top: 20rem; */
			@media (width <= 767px) {/* SP */
				/* padding-top: 8rem; */
			}
			.profBlock{
				margin-bottom: 9.6rem;
				@media (width <= 767px) {/* SP */
					margin-bottom: 4rem;
				}
			}
		}
		.moreBtn{
			cursor: pointer;
			line-height: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-family: var(--ff-zen);
			color: var(--cc-gray-text);
			line-height: 1;
			letter-spacing: .16em;
			margin: 7.3rem auto 0;
			border-top: solid 1px var(--cc-gray-text);
			width: 120rem;

			gap: 1.1rem;
			padding-top: 2.4rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				margin-top: 3.7rem;
			}
			&:after{
				display: block;
				content: '';
				transform: rotate(90deg);
				background: url(../images/common/ico-btn-arw-gray.svg) center center /100% auto no-repeat;
				width: .7rem;
				height: .9rem;

			}
		}
		.moreBlock{
			display: none;
		}
	}

	.profBlock{
		background: #F2F1F0;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		@media (width > 767px) {/* PC */
			width: 120rem;
			padding:6.4rem 8rem ;
			justify-content: space-between;
		}
		@media (width <= 767px) {/* SP */
			width: 35rem;
			flex-direction: column;
			padding: 3rem 3rem 4rem 3rem;
			gap: 3rem;
		}
		.img{
			@media (width > 767px) {/* PC */
				width: 35rem;
			}
		}
		.txtarea{
			@media (width > 767px) {/* PC */
				width: 63.4rem;
			}
		}
		.occ{
			letter-spacing: .12em;
			line-height: 1;
			font-family: var(--ff-zen);
			font-size: 1.5rem;
			margin-bottom: 1.7rem;
		}
		.name{
			line-height: 1;
			display: flex;
			align-items: center;
			gap: 1.6rem;
			.name__txt{
				font-weight: 500;
				font-family: var(--ff-zen);
				letter-spacing: .1em;
				font-size: 2.4rem;
			}
			.name__txtEn{
				color: var(--cc-red);
				letter-spacing: .12em;
				font-family: var(--ff-avenir);
				font-size: 1.5rem;
			}
		}
		.txt{
			color: var(--cc-gray-text);
			text-align: justify;
			line-height: 2;
			letter-spacing: .12em;
			font-size: 1.6rem;
			margin-top: 3rem;
			@media (width <= 767px) {/* SP */
				letter-spacing: .16em;
			}
		}
		.btn{
			margin-top: 2.5rem;
			@media (width <= 767px) {/* SP */
				margin-top: 3rem;
			}
			.c-btn{
				letter-spacing: .12em;
				background: transparent;
			}
		}
	}

	.imgListBlock{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: .4rem;
		padding-bottom: .4rem;
		@media (width <= 767px) {/* SP */
			grid-template-columns: repeat(2,1fr);
			gap: .2rem;
			padding-bottom: .2rem;
		}
		li{
			img{
				max-width: none;
				width: 100%;
			}
		}
	}

	&.photogPost{
		.postCnt{
			padding-top: 14.5rem;
			margin: 0 auto;
			width: 120rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				padding-top: 3.5rem;
			}
			.postTtl{
				font-family: var(--ff-zen);
				font-weight: 400;
				line-height: 1.7;
				letter-spacing: .12em;
				font-size: 3.2rem;
				margin-bottom: 2.4rem;
				@media (width <= 767px) {/* SP */
					letter-spacing: .1em;
					font-size: 2.4rem;
				}
			}
			.postKv{
				@media (width <= 767px) {/* SP */
					position: relative;
					width: 39rem;
					left: -3rem;
				}
			}
		}

		.spotSec{

			margin: 0 auto;
			padding: 21rem 0 0;
			@media (width > 767px) {/* PC */
				width: 96rem;
			}
			@media (width <= 767px) {/* SP */
				padding-top:11rem;
			}
			.secHead{
				text-align: center;
				margin-bottom: 9.5rem;
				@media (width <= 767px) {/* SP */
					margin-bottom: 6.5rem;
				}
				.ttl{
					line-height: 1;
					font-family: var(--ff-zen);
					font-weight: 400;
					font-size: 3.2rem;
					letter-spacing: .12em;
					@media (width <= 767px) {/* SP */
						font-size: 2.4rem;
					}
				}
				.txtEn{
					color: var(--cc-red);
					font-family: var(--ff-avenir);
					letter-spacing: .12em;
					line-height: 1;
					font-size: 1.4rem;
					margin-top: 1.2rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.6rem;
					}
				}
			}
			.mapBlock{
				height: 50rem;
				@media (width <= 767px) {/* SP */
					width: 35rem;
					height: 35rem;
					position: relative;
					margin-left: -1rem;
				}
				iframe{
					width: 100%;
					height: 100%;
				}
			}
			.linkBlock{
				display: flex;
				position: relative;
				margin-top: 4rem;
				margin-bottom: 12rem;
				@media (width > 767px) {/* PC */
					justify-content: center;
				}
				@media (width <= 767px) {/* SP */
					flex-direction:column;
					align-items: center;
					gap: 4rem;
					margin-top: 3rem;
					margin-bottom: 5rem;
				}
				.gmapLink{
					font-size: 1.6rem;
				}
				.snsLink{

					display: flex;
					gap: 1.6rem;
					@media (width > 767px) {/* PC */
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}

					img{
						width: 2.4rem;
					}
				}
			}
		}
		.recoSec{
			padding-top: 21rem;
			@media (width <= 767px) {/* SP */
				padding-top: 11rem;
			}
			.secHead{
				text-align: center;
				margin-bottom: 9.5rem;
				@media (width <= 767px) {/* SP */
					margin-bottom: 6.5rem;
				}
				.ttl{
					line-height: 1;
					font-family: var(--ff-zen);
					font-weight: 400;
					font-size: 3.2rem;
					letter-spacing: .12em;
					@media (width <= 767px) {/* SP */
						font-size: 2.4rem;
					}
				}
				.txtEn{
					color: var(--cc-red);
					font-family: var(--ff-avenir);
					letter-spacing: .12em;
					line-height: 1;
					font-size: 1.4rem;
					margin-top: 1.2rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.6rem;
					}
				}
			}
		}
		.pager{
			display: flex;
			justify-content: center;
			gap: 5rem;
			margin-top: 8rem;
			@media (width <= 767px) {/* SP */
				gap: 0;
				justify-content: space-between;
				margin-top: 5.5rem;
			}
			a{
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: solid 1px var(--cc-black-A);
				font-family: var(--ff-avenir);
				line-height: 1;
				padding: 0 1.6rem;
				height: 4.2rem;
				width: 17.4rem;
				letter-spacing: .05em;
				font-size: 1.4rem;
				@media (width <= 767px) {/* SP */
					height: 3.6rem;
					width: 10rem;
					padding: 0 0.8rem;
				}
				&.index{
					justify-content: center;
					background: var(--cc-black-A);
					color: var(--cc-white-A);
					@media (width <= 767px) {/* SP */
						width: 8.8rem;
					}
				}
				&.back{
					&:before{
						content: '';
						background: url(../images/common/ico-btn-arw-blk.svg) center center /100% auto no-repeat;
						transform: rotate(180deg);
						width: .8rem;
						height: .9rem;

					}
				}
				&.next{
					&:after{
						content: '';
						background: url(../images/common/ico-btn-arw-blk.svg) center center /100% auto no-repeat;
						width: .8rem;
						height: .9rem;
					}
				}
			}
			.blank{
				display: block;
				height: 4.2rem;
				width: 17.4rem;
				@media (width <= 767px) {/* SP */
					height: 3.6rem;
					width: 10rem;
				}
			}
		}

		.profBlock{
			@media (width > 767px) {/* PC */
				padding: 4rem;
				width: 80rem;
				margin-top: 12rem;
				align-items: center;
				.occ{
					font-size: 1.2rem;
				}
				.img{
					width: 27rem;
				}
				.txtarea{
					width: 39.3rem;
				}
				.btn{
					margin-top: 4.5rem;
				}
			}
			@media (width <= 767px) {/* SP */
				margin: 8rem 0 0 -1rem;
			}
		}
	}
}