@charset "utf-8";
/* ===================================================
	Access CSS
====================================================== */

.cmn_lead::after {
	bottom: -22%;
}
#google_map {
	line-height: 1;
}
#google_map iframe {
	width: 100%;
}
@media screen and (min-width: 769px) {
	.cmn_lead {
		padding-bottom: min(11vw, 140px);
	}
}
@media screen and (max-width: 768px) {
	#google_map iframe {
		height: clamp(250px,46vw,590px);
	}
}


/* ---------------------------------------------------
	Common
------------------------------------------------------ */
.cmn_table_01>div>dt {
	align-content: center;
}
.bg_grad {
	background: url(../img/bg_grad_l.webp) no-repeat left top / auto,
	url(../img/bg_grad_gr.webp);
}
.bg_grad .cmn_table_01>div>dt {
	background-color: #e9eae1;
}
.bg_grad .cmn_table_01>div>dd {
	background-color: #f1f5ef;
}
.pin {
	position: relative;
	padding-left: clamp(25px,3vw,35px);
}
.pin::before {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	content: '';
	display: block;
	width: var(--f18);
	height: var(--f27);
	background: url(../img/icon_pin.svg)no-repeat center/contain;
}
.pin .link_run {
	border-bottom: none;
}

@media screen and (hover:hover) and (min-width: 769px) {
	.pin:hover .link_run::before {
		transform: scaleX(1);
	}
}
@media screen and (min-width: 769px) {
	.cmn_table_01>div>dt {
		padding: min(3vw, 40px) 1rem;
		text-align: center;
	}
	.cmn_table_01>div>dd {
		padding: min(3vw, 40px) var(--f55);
	}
}
@media screen and (max-width: 768px) {
	.bg_grad {
		background-size: 100%, 10%;
		background-position: top left;
	}
}

/* .cmn_style_02 */
.cmn_style_02 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem 8%;
}
.cmn_style_02 .cmn_tit_03 {
	flex: 1;
}
.cmn_style_02 .contents {
	flex-shrink: 0;
	line-height: 1.8;
}
.cmn_style_02 div.photo {
	display: flex;
	gap: 0 1px;
}
.cmn_style_02 div.photo .ofi {
	width: 100%;
}
.cmn_style_02 dl>div {
	padding: 35px 0;
}
.cmn_style_02 dl>div dt {
	font-weight: bold;
}
.cmn_style_02 dl>div dd {
	margin-top: 1em;
}

@media screen and (min-width: 769px) {
	.cmn_style_02 .contents { width: 77.5%; }
}
@media screen and (max-width: 768px) {
	.cmn_style_02 {
		flex-direction: column;
	}
	.cmn_style_02 .photo+p {
		padding: 20px 0;
	}
	.cmn_style_02 dl>div {
		padding: 20px 0;
	}
}


/* ---------------------------------------------------
	#sec_info
------------------------------------------------------ */
#sec_info {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 6.6%;
	padding: min(12vw,150px) 0;
}
#sec_info .txt {
	flex: 1;
	line-height: 1.8;
}
#sec_info h3 {
	font-size: var(--f14);
}
#sec_info h3 span {
	display: block;
	font-size: var(--f18);
}
#sec_info .txt dl {
	margin-top: min(3vw,40px);
}
#sec_info .txt dl>div {
	display: flex;
	border-bottom: 1px solid #999;
	padding: 18px 0;
}
#sec_info .txt dt {
	width: min(31%,170px);
	padding: 0 1rem;
}
#sec_info .txt>p {
	text-align: right;
	margin-top: 2rem;
}
#sec_info .info_col {
	display: flex;
	gap: 0 min(4.3vw,55px);
	width: 100%;
	border: 1px solid #9f9f9f;
	margin-top: min(4.7vw,60px);
	padding: 30px 0;
	line-height: 1.8;
}
#sec_info .info_col dd span {
	display: block;
	margin-bottom: 0.75rem;
	color: #b84141;
}

@media screen and (min-width: 769px) {
	#sec_info .photo {
		flex-shrink: 0;
		width: min(46.8%, 470px);
	}
	#sec_info .info_col dt {
		display: flex;
		align-items: center;
		justify-content: center;
		width: max(200px,20.7%);
		line-height: min(8.5vw,110px);
		border-right: 1px solid #9f9f9f;
	}
}
@media screen and (max-width: 768px) {
	#sec_info .photo {
		margin: 0 auto;
	}
	#sec_info .txt {
		flex: auto;
		width: 100%;
	}
	#sec_info .info_col {
		flex-direction: column;
		padding: 20px 6%;
	}
	#sec_info .info_col dt {
		border-bottom: 1px solid #9f9f9f;
		margin-bottom: 1rem;
		padding-bottom: 0.75rem;
		text-align: center;
	}
}
@media screen and (max-width: 600px) {
	#sec_info .txt dl>div {
		flex-direction: column;
	}
	#sec_info .txt dt {
		padding: 0 0 0.5rem;
		font-weight: bold;
	}
}


/* ---------------------------------------------------
	#sec_route
------------------------------------------------------ */
#sec_route {
	padding: min(5.5vw,70px) 0 min(7.8vw,100px);
}
#sec_route [id^="by_"] {
	padding: min(4.3vw,55px) 0;
}
#sec_route .cmn_tit {
	margin-bottom: 30px;
	text-align: center;
}
#sec_route .cmn_tit .en {
	font-size: var(--f30);
}
#sec_route .cmn_table_01 dd span {
	display: block;
	color: #856744;
}
.route_point {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: min(4.7vw,60px);
}
.route_point li {
	width: 30%;
}
.route_point li a {
	display: block;
	padding: 15px 1em;
	font-size: var(--f14);
	color: #fff;
	background: linear-gradient(to top, var(--cl-grad2));
	text-align: center;
}
.route_point li span {
	display: inline-block;
}
.route_point .lg {
	font-size: var(--f18);
}
.route_point .md {
	display: block;
	font-size: var(--f15);
}
.route_link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 var(--f21);
    width: min(100%,648px);
	margin: min(4vw,50px) auto 0;
	padding: var(--f30) 1rem;
    background-color: #f1f5ef;
    border-radius: var(--f66);
	transition: background-color 0.5s;
}
.route_link::before,
.route_link::after {
	flex-shrink: 0;
}
.route_link::before {
	position: static;
	transform: none;
	width: 1rem;
}
.route_link::after {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid #999;
	border-bottom: 1.5px solid #999;
	transform: rotate(-45deg) skew(5deg,5deg);
}
.ex_link_col {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px min(7vw, 100px);
	margin-top: min(5vw,65px);
	font-size: var(--f14);
}
.ex_link_col li a {
	position: relative;
	padding-right: var(--f55);
	line-height: 1.8;
}
.ex_link_col li a::after {
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	display: block;
	width: var(--f17);
	height: var(--f17);
	background: url(../../access/img/icon_link.svg)no-repeat center/contain;
}

@media screen and (hover: hover) and (min-width: 769px) {
	.route_link:hover {
		opacity: 1;
		background-color: #fff;
	}
}
@media screen and (min-width: 769px) {
	#sec_route .cmn_tit+p {
		text-align: center;
	}
}
@media screen and (max-width: 768px) {
	.route_point {
		flex-direction: column;
		gap: 15px 0;
	}
	.route_point li {
		width: min(100%,330px);
	}
	.route_link {
		padding: 20px 1rem;
		line-height: 1.5;
	}
}
@media screen and (max-width: 600px) {
	.route_point .lg {
		font-size: var(--f17);
	}
}


/* ---------------------------------------------------
	#sec_spot
------------------------------------------------------ */
#sec_spot {
	padding: clamp(3rem,7.4vw,95px) 0 clamp(50px,6.6vw,85px);
}
#sec_spot .item {
	display: flex;
    gap: 1rem 30px;
}
#sec_spot .item+.item {
	margin-top: clamp(50px,5.9vw,75px);
}
#sec_spot .item .photo,
#sec_spot .item .photo .ofi {
	width: 100%;
}
#sec_spot .item h3 {
	border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    font-size: var(--f21);
}
#sec_spot .time {
	display: flex;
	gap: 0 8px;
	margin: 0.75rem 0 1rem;
}
#sec_spot .time::before {
	content: '';
	display: block;
}
#sec_spot .time.foot::before {
	width: 15px;
	height: 22px;
	background: url(../../access/img/icon_foot.webp)no-repeat center/contain;
}
#sec_spot .time.car::before {
	width: 20px;
	height: 15px;
    margin-top: 1.5%;
	background: url(../../access/img/icon_car.svg)no-repeat center/contain;
}
#sec_spot .txt p:not(.time) {
	line-height: 1.8;
	font-size: var(--f14);
}
#sec_spot .link_col {
	display: flex;
    justify-content: flex-end;
	gap: 5px 1rem;
    margin-top: 25px;
}
#sec_spot .link_col a {
	display: block;
	padding: 5px 1rem;
	box-sizing: border-box;
	text-align: center;
}
#sec_spot .link_col .map {
	width: 170px;
	max-width: 100%;
	color: #fff;
	background: linear-gradient(to top, var(--cl-grad2));
}
#sec_spot .link_col .web {
	outline: 1px solid #000;
	outline-offset: -1px;
}

@media screen and (min-width: 601px) {
	#sec_spot .item .photo {
		flex-shrink: 0;
		width: min(47.3%, 440px);
	}
}
@media screen and (max-width: 600px) {
	#sec_spot .item {
		flex-direction: column;
	}
	#sec_spot .time::before {
		transform: scale(0.85);
	}
}