@charset "UTF-8";
/*** ★" ***/


.swiper-pagination-bullet-active{
	background: #18715a !important;
}
.swiper-pagination{
	z-index: 5;
}

/*[  Common Setting  ]----------------------------------------------------------------*/

	[aria-hidden="true"]{
		display: none !important;
	}
/*:: Web Fonts ::*/
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}




/*:: Document ::*/
	html{
		font-size: 16px; /* = 1rem */
	}
	:where(body) {
		block-size: 100%; /* サファリ以外のブラウザのフォールバック */
	}
	body{
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-style: normal;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0;
		color: #111;

		background: white;
		position: relative;
		overflow-x: hidden;
	}





/*:: Standard Paragraph ::*/



/*:: Headings ::*/
	h1, h2, h3, h4, h5, h6 {
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-style: normal;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.4;
	}


/*:: Imposing Text ::*/
	i{
		font-style: normal;
	}
	em {
		font-weight: 500;
	}
	strong {
		font-weight: 700;
		color: #18715a;
		.process & {
			color: #de4958;
		}
	}

	mark{
		background: #F9D348;
	}

/*:: float ::*/

	.float{
		float: right;
		margin: 0 0 1em 1em;
		max-width: 33%;
		min-width: 192px;

		& > * + *{
			margin: 0.8em 0 0 0;
		}

	}


/*:: Text Links ::*/
	a[href]{
		transition: color 0.1s;
		color: black;
		text-decoration: none;

		&:hover{
			color: #18715a;
			text-decoration: none;
		}
		&:active{
			color: #c1d8b5;
			text-decoration: none;
		}
	}

/*:: Download Links ::*/
	a[download]{
		&::before{
			vertical-align: middle;
		}
		&[href$=".pdf"]::before{
			content: url(/_assets/img/ico_pdf.svg);
		}
		&[href$=".doc"]::before,
		&[href$=".docx"]::before{
			content: url(/_assets/img/ico_doc.svg);
		}
		&[href$=".xls"]::before,
		&[href$=".xlsx"]::before{
			content: url(/_assets/img/ico_xls.svg);
		}
	}



/*:: Download List ::*/
	ul.downloadList{
		& > li{
			padding: 0.75em 1em;
			line-height: 1.2;
			&:nth-of-type(2n-1){
				background: #eee;
			}
		}
	}


/*:: Normal List ::*/
	ul.normalList{
		& > li{
			margin: 1em 0 0 2em;
			line-height: 1.6;
			position: relative;
			&::before {
				position: absolute;
				content: '';
				display: block;
				background-color: #19725b;
				border-radius: 50%;
				height: 0.5em;
				width: 0.5em;
				top: 0.5em;
				left: -1em;
			}
			& + li{
				margin: 0.8em 0 0 2em;
			}
		}
	}

	p.center{
		text-align: center;
	}


/*[ globalFooter ]----------------------------------------------------------------*/
	#globalFooter{
		background: url(/_assets/img/bg_footer.png) no-repeat top center;
		background-size: cover;
		padding: 1em;

		& > [itemscope]{
			max-width: 960px;
			margin: 0 auto;
			display: grid;

			column-gap: 1em;
			row-gap: 1em;
			grid-template-columns: auto 1fr auto;
			grid-template-rows: 1fr auto auto;
			grid-template-areas:
				"logo logo siteContent"
				"address SNS siteContent"
				"address SNS siteInformation";
			
			& > [itemprop="logo"]{
				grid-area: logo;
				max-width: 400px;
				& > img{
					width: 100%;
				}
			}
			& > [itemprop="address"]{
				grid-area: address;
				line-height: 1.5;
			}
			& > [itemprop="SNS"]{
				grid-area: SNS;
				width: 3em;
			}
			& > [itemprop="siteContent"]{
				grid-area: siteContent;
				place-self: end;
				display: grid;
				column-gap: 1em;
				grid-template-columns: repeat(3, auto);
				grid-template-rows: 1fr;
				& > a{
					display: block;
				}
				& [itemscope]{
					display: grid;
					place-items: center;
					column-gap: 0;
					row-gap: 0.5em;
					grid-template-columns: 1fr;
					grid-template-rows: 1fr auto;
					grid-template-areas:
						"button"
						"text";
					& > [itemprop="text"]{
						grid-area: text;
						font-weight: 500;
					}
					& > [itemprop="button"]{
						grid-area: button;
						max-width: 80px;
						& > img{
							width: 100%;
						}
					}
				}

			}
			& > [itemprop="siteInformation"]{
				grid-area: siteInformation;
				& > ul{
					text-align: right;
					& > li{
						display: inline-block;
						padding: 0.25em 1em;
						font-size: 0.8em;
						& + li{
							border-left: 1px solid #999;
						}
					}
				}
			}
		}
	}

@media (max-width: 800px) {
		#globalFooter{
		& > [itemscope]{
			column-gap: 1em;
			row-gap: 1em;
			grid-template-columns: 1fr auto;
			grid-template-rows: repeat(4, auto);
			grid-template-areas:
				"siteContent siteContent"
				"logo logo"
				"address SNS"
				"siteInformation siteInformation";
			& > [itemprop="siteContent"]{
				place-self: center;
				padding: 2em;
				column-gap: 2em;
				& [itemscope]{
					& > [itemprop="button"]{
						max-width: 64px;
					}
				}
			}
			& > [itemprop="siteInformation"]{
				& > ul{
					text-align: left;
				}
			}
		}
	}
}








/*[ globalHeader ]----------------------------------------------------------------*/
	#globalHeader{
		position: fixed;
		z-index: 5;
		display: grid;
		height: 80px;
		width: 100%;
		
		column-gap: 2em;
		row-gap: 0;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"pageName siteContent"
			"rootNav siteContent";

		& > [itemprop="logo"]{
			position: absolute;
			height: 96px;
			width: 96px;
			background: white;
			border-radius: 100%;
			top: -16px;
			left: -16px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.33);

			& > a{
				position: absolute;
				height: 80px;
				width: 80px;
				top:16px;
				left:16px;
				display: grid;
				place-items: center;
				& > img{
					display: inline-block;
					width: 64px;
					height: 64px;
				}
			}
		}
		& > [itemprop="pageName"]{
			grid-area: pageName;
			display: grid;
			place-items: center start;
			width: 100%;
			font-size: 1.25em;
			font-weight: 500;
			font-style: normal;
			background: #ccc;
			height:48px;
			padding: 0 0 0 96px;
			border-radius: 0 24px 24px 0;

			&.spot{
				background: #ff7cb4;
				color: white;
			}
			&.route{
				background: #848eff;
				color: white;
			}
			&.documents{
				background: #ffa800;
				color: #503c2d;
			}
			&.contact{
				background: #4fc4bb;
				color: white;
			}
		}
		& > [itemprop="siteContent"]{
			grid-area: siteContent;
			padding: 8px 1rem 0 0;
			display: grid;
			column-gap: 0.5em;
			grid-template-columns: repeat(3, auto);
			grid-template-rows: 1fr;
			& a{
				display: block;
			}
			& [itemscope]{
				display: grid;
				place-items: center;
				column-gap: 0;
				row-gap: 0.25em;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr auto;
				grid-template-areas:
					"button"
					"text";
				& > [itemprop="text"]{
					grid-area: text;
					font-weight: 500;
					font-size: 0.75em;
				}
				& > [itemprop="button"]{
					grid-area: button;
					max-width: 40px;
					& > img{
						width: 100%;
					}
				}
			}
		}
		& > [itemprop="rootNav"]{
			grid-area: rootNav;
			& > ol{
				padding: 0 0 0 96px;
				& > li{
					position: relative;
					display: inline-block;
					font-size: 0.8em;
					font-weight: 500;
					& + li{
						font-weight: 400;
						padding: 0 0 0 1em;
						&::before{
							position: absolute;
							left: 0.2rem;
							top:calc(50% - 0.7em / 2);
							content: '';
							display: block;
							background-color: rgba(0,0,0,0.33);
							width: 0.4em;
							height: 0.7em;
							clip-path: polygon(0 0, 0% 100%, 100% 50%);
						}
					}
				}
			}
		}
	}


@media (max-width: 640px) {
	#globalHeader{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"siteContent";

		& > [itemprop="pageName"]{
			display: none;
		}
		& > [itemprop="siteContent"]{
			padding: 8px 8px 0 96px;
			place-self: start end;
			& a{
				display: block;
			}
			& [itemscope]{
				display: grid;
				place-items: center;
				column-gap: 0;
				row-gap: 0.25em;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr auto;
				grid-template-areas:
					"button"
					"text";
				& > [itemprop="text"]{
					grid-area: text;
					font-weight: 500;
					font-size: 0.75em;
				}
				& > [itemprop="button"]{
					grid-area: button;
					max-width: 40px;
					& > img{
						width: 100%;
					}
				}
			}
		}
		& > [itemprop="rootNav"]{
			display: none;

		}

	}	
}




/*[ mainImage ]----------------------------------------------------------------*/
	#mainImage{
		& > [itemprop="title"]{
			max-width: 1366px;
			margin: 0 auto;
		}
	}



/*[ pageHeader ]----------------------------------------------------------------*/
	#pageHeader{
		position: relative;
		height: 256px;
		padding: 48px 0 0 0;
		background: no-repeat bottom center;
		background-size: cover;

		& > h1{
			display: grid;
			place-items: center start;
			height: 100%;
			padding: 0 1em;
			max-width: calc(960px + 2em);
			margin: 0 auto;
			font-size: 2em;
			font-weight: 500;

			&.spot{
				color:white;
			}
		}

		&::after{
			content: '';
			height: 144px;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: url(/_assets/img/bg_pegeheader.png) no-repeat bottom right;
			background-size: contain;
		}

		+ p{
			max-width: 768px;
			margin: 6em auto;
			padding: 0 1em;
			font-size: 1.1em;
			line-height: 1.8;
		}
	}



/*[ Section ]----------------------------------------------------------------*/

	main > section{

		& > section{
			padding: 0 1em;
			margin: 8em auto;
			max-width: 960px;
			& > p{
				line-height: 1.8;
			}
			& > header{
				margin: 0 0 3em 0;
				& > h2{
					text-align: center;
					font-size: 1.8em;
				}
			}
			& > section{
				margin: 2em auto;
				& > p{
					line-height: 1.6;
				}
				& > ul{
					& > li{
						margin: 0.5em 0 0 1em;
						line-height: 1.5;
						position: relative;
						&::before {
							position: absolute;
							content: '';
							display: block;
							background-color: #19725b;
							border-radius: 50%;
							height: 0.25em;
							width: 0.25em;
							top: calc(1.6em / 2 - 0.25em / 2);
							left: -1em;
						}
						& + li{
							margin: 0.5em 0 0 1em;
						}
					}
				}

				& > header{
					margin: 0 0 1em 0;
					& > h3{
						font-size: 1.25em;
					}
				}
			}
		} 
	}


	table:not([class]){
		width: 100%;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;

		& th{
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			padding: 1em;
			background: #fef7de;
			font-weight: 500;
			width: 33%;
			line-height: 1.5;
		}
		& td{
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			padding: 1em;
			line-height: 1.5;
		}
	}


/*[ data-type="spot" ]----------------------------------------------------------------*/

	[data-type="spot"]{
		container-type: inline-size;
		max-width: 960px;
		padding: 3em 0;
		margin: 0 auto;
		display: grid;

		column-gap: 2em;
		row-gap: 1em;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto 1fr auto auto;
		grid-template-areas:
			"image name name"
			"image description description"
			"image address link"
			"image aside link";

			& + [data-type="spot"]{
			border-top: 1px solid #ffd9e8;
		}

			& > [itemprop="name"]{
				grid-area: name;
				font-size: 1.5em;
				font-weight: 500;
				& rt{
					ruby-align: start;
					color: #666;
				}
			}

			& > [itemprop="image"]{
				grid-area: image;
				max-width: 240px;
				& > img{
					width: 100%;
				}

			}

			& > [itemprop="description"]{
				grid-area: description;
				padding: 0 0 1em 0;
				border-bottom: 1px solid #eee;
				line-height: 1.5;
			}

			& > [itemprop="address"]{
				grid-area: address;
				line-height: 1.2;
			}

			& > [itemprop="aside"]{
				grid-area: aside;
				font-size: 0.8em;
				line-height: 1.5;
			}

			& > [itemprop="link"]{
				grid-area: link;

				& li{
					& + li{
						margin-top: 0.5em;
					}
				}

				& a{
					display: grid;
					place-items: center;
					background: white;
					border: 1px solid #999;
					border-radius: 0.5em;
					min-width: 192px;
					height: 32px;
					font-size: 0.8em;
					color: #999;
					font-weight: 500;
				}
				& a[href]{
					border: 1px solid #2686c6;
					color: #2686c6;
					&:hover{
						color: white;
						background: #2686c6;
					}
				}
				& a[href*="google.com/maps/"]{
					border: 1px solid #48bb57;
					color: #48bb57;
					&:hover{
						color: white;
						background: #48bb57;
					}
				}
				& a:not([href]){
					display: none;
				}

			}

	}

@media (max-width: 800px) {
	[data-type="spot"]{
		padding: 2em 0;
		column-gap: 1.5em;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr auto auto auto;
		grid-template-areas:
			"image name"
			"image description"
			"image address"
			"image aside"
			"image link";
		}
}
@media (max-width: 600px) {
	[data-type="spot"]{
		column-gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto auto auto;
		grid-template-areas:
			"name"
			"image"
			"description"
			"address"
			"aside"
			"link";
		& > [itemprop="image"]{
				max-width: 100%;
			}
	}

}

/*[ data-type="merit" ]----------------------------------------------------------------*/

	[data-type="merit"]{
		display: grid;
		column-gap: 0;
		row-gap: 0;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;

		@media (max-width: 600px) {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(3, auto);
		}

		& > li{
			padding: 0 2em;
			@media (max-width: 800px) {
				padding: 0 1em;
			}
			@media (max-width: 600px) {
				padding: 0 0 2em 0;
			}
			& + li{
				border-left: 1px solid #ccc;
				@media (max-width: 600px) {
					padding: 2em 0;
					border-left: none;
					border-top: 1px solid #ccc;
				}
			}
			& > [itemscope]{
				& > [itemprop="headline"]{
					font-size: 1.05em;
					font-weight: 500;
					line-height: 1.2;
				}
				& > [itemprop="text"]{
					margin: 1em 0 0 0;
					line-height: 1.6;
				}
			}
		}
	}



	/*[ data-type="route" ]----------------------------------------------------------------*/

	[data-type="route"]{
		position: relative;
		max-width: 960px;
		&::before{
			content: '';
			display: block;
			height: 100%;
			width: 1px;
			background: #d9dcff;
			position: absolute;
			top: 0;
			left: 50%;
			z-index: -1;
		}

		& > li{
			& + li{
				margin: 2em 0 0 0;
			}
		}
		& > li.start{
			max-width: 480px;
			margin-left: auto;
			margin-right: auto;
			padding: 0.5em 1em;
			background: white;
			text-align: center;
			font-size: 1.5em;
			color: #848eff;
			border: 1px solid #848eff;
		}
		& > li.finish{
			max-width: 480px;
			margin-left: auto;
			margin-right: auto;
			padding: 0.5em 1em;
			background: white;
			text-align: center;
			font-size: 1.5em;
			color: #848eff;
			border: 1px solid #848eff;
		}
		& > li.traveltime{
			max-width: 256px;
			margin-left: auto;
			margin-right: auto;
			padding: 0.5em 1em;
			background: white;
			text-align: center;
			font-size: 0.9em;
			font-weight: 500;
			color: #848eff;
			border: 1px solid #848eff;
			border-radius: 1.5em;
		}
		& > li.note{
			max-width: 768px;
			margin-left: auto;
			margin-right: auto;
			padding: 0.5em 1em;
			background: white;
			text-align: center;
			font-size: 0.9em;
			font-weight: 500;
			color: #848eff;
			border: 1px solid #848eff;
		}

		& > li.spot{
			& > [itemscope]{
				background: white;
				padding: 0.5em 0;
				display: grid;
				column-gap: 1.5em;
				row-gap: 0.5em;
				grid-template-columns: auto auto 1fr auto;
				grid-template-rows: auto auto 1fr auto;
				grid-template-areas:
					"image icon name name"
					"image icon highlights highlights"
					"image description description description"
					"image time time link";

				@media (max-width: 768px) {
				grid-template-columns: auto auto 1fr;
				grid-template-rows: auto auto 1fr auto;
				grid-template-areas:
					"image icon name"
					"image icon highlights"
					"image description description"
					"time time link";
				}
				@media (max-width: 560px) {
					column-gap: 1em;
					grid-template-columns: auto auto 1fr;
					grid-template-rows: auto auto 1fr auto;
					grid-template-areas:
						"image icon name"
						"image highlights highlights"
						"image description description"
						"time time link";
				}
				@media (max-width: 480px) {
					grid-template-columns: auto auto 1fr;
					grid-template-rows: auto auto 1fr auto auto;
					grid-template-areas:
						"icon name name"
						"icon highlights highlights"
						"image image description"
						"time time time"
						"link link link";
				}


					& > [itemprop="image"]{
					grid-area: image;
					max-width: 200px;
					@media (max-width: 560px) {
						max-width: 160px;
					}
					@media (max-width: 480px) {
						max-width: 128px;
					}

				}
				& > [itemprop="icon"]{
					grid-area: icon;

				}
				& > [itemprop="name"]{
					grid-area: name;
					line-height: 1.25;
					font-size: 1.6em;
					font-weight: 500;
				}
				& > [itemprop="highlights"]{
					grid-area: highlights;
					line-height: 1.25;
					font-weight: 500;
				}
				& > [itemprop="description"]{
					grid-area: description;
					padding: 1em 0 0.5em 0;
					line-height: 1.6;
					border-bottom: 1px solid #ddd;
					@media (max-width: 480px) {
						padding: 0 0 0.5em 0;
					}
				}
				& > [itemprop="time"]{
					grid-area: time;
					padding: 0.5em 0;
					font-size: 0.9em;
					@media (max-width: 480px) {
						padding: 0;
					}
				}
					& > [itemprop="link"]{
					grid-area: link;
					place-self: end;
					padding: 0.5em 0;
					font-size: 0.9em;
					@media (max-width: 480px) {
						padding: 0;
					}
				}
			}
		}

	}


	/*[ data-type="routeIndex" ]----------------------------------------------------------------*/

	[data-type="routeIndex"]{
		display: flex;
		overflow-x: scroll;
		margin: 2em 0;
		& > li{
			flex: 1 0 auto;
			padding: 0.5em 0.5em;
			& + li{
				border-left: 1px solid #ccc;
			}

			& > [itemscope]{
				display: grid;
				place-items: center;
				column-gap: 0;
				row-gap: 0.5em;
				grid-template-columns: 1fr;
				grid-template-rows: auto 1fr auto;
				grid-template-areas:
					"icon"
					"name"
					"time";
				& > [itemprop="name"]{
					grid-area: name;
					font-size: 1em;
					font-weight: 500;
				}
				& > [itemprop="time"]{
					grid-area: time;
					font-size: 0.9em;
					font-weight: 500;
				}
				& > [itemprop="icon"]{
					grid-area: icon;
					& > img{
						width: 100%;
						max-width: 64px;
						min-width: 48px;
					}
				}
			}
		}
	}


	/*[ data-type="routeInfo" ]----------------------------------------------------------------*/

	[data-type="routeInfo"]{
		display: flex;
		flex-wrap: wrap;
		column-gap: 2em;
		row-gap: 0.5em;
		margin: 2em 0;
		& > li{
			& > dl{
				display: grid;
				place-items: start;
				column-gap: 1em;
				row-gap: 0;
				grid-template-columns: auto 1fr;
				grid-template-rows: 1fr;
				& > dt{
					border: 1px solid black;
					font-size: 0.9em;
					font-weight: 500;
					padding: 0.25em 2em;
					text-align: center;
				}
				& > dd{
					line-height: 1.4;
				}
			}
		}
	}




	/*[ data-type="recommend" ]----------------------------------------------------------------*/

	[data-type="recommend"]{
		background: #ebedff;
		padding: 2em 0;
		& > header{
			& > h3{
				text-align: center;
			}
		}
		& > ul{
			text-align: center;
			& > li{
				margin: 0.25em;
				padding: 0.5em 1em;
				display: inline-block;
				background: white;
				border: 1px solid #666;
				border-radius: 1.5em;
				font-size: 0.9em;
				font-weight: 500;
				&::before{
					content: none;
				}
			}
		}
	}

	/*[ data-type="order" ]----------------------------------------------------------------*/
	[data-type="routeOrder"]{
		background: url(/_assets/img/bg_order.png) no-repeat center center;
		padding: 2em 1em;
		& > small{
			display: block;
			margin: 1em 0 0 0;
			text-align: center;
		}
		& > a{
			display: block;
			margin: 0 auto;
			max-width: 400px;
			width: 90%;
		}
	}

	/*[ data-type="order" ]----------------------------------------------------------------*/
	[data-type="selectMenu"]{
		background: url(/_assets/img/bg_order.png) no-repeat center center;
		margin: 3em auto;
		padding: 1em 0;
		text-align: center;
		& > li{
			display: inline-block;
			padding: 1em;

			@media (max-width: 480px) {
				max-width: 128px;
				padding: 0.5em;
			}
		}
	}




	/*[ #message ]----------------------------------------------------------------*/
	.index #message{
		display: grid;
		column-gap: 3em;
		row-gap: 1em;
		grid-template-columns: auto 1fr;
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"headline text"
			"link text";

		@media (max-width: 768px) {
			column-gap: 0;
			row-gap: 2em;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto;
			grid-template-areas:
				"headline"
				"text"
				"link";
		}

		& > [itemprop="headline"]{
			grid-area: headline;
			margin: 0;
			& > h2{
				text-align: left;
				font-size: 2em;
				line-height: 1.6;
			}
		}
		& > [itemprop="text"]{
			grid-area: text;
			padding: 5em 0 0 0; 
			@media (max-width: 768px) {
				padding: 0 0 0 25%;
			}
			& > p{
				font-size: 1.1em;
				line-height: 2;
				& + p{
					margin: 0.8em 0 0 0;
				}
			}
		}
		& > [itemprop="link"]{
			grid-area: link;
			& > li{
				line-height: 1.4;
				font-size: 0.9em;
				& + li{
					margin: 0.8em 0 0 0;
				}
			}
		}
	}









	/*[ #route ]----------------------------------------------------------------*/
	.index #route{

	}

	[data-type="selectRoute"]{
		display: grid;
		column-gap: 2em;
		row-gap: 2em;
		grid-template-columns: repeat(2, 1fr);

		@media (max-width: 800px) {
			column-gap: 1em;
		}
		@media (max-width: 600px) {
			grid-template-columns: 1fr;
		}

		& [itemscope]{
			display: grid;
			column-gap: 0;
			row-gap: 0;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(2, auto);
			grid-template-areas:
				"image"
				"title";
			& > [itemprop="title"]{
				grid-area: title;
				padding: 0.75em 0 0.5em 1em;
				margin: 0 0 0 2em;
				line-height: 1.4;
				font-weight: 500;
				border-left: 1px solid #848eff;
			}
			& > [itemprop="image"]{
				grid-area: image;
				
			}

		}
	}






	/*[ #spot ]----------------------------------------------------------------*/
	.index #spot{

	}


	[data-type="selectSpot"]{
		display: grid;
		place-items: center;
		column-gap: 2em;
		row-gap: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"list map";
		@media (max-width: 600px) {
			row-gap: 3em;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
			grid-template-areas:
				"list"
				"map";
		}

		& > [itemprop="list"]{
			& > li{
				& + li{
					margin: 2em 0 0 0;
					@media (max-width: 600px) {
						margin: 1em 0 0 0;
					}
				}
				& > a{
					display: grid;
					place-items: center;
					width: 320px;
					height: 72px;
					background: #eee;
					font-size: 1.5em;
					font-weight: 500;
					color: #666;
					border-radius: 0.5em;
					&:hover{
						color: white;
					}
					@media (max-width: 600px) {
						height: 64px;
						font-size: 1.25em;
					}

					&[href*="himeji-nakaharima"]{
						background: #84ceff;
						color: #00487b;
					}
					&[href*="nishiharima"]{
						background: #f89975;
						color: #5f0007;
					}
					&[href*="kitahigashiharima"]{
						background: #fff067;
						color: #503c2d;
					}
					&[href*="tamba-tajima"]{
						background: #b3b5fa;
						color: #00487b;
					}
					&[href*="nishinihon"]{
						background: #aad980;
						color: #006237;
					}
				}
			}
		}
		& > [itemprop="map"]{
			max-width: 480px;
		}
	}


	/*[ #contactForm ]----------------------------------------------------------------*/
#contactForm {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px;
}

#contactForm dl {
  margin: 0;
}

#contactForm dt {
  margin: 0 0 0.4em;
  font-weight: bold;
}

#contactForm dd {
  margin: 0 0 1.2em;
}

#contactForm input,
#contactForm select,
#contactForm textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7em;
  font-size: 16px;
  line-height: 120%;
  border: 1px solid #666666;
}

#contactForm textarea {
  resize: vertical;
  min-height: 40vh;
}

#contactForm span {
  margin-left: 0.5em;
  color: #c00;
  font-size: 0.9em;
}

#contactForm button {
	display: block;
  cursor: pointer;
	max-width: 400px;
	margin: 3em auto 2em auto;
}


#contactForm small {
	display: block;
	max-width: 640px;
	margin: 1em auto 0 auto;
	text-align: left;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.4;
	color: #de4958;
}