@charset "utf-8";
@import url("root.css");

/***********************************************************
  guide
************************************************************/

.route_wrap,
.guide_wrap {
	background: #fff;
	border-radius: 10px;
	margin: calc(var(--sp-space) * 2) auto;
	padding: var(--sp-space);
	width: 100%;
	box-shadow: 10px 10px 50px rgba(0,0,0,0.1);
	counter-reset: number 0;
	display: flex;
	flex-wrap: wrap;
}

.guide_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.guide_wrap h3 {
	width: 100%;
	order: 1;
}
.guide_img {
	width: 50%;
	order: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.guide_img img {
	width: 47.5%;
	margin-bottom: 5%;
}
.guide_txt {
	width: 47.5%;
	order: 2;
}

.guide_txt dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--sp-space) / 2);
}
.guide_txt dt:before {
	counter-increment: number 1;
	content: counter(number) " ";
	display: block;
	font-size: min(4.6vw, 2.8rem);
	margin-right: 10px;
	color: var(--sub-color03);
	line-height: 1.0;
}

.guide_txt dt {
	width: 100%;
	display: flex;
	align-items: center;
	background: var(--sub-color04);
	padding: 5px 5px 5px 10px;
}
.guide_txt dd {
	width: 100%;
	margin-top: 10px;
	margin-left: 2em;
}

@media screen and (max-width:768px){
.guide_img {
	width: 100%;
	order: 2;
}
.guide_txt {
	width: 100%;
	order: 3;
}
}











.guide_wrap h3,
.route_wrap h3 {
	width: 100%;
	font-size: min(4.6vw, 2.8rem);
	line-height: 1.2;
	color: var(--base-color01);
	border-bottom: 2px solid var(--base-color01);
	padding-bottom: 5px;
	margin-bottom: calc(var(--sp-space) / 2);
}

.route_box {
	display: flex;
	flex-wrap: wrap;
	width: 30%;
	position: relative;
	align-content: flex-start;
}
.route_box:not(:nth-of-type(3n)) {
	margin-right: 5%;
}
.route_box:nth-of-type(n+4) {
	margin-top: calc(var(--sp-space) / 2);
}

.route_img {
	width: 100%;
	height: auto;
}
.route_img img {
	width: 100%;
	aspect-ratio: 325/217;
	object-fit: cover;
}
.route_txt {
	width: 100%;
}
.route_txt p {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-top: 10px;
}
.route_wrap .route_txt p:before {
	counter-increment: number 1;
	content: counter(number) " ";
	display: block;
	font-size: min(4.6vw, 2.8rem);
	margin-right: 10px;
	color: var(--sub-color03);
	line-height: 1.0;
}

@media screen and (max-width:768px){
	.route_box { width: 47.5%; }
	.route_box:not(:nth-of-type(3n)) { margin-right: 0; }
	.route_box:nth-of-type(n+4) {	margin-top: 0; }
	.route_box:nth-of-type(odd) { margin-right: 5%; }
	.route_box:nth-of-type(n+3) {	margin-top:  calc(var(--sp-space) / 2); }
}




/*
20240129追加分
*/

.route_wrap > p {
	width: 100%;
	margin-bottom: calc(var(--sp-space) / 2);
}

.route_box2 {
	width: 100%;
}
.route_box2 h4 {
	width: 100%;
	font-size: min(4.6vw, 1.8rem);
	line-height: 1.2;
	color: var(--base-color01);
	margin-bottom: calc(var(--sp-space) / 3);
}
.route_map ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: calc(var(--sp-space) / 2);
}

.route_map ul li {
	width: calc(100% / 3);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.route_map ul li:nth-of-type(1),
.route_map ul li:nth-of-type(3) {
	border: solid 1px var(--base-color01);
	padding: 15px;
	background: var(--base-color01);
	color: #fff;
}
.route_map ul li span {
	display: block;
	width: 100%;
	text-align: center;
}
.route_map ul li span:nth-of-type(1) {
	border-bottom: solid 1px var(--base-color01);
}

@media screen and (max-width:768px){
	.route_box2 h4 {
		font-size: min(4.6vw, 2.8rem);
	}
	.route_map ul li {
		width: 25%;
	}
	.route_map ul li:nth-of-type(2) {
		width: 50%;
}

@media screen and (max-width:599px){
	.route_map ul {
		margin-bottom: var(--sp-space);
	}
	.route_map ul li {
		width: 100%!important;
	}
	.route_map ul li span:nth-of-type(1) {
		border-bottom: none;
	}
	.route_map ul li:nth-of-type(2)  {
		position: relative;
		margin: 45px auto;
		border: solid 1px var(--base-color01);
		padding: 10px;
	}
	.route_map ul li:nth-of-type(2) ::before {
		content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 15px solid var(--sub-color01); /* 好みで高さ色を変えてください */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: translate(-50%,0);
	}
	.route_map ul li:nth-of-type(2) ::after {
		content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 15px solid var(--sub-color01); /* 好みで高さ色を変えてください */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: translate(-50%,0);
	}
	.drive span:nth-of-type(1) {
		display: none;
	}
}