@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// About /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


/**********************************************************************/
/********************************* Title ********************************/
/**********************************************************************/


#title
{
	margin-top: clamp(3rem, 10vw, 5rem);
	padding: clamp(3rem, 10vw, 5rem) 0;
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
}

#title h1
{
	transition-delay: .5s;
	display:flex;
	flex-direction:column;
	align-items: center;
	font-size: clamp(1.2rem, 5vw, 2.2rem);
	margin-bottom: 0em;
	margin-top: 0em;
}
#title h1> span:nth-of-type(1)
{
	font-size: max(.6em, .7rem);
	padding: 0 .5em .25em;
	margin-bottom: .25em;
	border-bottom: 1px solid rgb(100, 100, 100);
}


/**********************************************************************/
/***************************** Basic Info ******************************/
/**********************************************************************/

#basic_info
{
	padding: clamp(3rem, 5vw, 4rem) 0;
}

#basic_info h2
{
	margin-top: 0;
	text-align:center;
	padding-bottom: .5em;
	margin-bottom: 2em;
	border-bottom: 1px solid rgb(200, 200, 200);
}

#basic_info .statement
{
	font-family: "Zen", serif;
	padding: 2em 2rem;
	font-size: clamp(1rem, 2vw, 1.3rem);
}

#basic_info .statement p
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/**********************************************************************/
/******************************* Jump ********************************/
/**********************************************************************/

#jump
{
	transition-delay: 1.25s;
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	padding: 1rem;
	padding-bottom: max(5vw, 5rem);
	margin-top: max(2vw, 2rem);
}

#jump > a.moreBt
{
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	width:50%;
	max-width: 30rem;
	margin: 1rem;
	line-height: 1.75;
}

#jump > a.moreBt > p
{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding-left: 1em;
}
#jump > a.moreBt > p > span:nth-of-type(1)
{
	font-size: .5em;
}

#map .map
{
	width: 100%;
	height: min(50vh, 500px);
	filter: grayscale(70%);
}

.transit
{
	padding: max(5rem, 5vw) 0 max(5rem, 5vw);
	background-color: rgba(255, 255, 255, 1);
}

.transit > div
{
	display: flex;
	flex-direction:column;
	align-items:center;
}

#car
{
	border-top:1px solid rgb(200, 200, 200);
}

.transit .info
{
	font-size: clamp(1rem, 2vw, 1.2rem);
	margin-top: 1em;
	
	display: flex;
	flex-direction: column;
	align-items:center;
}

.transit .info p
{
	font-family: "Zen";
	display: flex;
	justify-content:center;
	flex-wrap:wrap;
}

.transit .info p.dir:before
{
	content:"";
	display: block;
	margin: .5em 0;
	background: rgb(100, 100, 100);
	height: calc(tan(60deg) * 1em / 2);
	width: 1em;
	clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}

.transit h2
{
	display:flex;
	justify-content:center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

.transit h2:before
{
	content:"";
	display: inline-block;
	height: 1em;
	margin-right: .5em;
	aspect-ratio: 110 / 50;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	
	transform: translateY(.4em);
}

#car h2:before
{
	background-image:url(../_img/access_2.svg);
}
#train h2:before
{
	background-image:url(../_img/access_1.svg);
}

.transit .sub
{
	margin-top: 2em;
	padding: max(1em, 2vw);
	background-color: rgba(255, 255, 255, 1);
	
	display: flex;
	flex-direction: column;
	align-items:center;
}

.transit .sub .price
{
	width:100%;

	display: flex;
	flex-direction: column;
	align-items:center;
	
	font-size: 1.1em;
	margin: 1em 0;
	padding: .5em 0;
	border-style: solid;
	border-color: rgb(100, 100, 100);
	border-width: 1px 0;
}

.transit ul.caution li
{
	list-style: none;
	padding-left: 1.2em;
}

.transit ul.caution li:before
{
	content:"＊";
	position: absolute;
	top:0;
	left:0;
}

/*//////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 600px)
{
	.transit h2
	{
		flex-direction:column;
		align-items:center;
	}
	.transit h2:before
	{
		margin-bottom: 1em;
	}
}