@charset "utf-8";

/*------------------------


	住所など


------------------------*/

#access_info_main{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:50px;
}

#access_info .photo{
	width:320px;
	height: auto;
	vertical-align: top;
	border-radius: 10px;
}

#access_info .text{
	display: inline-block;
	text-align: left;
	font-size:1.15rem;
	font-weight: 500;
}

#access_info .text img{
	width:280px;
	height: auto;
}

#access_info .bana{
	margin-top:10px;
}

#access_info .bana a{
	width:220px;
	height: 40px;
	line-height: 40px;
	background-color: #6BA736;
	border-radius: 5px;
	color:#fff;
	font-weight: 700;
	font-size:16px;
	text-decoration: none;
	display: flex;
	padding:0 5px;
	justify-content: space-between;
	align-items: center;
	margin-top:5px;
}

#access_info .bana a::after{
	font: var(--fa-font-solid);
	content: "\f0da";
}

#access_info_tel{
	display: inline-block;
	justify-content: flex-end;
	align-items: center;
}

#access_info_tel .telno{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#access_info_tel .ico{
	font-syze:0.85rem;
	margin-top:10px;
}

#access_info_tel a[href^="tel:"]{
	display: inline-block;
	font-size: 2.2rem;
	color:#333333;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
}

main .content_inner{
	padding:60px 10px;
}
/*--------------------------------------

	レスポンシブ

--------------------------------------*/
@media screen and (min-width: 430px){

	#access_info .bana a{
		 -webkit-transition: all .3s;
	  transition: all .3s;
	}

	#access_info .bana a:hover{
			opacity: 0.8;
	}
}

@media screen and (min-width: 430px) and (max-width: 720px){
	#access_info_main{
		gap:30px;
	}
	
	#access_info .text{
		text-align: left;
		font-size:2.45vw;
	}
	
	#access_info_tel a[href^="tel:"]{
		font-size:4.8vw;
	}
}

@media screen and (max-width: 430px){
	section#access_info{
		padding-top:30px;
	}
	#access_info .text{
		text-align: center;
	}
	#access_info{
		padding-top:30px;
	}
	#access_info_main{
		flex-direction: column;
	}
	
	#access_info .bana{
		display: block;
		width: 100%;
		text-align: center;
	}
	#access_info .bana a{
		margin:0 auto 10px auto;
	}
}
/*------------------------

	地図

------------------------*/

#map{
	width: 100%;
	padding:80px 0;
}

#map iframe{
	width:100%;
	height: 650px;
	border-radius: 10px;
}

/*--------------------------------------

	レスポンシブ

--------------------------------------*/
@media screen and (max-width: 430px){
	#map{
		width:95%;
		margin:0 auto;
	}
	
	#map iframe{
		height: calc(100svh - 100px);
	}
}
/*------------------------


電車・バスでお越しになる場合


------------------------*/

#train ul{
	/*margin-left:20px;*/
	/*margin-top:30px;*/
}

#train li{
	display: flex;
	margin-bottom:30px;
}

#train li:last-child{
	margin-bottom:0;
}

#train li strong{
	font-size:1.15rem;
	font-weight: 700;
}

#train li::before{
	content:"●";
	color:#CFEA9C;
	margin-bottom:5px;
	font-size: 12px;
	width:10px;
	height: 1em;
	display: block;
		line-height: 1;
	margin-right:5px;
	margin-top:1em;
}

#train li .time{
	margin-left:1em;
	padding-left:1em;
	text-indent: -1em;
	font-size:0.9rem;
	display: block;
	font-weight: 600;
}

#train li .time a{
	text-decoration: none;
}

#train li .time .fa-square-caret-right{
	color:#A7D899;
}

#train li .flow{
	margin-top:20px;
	display: flex;
	gap:5px;
}

#train li .flow-item{
	
	width: 250px;
	padding:5px 10px;
	background-color: #E3EECA;
	border-radius: 3px;
	color:#000;
	font-weight: 600;
	font-size:1rem;
	line-height: 1.2;
	text-shadow:1px 1px 0 rgba(255,255,255,0.8), -1px -1px 0 rgba(255,255,255,0.8),
              -1px 1px 0 rgba(255,255,255,0.8), 1px -1px 0 rgba(255,255,255,0.8),
              0px 1px 0 rgba(255,255,255,0.8),  0 -1px 0 rgba(255,255,255,0.8),
              -1px 0 0 rgba(255,255,255,0.8), 1px 0 0 rgba(255,255,255,0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#train li .flow-arrow{
	width:100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right:15px;
}

#train li .flow-arrow p{
	width:100%;
	height: 16px;
	background-color: #CCCCCC;
	position: relative;
	font-size:14px;
	line-height: 1;
	text-align: center;
	text-shadow:1px 1px 0 rgba(255,255,255,0.8), -1px -1px 0 rgba(255,255,255,0.8),
              -1px 1px 0 rgba(255,255,255,0.8), 1px -1px 0 rgba(255,255,255,0.8),
              0px 1px 0 rgba(255,255,255,0.8),  0 -1px 0 rgba(255,255,255,0.8),
              -1px 0 0 rgba(255,255,255,0.8), 1px 0 0 rgba(255,255,255,0.8);
	font-weight: 600;
}

#train li .flow-arrow p::before{
	content: '';
	width:20px;
	height: 30px;
	background-color: #CCCCCC;
	position: absolute;
	right:-20px;
	top:calc(50% - 15px);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

/*--------------------------------------

	レスポンシブ

--------------------------------------*/
@media screen and (max-width: 980px){
	
	#train .inner{
		text-align: center;
	}
	#train ul{
		display: inline-block;
		text-align: left;
	}
	
	#train li strong{
		font-size:1.1rem;
	}
	#train li .flow{
		width:min(95%,250px);
		margin:0 auto;
		flex-direction: column;
		margin-top:15px;
	}
	#train li .flow-arrow{
		width:15px;
		display: block;
		margin:0 auto 20px auto;
	}
	#train li .flow-arrow p{
		width:100%;
		height: auto;
		min-height: 80px;
		writing-mode: vertical-rl;
		 text-orientation: upright;
		text-align: left;
		line-height: 15px;
	}
	
	#train li .flow-arrow p span{
		 text-combine-upright: digits 3;
		padding-left:-2em;
		display: inline-block;
	}
	
	#train li .flow-arrow p::before{
		clip-path: polygon(0 0, 49% 100%, 100% 0);
		width:30px;
		height: 20px;
		bottom:-20px;
		left:calc(50% - 15px);
		right:auto;
		top:auto;
	}
}

@media screen and (max-width: 430px){
	#train{
		padding-top:30px;
	}
}

/*------------------------


	お車


------------------------*/

#park{
	width:calc(100% - 2px);
	background-color: #F9FBF2;
	border:8px solid #fff;
	box-shadow: 0px 0px 0px 1px #CCCCCC;
	padding:10px;
	border-radius: 5px;
	text-align: center;
}

#tiket{
	padding:20px 0 40px 0;
	font-size:2.3rem;
	text-align: center;
	font-weight: 600;
	line-height: 1.6;
	text-shadow:1px 1px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(255,255,255,0.9),
              -1px 1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9),
              0px 1px 0 rgba(255,255,255,0.9),  0 -1px 0 rgba(255,255,255,0.9),
              -1px 0 0 rgba(255,255,255,0.9), 1px 0 0 rgba(255,255,255,0.9);
}

#tiket .s_font{
	font-size:1.5rem!important;
}

#tiket .parking{
	display: inline-block;
	padding:2px 10px;
	background-color: #57B450;
	color:#fff;
	font-size:1.5rem;
	text-shadow:none;
	font-weight: 700;
	border-radius: 3px;
	line-height: 40px;
}

#tiket .towhour{
	text-decoration-color:rgba(248,43,126,1.00);
	text-decoration-line: underline;
	text-decoration-thickness:5px;
	 text-decoration-skip-ink: none;
	text-underline-offset:-2px;
	text-shadow:2px 2px 0 rgba(255,255,255,0.9), -2px -2px 0 rgba(255,255,255,0.9),
              -2px 2px 0 rgba(255,255,255,0.9), 2px -2px 0 rgba(255,255,255,0.9),
              0px 2px 0 rgba(255,255,255,0.9),  0 -2px 0 rgba(255,255,255,0.9),
              -2px 0 0 rgba(255,255,255,0.9), 2px 0 0 rgba(255,255,255,0.9);
}

#park img{
	width:min(100%,1000px);
	height: auto;
	vertical-align: top;
}

#car_sp{
	display: none;
}

@media screen and (max-width: 430px){
	#car_sp{
		display: block;
	}
	
	#car_pc{
		display: none;
	}
}

#car_chu{
	display: flex;
	
	justify-content: center;
	align-items: center;
	margin-top:20px;
}

#car_chu .ico{
	width:60px;
}

#car_chu .ico img{
	width:100%;
	height: auto;
	vertical-align: top;
}

#car_chu ul{
	display: inline-block;
	margin-left:20px;
}

#car_chu li{
	line-height: 1.4;
	padding-left:1em;
	text-indent: -1em;
	font-size:1rem;
}

#car_chu li .font_red{
	color:#F91C46!important;
	font-size:0.8rem;
}

/*--------------------------------------

	レスポンシブ

--------------------------------------*/
@media screen and (max-width: 720px){
	#car_chu ul{
		display: block;
		flex:1;
	}
}
@media screen and (max-width: 430px){
	
	#car{
		margin-bottom:30px;
	}
	
	#park{
		margin:0 auto;
	}
	#tiket{
		
		font-size:2rem;
		line-height: 1.2;
	}
	
	#tiket .parking{
		width:90%;
		display: block;
		margin:8px auto 0 auto;
	}
	
	#park{
		padding:10px 0;
		margin-top:30px;
	}
	
	#car_chu{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:20px;
	}
	
	#car_chu ul{
		margin-left:0;
	}
	
	#car_chu li{
		text-align: left;
	}
}