/* =========================================================
		route common
========================================================= */
.route-page .desc{text-align: center;}
.route_model .inner{
	background: #fff;
	border-radius: 20px;
	padding: 5% 3%;
	margin-top: 5%;
	position: relative;
}

.route_model .inner::before{
	position: absolute;
	content: "";
	display: inline-block;
	background: url(../images/routes/route_ashirai.png) center/contain no-repeat;
	width: 100px;
	height: 100px;
	right: 10%;
	top: 2%;
}

.route_spot {
	background: #fbfbfb;
	background-image:
		linear-gradient(to right, rgba(40, 40, 40, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(40, 40, 40, .04) 1px, transparent 1px);
	background-size: 24px 24px;
}


.route_list{ margin-top: 3%;}
.route_item { position: relative; padding: 0 0 24px;}
.route_spot .ttl_mini{ position: relative;}
.route_spot .wrapper{ padding-top: 90px;}
.route_spot .ttl_mini::before{
	position: absolute;
	content: "";
	display: inline-block;
	background: url(../images/routes/spot-ashirai1.svg) center/contain no-repeat;
	width: 100px;
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
    top: -50px;
}


/* =========================================================
		route_model
========================================================= */
.route_item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: 0;
	left: 38px;
	width: 0;
	border-left: 5px dotted var(--spot1);
	transform: translateX(-50%);
}

.route_item:last-child { padding-bottom: 0;}
.route_number {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	color: #fff;
	flex-shrink: 0;
}

.route_number span:first-child {line-height: 1.2;}
.route_number span:last-child { font-size: var(--font-26); line-height: 1;}
.route_spot .route_number{ position: static;}

.route_content { margin-left: 94px;}
.route_time {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 135px;
	min-height: 35px;
	margin: 0 0 8px;
	padding: 0px 12px;
	border-radius: 5px;
}

.route_ttl {
	margin: 0 0 20px;
	font-size: var(--font-26);
	line-height: 1.5;
}

.route_detail {
	display: grid;
	grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}
.route_text { margin: 0 0 20px; font-size: var(--font-18);}

.route_link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 265px;
	max-width: 100%;
	min-height: 46px;
	padding: 8px 38px 8px 24px;
	border-radius: 100px;
	font-size: var(--font-18);
	transition: background-color .3s, color .3s;
}

.route_link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 38px;
	width: 8px;
	height: 8px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.route_move {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	margin-top: 14px;
	padding-left: 10px;
}

.route_move_icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
}
.route_move_icon img { width: 40px; }


/* =========================================================
		route_spot_list
========================================================= */

.route_spot_list{
	margin-top: 4%;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.route_spot_item {
	padding: 50px 58px 60px;
	background: #fff;
	border-radius: 30px;
}

.route_img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.route_spot_head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 14px;
}

.route_spot_ttl { font-size: var(--font-26);}
.route_spot_txt { font-size: var(--font-18);}

.route_spot_slider {
	position: relative;
	width: min(100%, 630px);
	margin: 34px auto 30px;
	padding: 0 64px 36px;
	box-sizing: border-box;
}

.route_spot_slider .swiper-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.route_spot_slider .swiper { width: 100%; }
.route_spot_slider .swiper-button-prev,
.route_spot_slider .swiper-button-next {
	top: calc((100% - 36px) / 2);
	width: 50px;
	height: 50px;
	margin-top: -25px;
	padding: 0;
	border: 0;
	border-radius: 50%;
}

.route_spot_slider .swiper-button-prev { left: 0;}
.route_spot_slider .swiper-button-next { right: 0;}
.route_spot_slider .swiper-button-prev::after,
.route_spot_slider .swiper-button-next::after,
.route_spot_slider .swiper-button-prev svg,
.route_spot_slider .swiper-button-next svg {
	display: none;
}

.route_spot_slider .swiper-button-prev::before,
.route_spot_slider .swiper-button-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.route_spot_slider .swiper-button-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.route_spot_slider .swiper-button-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.route_spot_slider .swiper-pagination {
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 16px;
}

.route_spot_slider .swiper-pagination-bullet {
	width: 13px;
	height: 13px;
	margin: 0 !important;
	box-sizing: border-box;
	background: #fff;
	opacity: 1;
}

.route_spot_label {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: var(--font-22);
	font-weight: 500;
}

.route_spot_label::before {
	content: "";
	width: 3px;
	height: 26px;
	border-radius: 2px;
	background: currentColor;
}

.route_spot_topics {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 16px 32px;
	border-radius: 10px;
}

.route_spot_info {
	margin-top: 20px;
	padding: 20px 34px;
	border-radius: 12px;
}

.route_spot_info_head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 36px;
}

.route_spot_links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.route_spot_link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	min-height: 40px;
	padding: 6px 36px 6px 20px;
	box-sizing: border-box;
	border-radius: 999px;
	color: #fff;
	font-size: var(--font-18);
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.3s;
}

.route_spot_link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 34px;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.route_spot_link_map { min-width: 208px;}
.route_spot_address dd { margin: 0;}
.route_spot_address {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 8px 14px;
	align-items: start;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.75;
}

.route_spot_address dt {
	padding: 2px 0;
	text-align: center;
}

.route_spot_address dd {
	min-width: 0;
	margin: 0;
	padding: 2px 0;
	overflow-wrap: anywhere;
}

/* =========================================================
		tobu
========================================================= */

.route-tobu,
.route-tobu .route_spot_topics{
	background: var( --spot1_bg);
}

.route-tobu .route_model .ttl_sub,
.route-tobu .route_model .ttl_mini,
.route-tobu .route_spot .ttl_mini,
.route-tobu .route_move,
.route-tobu .route_spot_label{
	color: var(--spot1);
}

.route-tobu .route_model .ttl_sub::before,
.route-tobu .route_model .ttl_sub::after,
.route-tobu .route_number,
.route-tobu .route_spot_slider .swiper-pagination-bullet-active{
	background: var(--spot1);
}

.route-tobu .route_link {
	border: 1px solid var(--spot1);
	color: var(--spot1);
}

.route-tobu .route_spot_link{
	background: var(--spot1);
}

.route-tobu .route_time,
.route-tobu .route_spot_slider .swiper-button-prev,
.route-tobu .route_spot_slider .swiper-button-next,
.route-tobu .route_spot_link_map,
.route-tobu .route_spot_address dt  {
	background: var(--spot1_bg);
	color: var(--spot1);
}

.route-tobu .route_move_icon,
.route-tobu .route_spot_slider .swiper-pagination-bullet,
.route-tobu .route_spot_info   {
	border: 1px solid var(--spot1);
}

.route-tobu .route_item:not(:last-child)::before{
	border-left: 5px dotted var(--spot1);
}

.route-tobu .route_spot_item {
	border: 1px solid var(--spot1_bg);
	box-shadow: 0 0 6px rgba(215, 134, 166, 0.3);
}


/* =========================================================
		seibu
========================================================= */

.route-seibu,
.route-seibu .route_spot_topics{
	background: var( --spot2_bg);
}

.route-seibu .route_model .ttl_sub,
.route-seibu .route_model .ttl_mini,
.route-seibu .route_spot .ttl_mini,
.route-seibu .route_move,
.route-seibu .route_spot_label{
	color: var(--spot2);
}

.route-seibu .route_model .ttl_sub::before,
.route-seibu .route_model .ttl_sub::after,
.route-seibu .route_number,
.route-seibu .route_spot_slider .swiper-pagination-bullet-active{
	background: var(--spot2);
}

.route-seibu .route_link {
	border: 1px solid var(--spot2);
	color: var(--spot2);
}

.route-seibu .route_spot_link{
	background: var(--spot2);
}

.route-seibu .route_time,
.route-seibu .route_spot_slider .swiper-button-prev,
.route-seibu .route_spot_slider .swiper-button-next,
.route-seibu .route_spot_link_map,
.route-seibu .route_spot_address dt  {
	background: var(--spot2_bg);
	color: var(--spot2);
}

.route-seibu .route_move_icon,
.route-seibu .route_spot_slider .swiper-pagination-bullet,
.route-seibu .route_spot_info   {
	border: 1px solid var(--spot2);
}

.route-seibu .route_item:not(:last-child)::before{
	border-left: 5px dotted var(--spot2);
}

.route-seibu .route_spot .ttl_mini::before{
	background: url(../images/routes/spot-ashirai2.svg) center / contain no-repeat;
}

.route-seibu .route_spot_item {
	border: 1px solid var(--spot2_bg);
	box-shadow: 0 0 6px rgba(215, 168, 134, 0.3);
}

.route-seibu .route_spot_item:nth-child(3) .route_spot_slider{
	padding-bottom: 0;
}


/* =========================================================
		keno
========================================================= */
.route-keno,
.route-keno .route_spot_topics{
	background: var( --spot3_bg);
}

.route-keno .route_model .ttl_sub,
.route-keno .route_model .ttl_mini,
.route-keno .route_spot .ttl_mini,
.route-keno .route_move,
.route-keno .route_spot_label{
	color: var(--spot3);
}

.route-keno .route_model .ttl_sub::before,
.route-keno .route_model .ttl_sub::after,
.route-keno .route_number,
.route-keno .route_spot_slider .swiper-pagination-bullet-active{
	background: var(--spot3);
}

.route-keno .route_link {
	border: 1px solid var(--spot3);
	color: var(--spot3);
}

.route-keno .route_spot_link{
	background: var(--spot3);
}

.route-keno .route_time,
.route-keno .route_spot_slider .swiper-button-prev,
.route-keno .route_spot_slider .swiper-button-next,
.route-keno .route_spot_link_map,
.route-keno .route_spot_address dt  {
	background: var(--spot3_bg);
	color: var(--spot3);
}

.route-keno .route_move_icon,
.route-keno .route_spot_slider .swiper-pagination-bullet,
.route-keno .route_spot_info   {
	border: 1px solid var(--spot3);
}

.route-keno .route_item:not(:last-child)::before{
	border-left: 5px dotted var(--spot3);
}

.route-keno .route_spot .ttl_mini::before{
    background: url(../images/routes/spot-ashirai3.svg) center / contain no-repeat;
}

.route-keno .route_spot_item {
	border: 1px solid var(--spot3_bg);
	box-shadow: 0 0 6px rgba(235, 186, 61, 0.3);
}


/* =========================================================
		hokubu
========================================================= */
.route-hokubu,
.route-hokubu .route_spot_topics{
	background: var( --spot4_bg);
}

.route-hokubu .route_model .ttl_sub,
.route-hokubu .route_model .ttl_mini,
.route-hokubu .route_spot .ttl_mini,
.route-hokubu .route_move,
.route-hokubu .route_spot_label{
	color: var(--spot4);
}

.route-hokubu .route_model .ttl_sub::before,
.route-hokubu .route_model .ttl_sub::after,
.route-hokubu .route_number,
.route-hokubu .route_spot_slider .swiper-pagination-bullet-active{
	background: var(--spot4);
}

.route-hokubu .route_link {
	border: 1px solid var(--spot4);
	color: var(--spot4);
}

.route-hokubu .route_spot_link{
	background: var(--spot4);
}

.route-hokubu .route_time,
.route-hokubu .route_spot_slider .swiper-button-prev,
.route-hokubu .route_spot_slider .swiper-button-next,
.route-hokubu .route_spot_link_map,
.route-hokubu .route_spot_address dt  {
	background: var(--spot4_bg);
	color: var(--spot4);
}

.route-hokubu .route_move_icon,
.route-hokubu .route_spot_slider .swiper-pagination-bullet,
.route-hokubu .route_spot_info   {
	border: 1px solid var(--spot4);
}

.route-hokubu .route_item:not(:last-child)::before{
	border-left: 5px dotted var(--spot4);
}

.route-hokubu .route_spot .ttl_mini::before{
    background: url(../images/routes/spot-ashirai4.svg) center / contain no-repeat;
}

.route-hokubu .route_spot_item {
	border: 1px solid var(--spot4_bg);
	box-shadow: 0 0 6px rgba(86, 180, 115, 0.3);
}



/* =========================================================
		chichibu
========================================================= */

.route-chichibu,
.route-chichibu .route_spot_topics{
	background: var( --spot5_bg);
}

.route-chichibu .route_model .ttl_sub,
.route-chichibu .route_model .ttl_mini,
.route-chichibu .route_spot .ttl_mini,
.route-chichibu .route_move,
.route-chichibu .route_spot_label{
	color: var(--spot5);
}

.route-chichibu .route_model .ttl_sub::before,
.route-chichibu .route_model .ttl_sub::after,
.route-chichibu .route_number,
.route-chichibu .route_spot_slider .swiper-pagination-bullet-active{
	background: var(--spot5);
}

.route-chichibu .route_link {
	border: 1px solid var(--spot5);
	color: var(--spot5);
}

.route-chichibu .route_spot_link{
	background: var(--spot5);
}

.route-chichibu .route_time,
.route-chichibu .route_spot_slider .swiper-button-prev,
.route-chichibu .route_spot_slider .swiper-button-next,
.route-chichibu .route_spot_link_map,
.route-chichibu .route_spot_address dt  {
	background: var(--spot5_bg);
	color: var(--spot5);
}

.route-chichibu .route_move_icon,
.route-chichibu .route_spot_slider .swiper-pagination-bullet,
.route-chichibu .route_spot_info   {
	border: 1px solid var(--spot5);
}

.route-chichibu .route_item:not(:last-child)::before{
	border-left: 5px dotted var(--spot5);
}

.route-chichibu .route_spot .ttl_mini::before{
    background: url(../images/routes/spot-ashirai5.svg) center / contain no-repeat;
}

.route-chichibu .route_spot_item {
	border: 1px solid var(--spot5_bg);
	box-shadow: 0 0 6px rgba(86, 180, 115, 0.3);
}

.route-chichibu .route_spot_item:nth-child(3) .route_spot_slider{
	padding-bottom: 0;
}





@media screen and (max-width: 767px) {

	.route-page .desc{ margin-top: 10px;}
	.route_model .inner::before{ width: 50px; height: 50px; right: 4%; top: 1.3%;}
	.route_model .inner{ padding: 7% 3%; }
	.model_route { padding: 40px 16px; border-radius: 20px; }
	.model_route .ttl_area { margin-bottom: 30px; }
	.model_route .ttl_mini { font-size: 26px;}
	.model_route .ttl_area::after { top: -25px; right: -4px; width: 40px; height: 60px;}
	.route_list{ margin-top: 5%;}
	.route_item { padding-bottom: 20px;}
	.route_item:not(:last-child)::before { top: 27px; left: 22px; border-left-width: 4px;}
	.route_number { width: 40px; height: 40px; letter-spacing: -0rem;}
	.route_number span:first-child { font-size: 10px;}
	.route_number span:last-child { font-size: 17px; line-height: .9;}
	.route_content { margin-left: 50px; }
	.route_time { min-width: 110px; min-height: 30px; font-size: 14px;}
	.route_ttl { margin-bottom: 14px; font-size: var(--font-18); letter-spacing: -0.01rem;}
	.route_detail { grid-template-columns: minmax(0, 1fr); gap: 12px;}
	.route_text { margin-bottom: 14px; font-size: var(--font-14); line-height: 1.4;}
	.route_link { width: 80%; max-width: 230px; min-height: 42px; padding: 5px 28px 5px 14px; font-size: 14px;}
	.route_link::after { right: 20px; width: 7px; height: 7px;}
	.route_move { gap: 12px; min-height: 44px; margin-top: 16px; padding-left: 0;}
	.route_move_icon { width: 40px; height: 40px;}
	.route_move_icon img { width: 30px;}
	.route_move p { font-size: 15px;}
	.route_spot .wrapper{  padding-top: 70px;}
	.route_spot .ttl_mini::before{ width: 60px; height: 30px; top: -40px;}
	.route_spot_item { padding: 24px 3% 30px;	border-radius: 16px;}
	.route_spot_head { gap: 10px; margin-bottom: 10px;}
	.route_spot_ttl { font-size: var(--font-18); line-height: 1.5; letter-spacing: -0;}
	.route_spot_txt { font-size: var(--font-14); line-height: 1.6;}
	.route_spot_list{ gap: 20px;}
	.route_spot_slider { width: 70%; margin-top: 24px; margin-bottom: 20px; padding: 0 0 30px;}

	.route_spot_slider .swiper-button-prev,
	.route_spot_slider .swiper-button-next {
		top: calc((100% - 30px) / 2);
		z-index: 2;
		width: 30px;
		height: 30px;
		margin-top: -17px;
	}
	.route_spot_slider .swiper-button-prev { left: -32px;}
	.route_spot_slider .swiper-button-next { right: -32px;}
	.route_spot_slider .swiper-button-prev::before,
	.route_spot_slider .swiper-button-next::before,
	.route_spot_slider .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}

	.route_spot_slider .swiper-pagination { gap: 12px;}
	.route_spot_label { gap: 12px; font-size: var(--font-18);}
	.route_spot_label::before { width: 3px; height: 20px;}
	.route_spot_topics { flex-direction: column; align-items: flex-start; gap: 0; padding: 2% 6% 4%;}
	.route_spot_topics p { font-size: var(--font-14); line-height: 1.5;}
	.route_spot_info { padding: 2% 4% 4%;}
	.route_spot_info_head { gap: 10px;}
	.route_spot_links { width: 80%; gap: 5px; flex-wrap: nowrap; }

	.route_spot_link,
	.route_spot_link_map {
		width: 100%;
		min-width: 0;
		font-size: 13px;
		padding: 3px 26px 3px 20px;
		min-height: 34px;
	}

	.route_spot_link::after { right: 14px; border-width: 1px;}
	.route_spot_address { grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; font-size: var(--font-14); margin-top: 15px;}
	.route_spot_address dt { width: auto; font-size: 12px; }
	.route_spot_address dd{ font-size: 12px; line-height: 1.4;}
}

@media screen and (max-width: 467px) {
	.route_spot_links { width: 100%; }
	.route_link{width: 80%;}
	.route_spot_slider { width: 85%; }
	.route_link { max-width: 260px;}
	.route_spot_link, .route_spot_link_map{min-height: 30px;}

}