@charset "UTF-8";

/*---------------------------------------------------------
							reset
---------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Noto Sans JP', sans-serif;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	position:relative;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

a.anchor {
	position: relative;
	top: -80px;
	display: block;
}
img {
	width:100%;
	vertical-align: bottom;
}

/*---------------------------------------------------------
							clearfix
---------------------------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

.clea {
	clear: both;
}

* html .clearfix {
	height: 1px;
	/*$00A5*/
	/*/
	height: auto;
	overflow: hidden;
	/**/
}

body {
	-webkit-text-size-adjust: none;
	font-size: 16px;
	color: #07505f;
	line-height: 1.5;
}

a {
	color: #07505f;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

.sp {
	display: none;
}


/*---------------------------------------------------------
header
---------------------------------------------------------*/
header{
	padding:25px 0 10px;
}
header .logos{
	display:flex;
	justify-content:center;
	margin:auto;
}
header .logos a{
	margin:0 25px;
}
header .logos .city{
	width: 11.7%;
}
header .logos .myroute{
				width: 16.65%;
}
header .badge{
	position:absolute;
	top:0;
	right:3.45%;
	max-width:250px;
	width:13%;
}
/*---------------------------------------------------------
main
---------------------------------------------------------*/
#main {
	width:100%;
}

#main .main_top{
	max-width: 1200px;
	width:100%;
	margin: auto;
	padding-top: 65px;
	text-align:center;
}
#main .main_top img{
	width:100%;
}
/*---------------------------------------------------------
price
---------------------------------------------------------*/
#price{
	background:#e3f1f4;
	padding:50px 0;
}
#price figure{
	width:90%;
	margin:auto;
}
/*---------------------------------------------------------
map
---------------------------------------------------------*/
#map{
	background:#fff;
	padding:150px 0;
}
#map figure{
	width:95%;
	margin:auto;
}
/*---------------------------------------------------------
ticket
---------------------------------------------------------*/
#ticket{
	background:#fff;
	padding:0 0 55px;
}
#ticket figure{
	width:93.75%;
	margin-left:auto;
}
/*---------------------------------------------------------
present
---------------------------------------------------------*/
#present{
	background:#fff;
	padding:0 0 55px;
}
#present h2{
	width:52%;
	margin:0 auto 30px;
}
#present figure{
	width:95%;
	margin:auto;
	position:relative;
}
#present figure figcaption{
	position:absolute;
	top:0;
	right:-0;
	width:14%;
}
#present .flag{
display: block;
	width:55%;
	margin:0 auto 110px;
}
a.present{
	position:fixed;
	right:1%;
	top:40%;
	max-width:191px;
	width:10%;
}
/*---------------------------------------------------------
							footer
---------------------------------------------------------*/
footer {
	width: 100%;
	margin: auto;
	text-align: center;
	padding:0 0 200px;
}
footer img{
	width:77.5%;
}
/*---------------------------------------------------------
ft_bar
---------------------------------------------------------*/
.ft_bar{
	display:flex;
	align-items:center;
	justify-content: center;
	background:#e3f0f3;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:40px 0;
}
.ft_bar .btns{
	display:flex;
	align-items:center;
	width:39%;
	margin-left:4%;
}
.ft_bar .btns a img{
	width:100%;
	max-width:350px;
}
.ft_bar .btns a:first-child{
	margin-right:6%;
}
/*---------------------------------------------------------
					Smart Phone
---------------------------------------------------------*/


/*Media Queries*/

@media screen and (max-width: 767px) {
	body, html {
		min-width: 100%;
	}
	body {
		font-size: 12px;
	}
	img {
		max-width: 100%;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	header {
			padding: 10px 0;
	}
	header .logos {
			justify-content: flex-start;
		}
	header .logos .city {
				width: 30%;
	}
	header .logos .myroute {
			width: 34%;
	}
	header .logos a {
			margin: 0px 10px;
	}
	header .badge {
				right: 3.45%;
				width: 20%;
	}
	#price {
				padding: 20px 0;
	}
	#map {
		padding: 20px 0;
	}
	#ticket {
		padding: 0 0 20px;
	}
	#present {
		padding: 0;
	}
	#present h2 {
		width: 70%;
		margin: 0 auto 10px;
	}
	#present .flag {
		display: block;
		width: 80%;
		margin: 0 auto 30px;
	}
	.ft_bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #e3f0f3;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px 0;
	}
	footer img{
		margin:auto;
	}
	.ft_bar .btns {
		width: 100%;
		margin:20px auto 0;
		justify-content: center;
	}
	.ft_bar .btns a{
		width:40%;
		margin:0 10px;
	}
	.ft_bar .btns a:first-child {
		margin-right: 10px;
	}
	.ft_bar .btns a img {
		width: 100%
	}
	a.present {
			position: fixed;
			top:unset;
			right: 1%;
			bottom: 20%;
			max-width: 191px;
			width: 20%;
			z-index: 10;
	}
}