@charset "utf-8";
/* .mod_footer{
	background: transparent;
} */
#access{
	@media (width <= 767px) {/* SP */
		padding-top: 3.2rem;
	}

	.pageCnt{
		@media (width > 767px) {/* PC */
			margin-top: 10.5rem;
			padding-bottom: 13rem;
		}
		@media (width <= 767px) {/* SP */
			/* width: 33rem; */
			margin-top: 10rem;
			padding-bottom: 9.5rem;
		}
	}
	.ttBlock{
		position: relative;
		margin: 0 auto;
		max-width: 160rem;
		.blockCnt{
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			background: rgba(255, 255, 255, 0.40);
			backdrop-filter: blur(5px);

			width: 61.4rem;
			padding: 4rem 0 4.8rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				padding: 4.3rem 0 ;
			}
		}
		.c-ttl{
			@media (width > 767px) {/* PC */
				gap: 0.3rem;
			}
			.ttl{
				@media (width > 767px) {/* PC */
					font-size: 3.6rem;
					padding-top: 2.5rem;
				}
			}
			.txtEn{
				letter-spacing: .12em;
				@media (width > 767px) {/* PC */
					font-size: 1.4rem;
				}
			}
		}
		.line{
			stroke-width: 2px;
			stroke: var(--white, #FFF);
			width: 47rem;
			margin: 2.4rem 0 3.5rem;
			@media (width <= 767px) {/* SP */
				width: 27.1rem;
				margin: 2.7rem 0 3.0rem;
			}
			img{
				width: 100%;
			}
		}
		.txtBlock{
			display: flex;
			justify-content: center;
			gap: 4rem;
			@media (width <= 767px) {/* SP */
				gap: 2.4rem;
			}
			p{
				line-height: 1;
				letter-spacing: .12em;
				text-align: center;
				font-size: 2rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.6rem;
					line-height: 1.5;
				}
				span{
					font-weight: 500;
					font-family: var(--ff-avenir);
					font-size: 1.4rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.2rem;
					}
				}
			}
			img{
				width: 2.9rem;
				@media (width <= 767px) {/* SP */
					width: 2.2rem;
				}
			}
		}
		.btnBlock{
			margin-top: 2.4rem;
			a.c-btn{
				border: none;
				font-family: var(--ff-default);
				@media (width <= 767px) {/* SP */
					padding: 1.6rem 2rem 1.6rem 2rem;
				}
			}
		}
		.creditTxt{
			text-align: right;
			color: #FFF;
			line-height: 1;
			font-family: var(--ff-avenir);
			font-size: 1.6rem;
			position: absolute;
			right: 1.2rem;
			bottom: 1rem;
			@media (width <= 767px) {/* SP */
				right: 1rem;
				font-size: 1.4rem;
			}
		}
	}

	.sectionWrp{
		display: flex;
		flex-direction: column;
		gap: 12rem;
		padding-top: 21.8rem;
		@media (width <= 767px) {/* SP */
			padding-top: 10rem;
			gap: 8rem;
		}
		.c-btn{
			background: transparent;
		}
		.accessSec{
			.secHead{
				margin: 0 auto 3rem;
				@media (width > 767px) {/* PC */
					width: 120rem;
				}
				@media (width <= 767px) {/* SP */
					text-align:center;
					margin-bottom: 5rem;
					.ttl{
						padding-right: 0;
						padding-top: 3rem;
						&:after{
							content: '';
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
				.c-ttl{
					@media (width <= 767px) {/* SP */
						align-items: center;
					}
					.txtEn{
						@media (width > 767px) {/* PC */
							font-size: 1.4rem;
						}
						@media (width <= 767px) {/* SP */
							line-height: 1.3;
						}
					}
				}
			}
			.secCnt{
				background: #FAF9F9;
				position: relative;
				@media (width <= 767px) {/* SP */
					padding-bottom: 4.8rem;
				}
				.in{
					position: relative;
					margin-left: auto;
					margin-right: auto;
					width: 120rem;
					@media (width <= 767px) {/* SP */
						width: 33rem;
					}
				}
				.txtBlock{
					position: relative;
					z-index: 1;
					padding: 5.6rem 0 7rem;
					@media (width <= 767px) {/* SP */
						padding: 4.5rem 0 0;
					}
					.route{
						line-height: 1;
						display: flex;
						margin-bottom: 2rem;
						@media (width <= 767px) {/* SP */
							margin-bottom: 3rem;
						}
						dt{
							background: var(--cc-black-A);
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							letter-spacing: .2em;
							font-size: 1.2rem;
							width: 5.8rem;
							height: 2.8rem;
							@media (width <= 767px) {/* SP */
								width: 5.6rem;
								height: 3.2rem;
								font-size: 1.6rem;
							}
						}
						dd{
							background: #fff;
							position: relative;
							display: flex;
							align-items: center;
							font-weight: 500;
							letter-spacing: .1em;
							gap: .6rem;
							padding: 0 .2rem 0 .9rem;
							font-size: 1.5rem;
							@media (width <= 767px) {/* SP */
								padding-left: 1.2rem;
								font-size: 1.6rem;
							}
							.arw{
								width: 1.3rem;
								@media (width <= 767px) {/* SP */
									width: 1.2rem;
								}
							}
							.sq-w{
								position: absolute;
								top: 0;
								right: 0;
								height: 100%;
								width: auto;
                                transform: translateX(100%);
							}
						}
					}


					.row{
						display: flex;
						flex-direction: column;
						gap: 0.5rem;
						padding-left: 6.2rem;
						@media (width <= 767px) {/* SP */
							padding-left: 3rem;
							gap: 2rem;
						}
					}
					.rTtl{
						position: relative;

						@media (width > 767px) {/* PC */
							display: flex;
							align-items: center;
						}

						.rTtl__ico{
							position: absolute;
							transform: translateX(-100%);
							left: -1rem;
							width: 3.0rem;
							@media (width <= 767px) {/* SP */
								width: 2.3rem;
								left: -.7rem;
                            	top: 0.2rem;
							}
						}
						.rTtl__ttl{
							font-family: var(--ff-zen);
							letter-spacing: .1em;
							font-size: 2.8rem;
							@media (width <= 767px) {/* SP */
								font-size:1.8rem;
								line-height: 1.5;
							}
						}
						.rTtl__txt{
							color: var(--cc-gray-text);
							letter-spacing: .12em;
							font-size: 1.8rem;
							@media (width > 767px) {/* PC */
								margin-top: 1rem;
							}
							@media (width <= 767px) {/* SP */
								font-size:1.4rem;
								line-height: 1;
                                margin-top: .5rem;
							}
						}
					}
					.rBtn{
						display: flex;
						gap: 2.4rem;
						@media (width <= 767px) {/* SP */
							flex-direction:column;
							align-items: flex-start;
							gap: 1.6rem;
						}
					}

					.rBlock1{
						position: relative;
                        padding-left: 4rem;
                        display: flex;
                        flex-direction: column;
                        /* gap: 3rem; */
						@media (width <= 767px) {/* SP */
							padding-left: 2rem;
						}
						.-top{
							height: 12.7rem;
						}
						.vLine{
							position: absolute;
							left: 3rem;
                            top: 2.5rem;
							width: 1rem;
							@media (width <= 767px) {/* SP */
								width: .2rem;
                                left: .92rem;
                                top: 1.2rem;
                                height: 12.6rem;
							}
						}
						.rTtl{
							@media (width <= 767px) {/* SP */
								&:before{
									position: absolute;
                                    border-radius: 50%;
                                    top: 1rem;
                                    left: -4.3rem;
                                    content: '';
                                    background: var(--cc-red);
                                    width: .6rem;
                                    height: .6rem;
								}
							}
						}

					}
					.rBlock2{
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						@media (width > 767px) {/* PC */
							margin-left: 4rem;
						}
						.rowLine{
							margin-top: 3.6rem;
                            margin-bottom: 2.4rem;
							height: .2rem;
							background:  left center /auto 100% repeat-x;
							@media (width > 767px) {/* PC */
								margin-left: 2rem;
								width: 65.1rem;
								background-image: url(../images/access/row-line.svg);
							}
							@media (width <= 767px) {/* SP */
								width: 33rem;
								margin-top: 4rem;
                            	margin-bottom: 4rem;
								background-image: url(../images/access/row-line-sp.svg);
							}
						}
					}
					.rBlock3{
						.row{
							@media (width > 767px) {/* PC */
								padding-left: 9.5rem;
							}
						}
					}
				}
				.map{
					@media (width > 767px) {/* PC */
						position: absolute;
						right: -11.5rem;
                        top: -20.5rem;
						width: 81rem;
					}
					@media (width <= 767px) {/* SP */
						width: 34.7rem;
						margin-left: -1rem;
					}
					img{
						width: 100%;
					}
				}
				.imgBox{
					@media (width > 767px) {/* PC */
						position: absolute;
						right: -8rem;
						top: 10rem;
						width: 50.6rem;
					}
					@media (width <= 767px) {/* SP */
						margin-top: 5rem;
					}
				}
			}
		}
	}
}