@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　access
 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* intro
-----------------------------------------------------------------*/
.intro{
	padding: 110px 0 0;
	background: #fff;
}
.intro h2{
	margin-bottom: 30px;
	text-align: center;
	font-size: 3rem;
	line-height: 1.5;
}
.intro h2+.txt{
	margin-bottom: 70px;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.5;
}
.intro .spot-list{
	display: flex;
	color: #fff;
}
.intro .spot-list li{
	position: relative;
	width: calc(100%/3);
}
.intro .spot-list li:nth-child(2){
	background: #171d67;
}
.intro .spot-list h3{
	position: absolute;
	left: 20px;
	top: 15px;
	z-index: 10;
	font-weight: normal;
	font-size: 2.93vw;
	line-height: 1.2;
	letter-spacing: .14em;
}
.intro .spot-list .time{
	position: absolute;
	right: 20px;
	bottom: 35px;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	font-size: 2vw;
	line-height: 1;
	letter-spacing: .05em;
}
.intro .spot-list .time span{
	line-height: 1.3;
}
.intro .spot-list .time strong{
	transform: translateY(8%);
	font-weight: normal;
	font-size: 230%;
}
.intro .spot-list li:nth-child(2) .time strong{
	margin-right: 10px;
	letter-spacing: -.1em;
}
.intro .spot-list .pic{
	position: relative;
	line-height: 0;
}
.intro .spot-list .pic .caption{
	position: absolute;
	right: 20px;
	bottom: 10px;
	font-size: 0.96vw;
	letter-spacing: .08em;
	line-height: 1;
}


/* access
-----------------------------------------------------------------*/
.access{
	padding:130px 0 100px;
	background-image: linear-gradient( 0deg, rgb(83,177,228) 0%, rgb(231,241,249) 100%);	
}
.train-access{
	margin-bottom: 100px;
}
.train-access .train{
	position: relative;
	margin-bottom: 25px;	
}
.train-access .train .kumatori{
	max-width: 470px;
	width: 48%;
	margin-bottom: 70px;
}
.train-access .train .kumatori .ico{
	margin-bottom: 5px;
}
.train-access .train .kumatori .ico span{
	padding: 10px 25px;
	background: #22ab87;
	font-size: 2rem;
	letter-spacing: .05em;
	line-height: 1;
	color: #fff;
}
.train-access .train .kumatori .time{
	display: flex;
	align-items: flex-end;
	margin-bottom: 20px;
	line-height: 1;
	font-size: 3rem;	
}
.train-access .train .kumatori .place{
	font-size: 156%;
}
.train-access .train .kumatori .walk{
	margin: 0 5px;
	font-size: 80%;
	writing-mode: vertical-rl;
}
.train-access .train .kumatori strong{
	font-size: 313%;
	font-weight: normal;
	line-height: .8;
	color: #c70025;
}
.train-access .train .kumatori .distance{
	font-size: 80%;
}
.train-access .train .kumatori .pic{
	position: relative;
}
.train-access .train .kumatori .pic .caption{
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 1.3rem;
	letter-spacing: .05em;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 10px #000,0 0 10px #000;
	
}
.train-access .train .other-lines .ico{
	margin-bottom: 15px;
}
.train-access .train .other-lines .ico span{
	padding: 10px 25px;
	background: #1f50a2;
	font-size: 1.6rem;
	letter-spacing: .05em;
	line-height: 1;
	color: #fff;
}
.train-access .train .other-lines ul li:nth-child(n+2){
	margin-top: 20px;
}
.train-access .train .other-lines .time{
	display: flex;
	align-items: flex-end;
	margin-bottom: 10px;
	line-height: 1;
	font-size: 1.8rem;	
}
.train-access .train .other-lines .place{
	font-size: 166%;
}
.train-access .train .other-lines strong{
	padding: 0 5px;
	font-size: 311%;
	font-weight: normal;
	line-height: .8;
	color: #c70025;
}
.train-access .train .other-lines .note{
	font-size: 1.3rem;
	line-height: 1.5;
}
.train-access .train .pic-train-map{
	position: absolute;
	right: 0;
	top: 0;
	width: 39%;
}
.train-access .note{
    font-size: 1.3rem;
    line-height: 1.5;
    margin-top: 10px;
    color: #333;
}

.timetable{
	padding: 45px 5% 50px;
	background: #fff;
}
.timetable h3{
	margin-bottom: 20px;
	font-size: 2.3rem;
	letter-spacing: .08em;
	font-weight: 500;
	text-align: center;
}
.timetable dl{
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
}
.timetable dl div{
	display: flex;
	align-items: flex-end;
	margin: 0 20px;
	line-height: 1;
}
.timetable dl dt{
	margin-right: 10px;
	padding: 5px 20px;
	background: #22ab87;
	color:#fff;
	font-size: 2rem;
}
.timetable dl dt strong{
	padding: 0 2px 0 4px;
	font-size: 200%;
	font-weight: normal;
}
.timetable dl dd{
	font-size: 2.6rem;
}
.timetable dl dd strong{
	padding-right: 5px;
	font-size: 250%;
	line-height: .8;
	letter-spacing: -.05em;
	font-weight: normal;
	color: #cc2240;
}
.timetable h4{
	margin-bottom: 10px;
	font-size: 2rem;
	letter-spacing: .08em;
	font-weight: 500;
}
.timetable table{
	width: 100%;
	border-collapse: collapse;
	line-height: 1;
}
.timetable table th,
.timetable table td{
	border: 1px solid #aaa;
	vertical-align: middle;
}
.timetable table th{
	width: 110px;
	padding: 10px;
	background: #1f50a2;
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: .08em;
	font-weight: 500;
	text-align: center;
}
.timetable table td{
	padding: 5px 20px;
}
.timetable table ul li{
	display: inline-block;
	padding: 5px 15px;
	font-size: 2.3rem;
}
.timetable table ul li small{
	padding-left: 6px;
	font-size: 50%;
}
.timetable .kaisoku{
	color: #c70025;
}
.timetable .kukan{
	color: #22AB87;
}


.other-access{
	max-width: 1080px;
	margin: 0 auto;
	background: #fff;
	border: 8px solid #1f50a2;
	box-shadow: 0px 10px 20px 0px rgba(0, 70, 184, 0.2),inset 0px 6px 30px 0px rgba(95, 125, 176, 0.45);
}
.other-access h3{
	margin-bottom: 40px;
	text-align: center;
}
.other-access h3 span{
	position: relative;
	padding-bottom: 15px;
	font-size: 3rem;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .1em;
}
.other-access h3 span::after {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    height: 3px;
    background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(98,132,190,1) 20%, rgba(98,132,190,1) 80%, rgba(255,255,255,1) 100%);
}
.other-access .layout-box{
	align-items: flex-start;
}
.other-access .txt-area{
	max-width: 470px;
	width: 52%;
    margin: auto 0;
}
.other-access .txt{
	margin-bottom: 25px;
	font-size: 2rem;
}
.other-access .distance{
	font-size: 2.6rem;
	line-height: 1;
}
.other-access .distance + .distance{
	margin-top: 30px;
}
.other-access .distance small{
	margin-bottom: -4px;
	font-size: 90%;
}
.other-access .distance .place{
	font-size: 100%;
}
.other-access .distance strong{
	display: inline-block;
	transform: translateY(5%);
	padding: 0 3px;
	font-size: 206%;
	font-weight: normal;
	color: #cc2240;
}
.other-access .pic{
	position: relative;
	max-width: 415px;
	width: 46%;
}
.other-access .pic .caption{
	position: absolute;	
	right: 10px;
	bottom: 5px;
	font-size: 1.3rem;
	letter-spacing: .05em;
    color: #fff;
}
.other-access .note{
	font-size: 1.3rem;
	line-height: 1.5;
    padding-top: 15px;
}
.other-access .car{
	padding: 70px 5% 60px;
	background: url(../img/access/bg_car.png) no-repeat left bottom #fff;
}
.other-access .plane .distance{
    font-size: 2.6rem;
    line-height: 1.1;
    margin-bottom: 10px;
}
.other-access .plane{
	padding: 70px 5% 60px;
	background: url(../img/access/bg_plane.png) no-repeat right bottom #d9f0ff;
}

.other-access .distance .plane{
	font-size: 3rem;
	line-height: 1;
}

.other-access .plane .txt_plane{
	margin-bottom: 25px;
	font-size: 2.8rem;
}

.other-access .plane .layout-box{
	flex-direction: row-reverse;
}

.other-access .bus{
	padding: 70px 5% 60px;
	background: url(../img/access/bg_bus.png) no-repeat left bottom #fff;
}
.other-access .bus .txt-lead{
	text-align: center;
	font-size: 3rem;
	line-height: 1.6;
}
.other-access .bus .txt-lead small{
	display: block;
	font-size: 66.6%;
}











/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/* intro
-----------------------------------------------------------------*/
	.intro{
		padding: 70px 0 0;
	}
	.intro h2{
		margin-bottom: 15px;
		font-size: 2.4rem;
		line-height: 1.6;
	}
	.intro h2+.txt{
		margin-bottom: 50px;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.intro .spot-list{
		display: block;
	}
	.intro .spot-list li{
		width: 100%;
	}
	.intro .spot-list li:nth-child(2){
		background: #171d67;
	}
	.intro .spot-list h3{
		left: 10px;
		top: 10px;
		font-size: 3.2rem;
		line-height: 1.4;
	}
	.intro .spot-list .time{
		right: 10px;
		bottom: 35px;
		font-size: 2.5rem;
	}
	.intro .spot-list .time span{
		line-height: 1.3;
	}
	.intro .spot-list li:nth-child(3) span{
		font-size: 2.4rem;
		letter-spacing: .005em;
	}
	.intro .spot-list .time strong{
		font-size: 230%;
	}
	.intro .spot-list li:nth-child(2) .time strong{
		margin-right: 10px;
		letter-spacing: -.1em;
	}
	.intro .spot-list .pic .caption{
		right: 10px;
		bottom: 12px;
		font-size: 1rem;
		letter-spacing: .08em;
		line-height: 1;
	}


/* access
-----------------------------------------------------------------*/
	.access{
		padding:100px 0 90px;
	}
	.access .inner{
		padding: 0 40px;
	}
	.train-access{
		margin-bottom: 90px;
	}
	.train-access .train{
		margin-bottom: 40px;	
	}
	.train-access .train .kumatori{
		max-width: none;
		width: 100%;
		margin-bottom: 40px;
	}
	.train-access .train .kumatori .ico{
		margin-bottom: 10px;
		text-align: center;
	}
	.train-access .train .kumatori .ico span{
		padding: 5px 15px;
		font-size: 1.8rem;
	}
	.train-access .train .kumatori .time{
		display: block;
		font-size: 2rem;
		text-align: center;	
	}
	.train-access .train .kumatori .place{
		font-size: 160%;
	}
	.train-access .train .kumatori .walk{
		margin: 0 3px;
		writing-mode: inherit;
	}
	.train-access .train .kumatori strong{
		display: inline-block;
		transform: translateY(5%);
		font-size: 300%;
		line-height: 1;
	}
	.train-access .train .kumatori .pic{
		position: relative;
	}
	.train-access .train .kumatori .pic .caption{
		position: absolute;
		bottom: 8px;
		font-size: 1rem;
		line-height: 1;
		
	}
	.train-access .train .other-lines .ico{
		margin-bottom: 15px;
		text-align: center;
	}
	.train-access .train .other-lines .ico span{
		padding: 5px 15px;
		font-size: 1.8rem;
	}
	.train-access .train .other-lines .time{
		margin-bottom: 10px;
		font-size: 1.4rem;	
	}
	.train-access .train .other-lines .place{
		font-size: 180%;
	}
	.train-access .train .other-lines strong{
		font-size: 311%;
		line-height: .8;
	}
	.train-access .train .other-lines .direct{
		margin-left: 8px;
	}
	.train-access .train .other-lines .note{

		font-size: 1.2rem;
		line-height: 1.5;
	}
	.train-access .train .other-lines .note span{
		display: block;
		text-indent: -1em;
		padding-left: 1em;
	}
	.train-access .train .pic-train-map{
		margin-top: 40px;
		position: static;
		width: 100%;
	}
	.train-access .note{
        font-size: 1.2rem;
        line-height: 1.5;
	}
	.timetable{
		padding: 40px 20px 40px;
		background: #fff;
	}
	.timetable h3{
		font-size: 2rem;
	}
	.timetable dl{
		justify-content: space-between;
		margin-bottom: 25px;
	}
	.timetable dl div{
		display: block;
		width: 48%;
		margin: 0;
		text-align: center;
	}
	.timetable dl dt{
		margin: 0 0 10px;
		padding: 5px 10px;
		font-size: 1.6rem;
	}
	.timetable dl dd{
		font-size: 2rem;
	}
	.timetable h4{
		font-size: 1.6rem;
		text-align: center;
	}
	.timetable table th{
		width: auto;
		padding: 10px 5px;
		font-size: 1.4rem;
		line-height: 1.6;
		white-space: nowrap;
	}
	.timetable table td{
		padding: 5px;
	}
	.timetable table ul li{
		padding: 5px 10px;
		font-size: 1.8rem;
	}
	
	.other-access{
		margin: 0 20px;
		border: 4px solid #1f50a2;
	}
	.other-access h3{
		margin-bottom: 40px;
		text-align: center;
	}
	.other-access h3 span{
		font-size: 2.4rem;
	}
	.other-access .layout-box{
		display: block;
	}
	.other-access .txt-area{
		max-width: none;
		width: 100%;
	}
	.other-access .txt{
		margin-bottom: 20px;
		font-size: 1.6rem;
	}
	.other-access .distance{
		font-size: 2rem;
	}
	.other-access .distance + .distance{
		margin-top: 20px;
	}
	.other-access .distance small{
		margin-bottom: 0;
		font-size: 90%;
	}
	.other-access .pic{
		max-width: none;
		width: 100%;
		margin-bottom: 20px;
	}
	.other-access .pic .caption{
		font-size: 1rem;
	}
	.other-access .car{
		padding: 60px 20px;
		background-size: auto 80px;
	}
	.other-access .plane{
		padding: 60px 20px;
		background-size: auto 75px;
	}
    
    .other-access .plane .txt_plane{
	margin-bottom: 25px;
	font-size: 2.2rem;
}
    .other-access .plane .distance{
    font-size: 2rem;
    line-height: 1.1;
}
	.other-access .bus{
		padding: 60px 20px;
		background-size: auto 90px;
	}
	.other-access .bus .txt-lead{
		font-size: 2.6rem;
	}




}