@charset "utf-8";
.postPage{
	margin: 0 auto;
	padding: 12rem 0 16rem;
	width: 120rem;
	@media (width <= 767px) {/* SP */
		width: 33rem;
		padding: 3.2rem 0 10rem;
	}
	.p-cateName{
		font-weight: 500;
		font-family: var(--ff-avenir);
		color: var(--cc-red);

		line-height: 1;
		letter-spacing: .12em;
		font-size: 2.2rem;


		margin-bottom: 6.4rem;
		@media (width > 767px) {/* PC */
			border-bottom: solid 1px var(--cc-gray-text);
			padding-bottom: 1.3rem;
		}
		@media (width <= 767px) {/* SP */
			margin-bottom: 2.4rem;
			letter-spacing: .12em;
			font-size: 2rem;
		}
	}
	.p-kv{
		margin-bottom: 6.4rem;
		@media (width <= 767px) {/* SP */
			position: relative;
			width: 39rem;
			left: -3rem;
			margin-bottom: 4rem;
		}
		img{
			max-width: none;
			width: 100%;
		}
	}
	.p-cntWrp{
		display: flex;
		flex-direction: column;
		gap: 8rem;
		@media (width <= 767px) {/* SP */
			gap: 4.8rem;
		}
	}
	.p-head{
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.date{
			font-weight: 500;
			line-height: 1;
			letter-spacing: .12em;
			font-size: 1.6rem;
			border-bottom: solid 1px var(--cc-red);
			padding-bottom: .7rem;
			margin-bottom: .7rem;
			@media (width <= 767px) {/* SP */
				padding-bottom: .8rem;
				margin-bottom: 3.2rem;
			}
		}
		.name{
			font-weight: 500;
			line-height: 1;
			letter-spacing: .12em;
			font-size: 1.6rem;
			/* border-bottom: solid 1px var(--cc-red); */
			/* padding-bottom: .7rem; */
			text-decoration: underline;
			text-decoration-color:var(--cc-red);
			text-underline-offset: 1rem;
            margin-bottom: 1.6rem;
			@media (width <= 767px) {/* SP */
				padding-top:4rem;
				line-height: 2.2;
				margin-bottom: 3.2rem;
			}
		}
		.ttl{
			font-family: var(--ff-zen);
			font-weight: 400;
			line-height: 1.7;
			letter-spacing: .12em;
			font-size: 4rem;
			@media (width <= 767px) {/* SP */
				font-weight: 500;
				letter-spacing: .1em;
				font-size: 2.4rem;
			}
		}
		.kv{
			margin-top: 4rem;
			padding-bottom: 1.6rem;
			@media (width <= 767px) {/* SP */
				margin-top: 3.2rem;
				padding-bottom: 2.4rem;
				position: relative;
				width: 39rem;
				left: -3rem;
			}
			img{
				width: 100%;
			}
		}
		.txt{
			display: flex;
			flex-direction: column;
			gap: 2em;
			color: var(--cc-gray-text);
			letter-spacing: .12em;
			line-height: 2.2;
			font-size: 1.6rem;
			margin-top: 3.2rem;
			@media (width <= 767px) {/* SP */
				margin-top: 1.6rem;
				line-height: 2;
			}
		}
		+ .p-txt{
			letter-spacing: .12em;
			margin-top: -5rem;
			@media (width <= 767px) {/* SP */
				margin-top: -3.2rem;
			}
		}
	}
	.p-moreBtn{
		@media (width <= 767px) {/* SP */
			text-align: center;
		}
		.c-btn{
			color:var(--cc-black-A);
			border-color: var(--cc-black-A);
			&:after{
				background-image: url(../images/common/ico-btn-arw-blk.svg);
			}
		}
	}

	.p-list{
		display: flex;
		flex-direction: column;
		color: var(--cc-gray-text);
		padding-left: 1em;
		gap: .8rem;
		@media (width <= 767px) {/* SP */
			gap: 1.6rem;
			padding-left: 2em;
		}
		li{
			list-style: decimal;
			line-height: 1.8;
			letter-spacing: .12em;
			@media (width <= 767px) {/* SP */
				line-height: 2;
				font-size: 1.6rem;
			}
		}
	}
	.p-borderTxt{
		border: solid 1px var(--cc-sen-gray);
		color: var(--cc-gray-text);
		text-align: justify;
		line-height: 1.8;
		letter-spacing: 0.12em;
		font-size: 1.4rem;
		padding: 4.8rem;
		@media (width <= 767px) {/* SP */
			padding: 3.2rem 2rem;
			line-height: 2;
			font-size: 1.6rem;
		}
	}
	.p-bgTxt{
		background: #F2F1F0;
		color: var(--cc-gray-text);
		text-align: justify;
		line-height: 1.8;
		letter-spacing: 0.12em;
		font-size: 1.4rem;
		padding: 4.8rem;
		@media (width <= 767px) {/* SP */
			padding: 3.2rem 2rem;
			line-height: 2;
			font-size: 1.6rem;
		}
	}
	.p-btn{
		display: flex;
		justify-content: center;
		a{
			box-sizing: border-box;
			background: var(--cc-black-A);
			color: var(--cc-white-A);
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1;
			letter-spacing: .2em;
			gap: 1.6rem;

			padding: 1.4rem 1.8rem;
			font-size: 1.7rem;
			@media (width > 767px) {/* PC */
				min-width: 28.4rem;
			}
			@media (width <= 767px) {/* SP */
				padding: 1.2rem 2.4rem;
				line-height: 1.3;
				font-size: 1.6rem;
				gap: 1.2rem;
			}
			&:after{
				content: '';
				width: .9rem;
				height: 1.1rem;
				background: url(../images/common/ico-btn-arw-w.svg) center center /100% auto no-repeat;
			}
		}
	}

	.p-info{
		box-sizing: border-box;
		background: #F2F1F0;
		padding: 5.6rem 8.8rem 5.6rem 8rem;
		@media (width <= 767px) {/* SP */
			position: relative;
			width: 39rem;
			left: -3rem;
			padding: 4.8rem 3rem;
		}
		.head{
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 6.4rem;

			@media (width > 767px) {/* PC */
				padding-left: 4rem;
			}
			@media (width <= 767px) {/* SP */
				margin-bottom: 4rem;
				gap: .8rem;
			}
			.ttl{
				font-family: var(--ff-zen);
				font-weight: 400;
				line-height: 1.7;
				letter-spacing: .12em;
				font-size: 3.6rem;
				@media (width <= 767px) {/* SP */
					font-size: 2.4rem;
				}
			}
			.enTxt{
				font-family: var(--ff-avenir);
				color: var(--cc-red);
				letter-spacing: .12em;
				line-height: 1;
				font-size: 1.4rem;
				margin-top: .4rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.6rem;
				}
			}
		}
		.cntWrp{
			display: flex;
			flex-direction: column;
			gap: 5rem;
			@media (width <= 767px) {/* SP */
				gap: 5rem;
			}
		}
		.cnt{
			display: flex;
			justify-content: space-between;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				gap: 2rem;
			}
			.txtarea{
				@media (width > 767px) {/* PC */
					width: 39.2rem;
				}

				.ttl{
					font-weight: 500;
					font-family: var(--ff-zen);
					line-height: 1.5;
					letter-spacing: .1em;
					font-size: 2.2rem;
					margin-bottom: 4rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.8rem;
						margin-bottom: 1.8rem;
					}
				}
				.txt{
					color: var(--cc-gray-text);
					display: flex;
					flex-direction: column;

                    align-items: flex-start;
					gap: 2.4rem;
					letter-spacing: .12em;
					line-height: 1.8;
					font-size: 1.4rem;
					@media (width <= 767px) {/* SP */
						line-height: 2;
						font-size: 1.6rem;
						gap: 1.6rem;
					}
					a{
						display: flex;
						align-items: center;
						line-height: 1;
						gap: 1.1rem;
						padding-bottom: 1.2rem;
						border-bottom: var(--cc-gray-text) solid 1px;
						word-break: break-word;
                        line-height: 1.5;
						&:after{
							content: '';
							background: url(../images/common/ico-btn-arw-gray.svg) center center /100% auto no-repeat;
							width: .7rem;
							height: .9rem;
						}
					}
				}
			}
			.map{
				@media (width > 767px) {/* PC */
					width: 53rem;
					height: 32.6rem;
				}
				@media (width <= 767px) {/* SP */
					height: 20.3rem;
				}
				iframe{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.p-imgList{
		figure{
			&.wide {
				@media (width > 767px) {/* PC */
					width: 100%!important;
				}
			}
			figcaption{
				color: var(--cc-gray-text);
				text-align: justify;
				margin-top: 3.2rem;
				line-height: 1.8;
				letter-spacing: .12em;
				font-size: 1.6rem;
				@media (width <= 767px) {/* SP */
					margin-top: 1.6rem;
					line-height: 2;
				}
			}

		}
		&.-padding{
			@media (width > 767px) {/* PC */
				padding: 0 5.2rem;
			}
			@media (width <= 767px) {/* SP */
				figure{
					left: 0rem;
					img{
						width: 33rem;
						margin: 0 auto;
					}
				}

			}
		}
		&:has(> figure:first-child:nth-last-child(1)){

			@media (width > 767px) {/* PC */
				figure{
					width: 56.1rem;
				}
			}
			@media (width <= 767px) {/* SP */
				figure{
					position: relative;
					width: 39rem;
					left: -3rem;
					figcaption{
						padding-left: 3rem;
						padding-right: 3rem;
					}
				}
			}
		}
		&:has(> figure:first-child:nth-last-child(2)){
			display: flex;
			justify-content: space-between;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				gap: 4.8rem;
			}
			figure{
				width: 56.1rem;
				@media (width <= 767px) {/* SP */
					width: 33rem;
				}
			}
		}
		&:has(> figure:first-child:nth-last-child(3)){
			display: flex;
			justify-content: space-between;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				gap: 2.4rem;
			}
			figure{
				width: 37.3rem;
				@media (width <= 767px) {/* SP */
					width: 33rem;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
				}
				img{
					@media (width <= 767px) {/* SP */
						width: 15.2rem;
					}
				}
				figcaption{
					@media (width > 767px) {/* PC */
						margin-top: 2.4rem;
					}
					@media (width <= 767px) {/* SP */
						width: 15.4rem;
						margin-top: 0;
						line-height: 1.6;
						letter-spacing: 0.1em;
						font-size: 1.5rem;
					}
				}
			}
		}
	}
	.p-imgTxt{
		display:flex;
		@media (width > 767px) {/* PC */
			align-items: center;
			justify-content: space-between;
			&.-pcRev{
				flex-direction: row-reverse;
			}
		}
		@media (width <= 767px) {/* SP */
			flex-direction: column;
			gap: 1.6rem;
		}
		img{
			@media (width > 767px) {/* PC */
				width: 56rem;
			}
		}
		figcaption{
			color: var(--cc-gray-text);
			text-align: justify;
			letter-spacing: .12em;
			line-height: 1.8;
			font-size: 1.6rem;
			@media (width > 767px) {/* PC */
				width: 56rem;
			}
			@media (width <= 767px) {/* SP */
				line-height: 2;
			}
		}
	}

	.p-txt{
		display: flex;
		flex-direction: column;
        gap: 2em;
		color: var(--cc-gray-text);
		letter-spacing: .08em;
		line-height: 2.2;
		font-size: 1.6rem;
		@media (width <= 767px) {/* SP */
			line-height: 2;
		}
	}
	.p-pager{
		display: flex;
		justify-content: center;
		padding-top: 4rem;
		gap: 5rem;
		@media (width <= 767px) {/* SP */
			gap: 0;
			justify-content: space-between;
			padding-top: 3.2rem;
		}
		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;
			}
		}
	}
}
#itinerariesSingle{
	.p-txt{
		strong{
			font-family: var(--ff-zen);
		}
	}
}