@charset "UTF-8";
/* CSS Document */

body { -webkit-text-size-adjust: 100%; }
a.blank:after { content: url(../img/common/blank_icon.gif); }
#breadClumb { margin-bottom: 1px; }
@media only screen and (max-width: 640px){
	#breadClumb { display: none; }
}



#pwyt { width: 100%; background: url(../img/common/base_bg.jpg) repeat-y; background-size: 100% auto; }
#wrap { width: 100%; max-width: 930px; margin: 0 auto; padding-bottom: 40px; }
#banner360 { width: 100%; height: auto; padding-top: 15px; }
#banner360 a:hover { opacity: .8; }
#banner360 img { width: 100%; height: auto; }

.column { width: 94%; max-width: 930px; margin: 40px auto 0 auto; padding: 0 3%; border-radius: 10px; background: rgba(255,255,255,0.8); box-shadow: 0 0 0 3px #730 inset; position: relative; }
.column h2 { padding: 1% 0 1% 0; }
.column h2 strong { position: absolute; top: 10px; right: 2%; }
.column  .read p { font-size: 123%; line-height: 1.8; color: #730; }
@media only screen and (max-width: 1024px){
	#wrap { width: 96%; margin: 0 2%; padding-bottom: 20px; }
	.column { margin-top: 20px; }
}
@media only screen and (max-width: 640px){
	.column h2 { padding-top: 2%; }
	.column h2, .column h2 img { width: 100%; height: auto; }
	.column h2 strong { position: static; }
	.column h2 strong img { width: 70%; height: auto; }
	.column  .read p { font-size: 100%; line-height: 1.8; color: #730; }
}


#footbox { width: 100%; background: url(../img/common/base_bg.jpg) repeat-y; background-size: 100% auto; }
#footbox p#copyright { font-size: 75%; line-height: 1.2; text-align: center; padding-bottom: 2em;}
#gmenu { background: url(../img/common/gmenu_bg.jpg); box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); }
#gmenu ul { width: 100%; max-width: 930px; height: auto; margin: 0 auto; padding: 15px 0; zoom: 1; overflow: hidden; }
#gmenu ul:after { content: ""; clear: both; display: block; }
#gmenu ul > li { width: 24%; height: auto; margin-right: 1%; float: left; }
#gmenu ul > li:nth-child(4n) { margin-right: 0; }
#gmenu ul li img { width: 100%; height: auto; }
#gmenu ul li a { border-radius: 10px; background: #FE0; box-shadow: 0 0 0 3px #FFF inset; display: block; }
#gmenu ul li a:hover { background: rgba(255,255,255,0.7); }
@media only screen and (max-width: 1024px){
	#gmenu ul { width: 96%; margin: 0 2%; padding: 8px 0; }
}
@media only screen and (max-width: 640px){
	#gmenu ul { padding: 2% 0 0 0; }
	#gmenu ul > li { width: 49%; height: auto; margin-right: 2%; padding-bottom: 2%; float: left; }
	#gmenu ul > li:nth-child(2n) { margin-right: 0; }
	#gmenu ul li a { padding: 10px 0; }
	#footbox { padding-bottom: 30px; }
	#footbox p#copyright { font-size: 75%; line-height: 1.2; text-align: left; width: 96%; padding: 0 2% 2em 2%;}
}

#returnbtn { width: 90px; height: auto; position: fixed; bottom: 10px; right: 10px; z-index: 10000; }
#returnbtn img { width: 100%; height: auto; }
/* #returnbtn a:hover { opacity: .8; } */


/* Index */
#keyvisual { width: 100%; background: url(../img/index/sky.jpg?20181204) no-repeat; background-size: cover; background-position: center top; }
#kvbox { width: 100%;  max-width: 930px; height: auto; margin: 0 auto; position: relative; zoom: 1; overflow: hidden; }
#kvbox:after { content: ""; clear: both; display: block; }
#keyvisual #kvbox h1 { position: absolute; }
#keyvisual #kvbox h1 { width: 96%; max-width: 680px; height: auto; padding: 0 2%; top: 3%; }
#keyvisual #kvbox h1 img { width: 100%; height: auto; }
#keyvisual #kvbox #pikachu { position: absolute; bottom: 0; }
@media only screen and (max-width: 1024px){
	#keyvisual #kvbox #pikachubox { padding-top: 2%; }
}
@media only screen and (max-width: 640px){
	#keyvisual #kvbox #pikachubox { padding-top: 3%; }
}
#kvbox #pikachubox, #kvbox #pikachu, #kvbox #pikachubox img, #kvbox #pikachu img { width: 100%; height: auto; }

#renewal { background: url(../img/index/renewal_bg.png); box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); }
#renewal dl { width: 96%; max-width: 930px; margin: 0 auto; padding: 0 2%; position: relative; }
#renewal dl dt { width: 23%; max-width: 220px; height: auto; position: absolute; top: -55%; }
#renewal dl dt img { width: 100%; height: auto; }
#renewal dl dd, #renewal dl dd img { width: 100%; height: auto; }

#news { width: 94%; margin-top: 30px; padding: 0 3%; border-radius: 10px; background: -moz-linear-gradient(top, rgba(30,107,60,0.5) 0%, rgba(255,255,255,0.5) 100%); background: -webkit-linear-gradient(top, rgba(30,107,60,0.5) 0%,rgba(255,255,255,0.5) 100%); background: linear-gradient(to bottom, rgba(30,107,60,0.5) 0%,rgba(255,255,255,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#801e6b3c', endColorstr='#80ffffff',GradientType=0 ); box-shadow: 0 0 0 3px #FFF inset; }
#news h2 { padding-top: 1.5%; }
#news ul { padding-bottom: .6em; }
#news ul li { font-size: 105%; line-height: 1.3; padding: .6em 0 .5em 9em; border-bottom: dotted 1px #730; position: relative; }
#news ul li:last-child { border-bottom: none; }
#news ul li strong { font-weight: normal; color: #E01; position: absolute; left: 0; }
#news ul li a.pdf:after { content: url(../img/common/pdf_icon.png); }
#news ul li span.splink { display: none; }
@media only screen and (max-width: 1024px){
	#news { margin-top: 20px; }
}
@media only screen and (max-width: 750px){
	#news ul li span.pclink { display: none; }
	#news ul li span.splink { display: block; }
}
@media only screen and (max-width: 640px){
	#news h2 { padding-top: 3%; }
	#news h2, #news h2 img { width: 100%; height: auto; }
	#news ul li { font-size: 100%; padding: .6em 0 .5em 0; }
	#news ul li strong { display: block; position: static; }
}

#design { position: relative; }
#design .read { margin-bottom: 30px; padding-right: 30%; }
#design ul#snap li { width: 200px; height: auto; padding: 5px; background: #FFF; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4); position: absolute; -webkit-perspective: 500px; perspective: 500px; }
#design ul#snap li#snap1 { top: -10px; right: 50px; transform: rotate(15deg); z-index: 10; }
#design ul#snap li#snap2 { top: 105px; right: 20px; transform: rotate(-10deg); z-index: 5; }
#design ul#snap li img { width: 100%; height: auto; }
@media only screen and (max-width: 1024px){
	#design .read { padding-right: 35%; }
	#design ul#snap li#snap1 { top: 60px; right: 40px; transform: rotate(-15deg); z-index: 10; }
	#design ul#snap li#snap2 { top: 180px; right: 0px; transform: rotate(10deg); z-index: 5; }
}
@media only screen and (max-width: 640px){
	#design .read { margin-bottom: 10px; padding-right: 0; position: relative; }
	#design ul#snap { padding: 0 0 15px 0; zoom: 1; overflow: hidden; }
	#design ul#snap:after { content: ""; clear: both; display: block; }
	#design ul#snap li { width: 49%; height: auto; margin-right: 2%; padding: 0; box-shadow: none; position: static; float: left; }
	#design ul#snap li:last-child { margin-right: 0; }
	#design ul#snap li#snap1, #design ul#snap li#snap2 { transform: rotate(0); }
}
#train { max-width: 860px; margin: 0 auto; padding-bottom: 20px; position: relative; }
#train ul { position: absolute; top: 0; }
#train ul li { width: 46%; height: auto; margin: 0 2%; float: left; }
#train ul li#balloon1 { background: url(../img/index/balloon1_bg.png) no-repeat; background-size: 100% auto; }
#train ul li#balloon2 { background: url(../img/index/balloon2_bg.png) no-repeat; background-size: 100% auto; }
#train ul li a:hover { opacity: 0; }
#train ul li img { width: 100%; height: auto; }
#train div#trainimg { width: 100%; height: auto; position: relative; }
#train div#trainimg div a { width: 30%; height: auto; position: absolute; left: -5%; bottom: 0; }
#train div#trainimg div a:hover { transform: rotate(-5deg); }
#train div img { width: 100%; height: auto; }

#pwy { padding: 1em 0 2em 0; border-bottom: solid 1px #999; background: url(../img/index/pwy_bg.jpg) repeat-x; }
#pwy dl { width: 550px; margin: 0 auto; }
#pwy dl dt { text-align: center; }
#pwy dl dd p { font-size: 90%; line-height: 1.3; padding: 1em 0; }
#pwy dl dd div a { font-size: 115%; line-height: 1.2; text-align: center; text-decoration: none; color: #333; width: 14em; margin: 0 auto; padding: .6em 0 .4em 0; border: solid 2px #666; border-radius: 1.2em; display: block; }
#pwy dl dd div a:hover { background: #FF9; }
#pwy dl dd div a strong { font-weight: normal; }
#pwy dl dd div a strong:after { content: url(../img/common/blank_icon_gray.gif); }
@media only screen and (max-width: 640px){
	#pwy dl { width: 96%; margin: 0 2%; }
}

#pdfdl { text-align: center; padding: 1em 0; background: #FFF; }
#pdfdl dt { padding-bottom: 5px; }
#pdfdl dd { font-size: 85%; line-height: 1.4; }


/* Contents Common */

#pagehead { width: 100%; height: auto; background: url(../img/index/sky.jpg?20181204) no-repeat; background-size: cover; background-position: center top; }
#pagehead #kvbox h1 { width: 96%; max-width: 520px; height: auto; margin-top: 10px; padding: 0 2%; position: absolute; top: 2%; z-index: 100; }
#pagehead #kvbox h1 img { width: 100%; height: auto; }
#pagehead #kvbox #pikachubox { width: 100%; max-width: 520px; height: auto; }
#pagehead #kvbox #pikachu { width: 100%; max-width: 520px; position: absolute; right: 0; bottom: 0; z-index: 100; }
#pagehead #kvbox #pikachubox img, #pagehead #kvbox #pikachu img { width: 100%; height: auto; }
@media only screen and (max-width: 1024px){
	#pagehead #kvbox h1 { margin-top: 0; }
	#pagehead #kvbox #pikachubox { padding-top: 6%; }
}
@media only screen and (max-width: 640px){
	#pagehead #kvbox #pikachubox { padding-top: 12%; }
}

#pagetitle { background: url(../img/index/renewal_bg.png); box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); }
#pagetitle h2 { width: 96%; max-width: 930px; height: auto; margin: 0 auto; padding: 0 2%; }
#pagetitle h2 img { width: 100%; height: auto; }


/* Overview */
#train1 .snap { width: 200px; height: auto; padding: 5px; background: #FFF; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4); position: absolute; top: -5px; right: 30px; transform: rotate(15deg); z-index: 10; }
#train2 .snap { width: 200px; height: auto; padding: 5px; background: #FFF; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4); position: absolute; top: -5px; right: 30px; transform: rotate(-10deg); z-index: 10; }
#train1 .snap img, #train2 .snap img { width: 100%; height: auto; }

ul.trainbtn { width: 100%; max-width: 840px; margin: 10px auto 20px auto; zoom: 1; overflow: hidden; }
ul.trainbtn:after { content: ""; clear: both; display: block; }
ul.trainbtn li { width: 50%; height: auto; float: left; }
ul.trainbtn li img { width: 100%; height: auto; }
ul.trainbtn li#trainbtn1 { background: url(../img/overview/train1_over.png) no-repeat 0 0; background-size: 100% auto; }
ul.trainbtn li#trainbtn2 { background: url(../img/overview/train2_over.png) no-repeat 0 0; background-size: 100% auto; }
ul.trainbtn li a:hover img { opacity: 0; }

.vehicle dl { width: 100%; max-width: 840px; margin: 0 auto; }
.vehicle dl dt img, .vehicle dl dd img { width: 100%; height: auto; }
.vehicle dl dd { padding: 30px 0; }
.vehicle dl dt { position: relative; }
.vehicle dl dt div a { width: 20%; height: auto; position: absolute; left: -8%; top: 155%; z-index: 100; }
.vehicle dl dt div a:hover { transform: rotate(-5deg); }
.vehicle dl dt div img { width: 100%; height: auto; }

@media only screen and (max-width: 1024px){
	#train1 .snap, #train2 .snap { width: 120px; top: 0; right: 10px; }
	.vehicle dl dt div a { left: -5%; }
}
@media only screen and (max-width: 640px){
	#train1 .snap, #train2 .snap { width: 100%; height: auto; margin: 0; padding: 0; box-shadow: none; transform: rotate(0deg); position: static; }
	ul.trainbtn { margin: 10px auto; }
	.vehicle dl dd { padding: 10px 0; }
	.vehicle dl dt div a { width: 35%; height: auto; left: 70%; top: -360%; }
}


/* Time Table */
#station ul { width: 100%; margin-left: .25%; padding-bottom: 20px; zoom: 1; overflow: hidden; }
#station ul:after { content: ""; clear: both; display: block; }
#station ul li { width: 13%; padding-right: 1.5%; background: url(../img/timetable/rail_horizon.gif) repeat-x 0 50%; float: left; }
#station ul li:last-child { padding-right: 0; }
#station ul li strong { text-align: center; padding: 10px 0; border-radius: 10px; border: solid 2px #730; background: #FFF; display: block; }
#station ul li img { width: 100%; max-width: 100px; height: auto; }
@media only screen and (max-width: 640px){
	#station ul li { width: 100%; padding-bottom: 2.5%; background: url(../img/timetable/rail_vertical.gif) repeat-y 50% 0; float: none; }
	#station ul li strong { padding: 5px 0; }
	#station ul li:last-child { padding-bottom: 0; }
}

#day ul {  }
#day ul li { font-size: 115%; line-height: 1.3; color: #730; min-height: 55px; padding: 6px 0 5px 100px; border-bottom: dotted 1px #730; position: relative; }
#day ul li:first-child { padding-top: 0; }
#day ul li strong { position: absolute; left: 0; }
#day ul li span { height: 55px; display: table-cell; vertical-align: middle; }
#day p { text-indent: -1em; color: #C00; padding: .8em 0 1em 1em; }
@media only screen and (max-width: 640px){
	#day ul li { font-size: 100%; }
}

#timetable div { padding-bottom: 20px; }
#timetable div p { font-size: 123%; line-height: 1.2; font-weight: bold; color: #333; margin-left: .5em; padding: .5em 0; }
#timetable ul { width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#timetable ul li { width: 12%; margin-left: 1%; background: #FFF; box-shadow: 0 0 0 1px #730; position: relative; }
#timetable ul li strong { text-align: center; color: #FFF; margin: 1px; padding: .3em 0 .2em 0; background: #730; display: block; }
#timetable ul li:first-child { text-align: center; color: #FFF; width: 8%; background: #730; }
#timetable ul li:first-child strong { margin-top: 38%; }
#timetable ul li ul { width: 90%; margin: 0 auto; padding: 0; }
#timetable ul li ul li { text-align: center; color: #730; width: 100%; margin: 0; padding: .3em 0 .1em 0; box-shadow: none; display: block; }
#timetable ul li ul li:first-child { color: #730; width: 100%; border-bottom: dotted 1px #730; background: none; }
#timetable ul li ul.railhead li { padding-top: 1.2em; border-bottom: none; }

@media only screen and (max-width: 640px){
	#timetable ul {  }
	#timetable ul li { width: 100%; margin-left: 0; padding: .3em 0 .2em 7em; border-bottom: dotted 1px #730; background: none; box-shadow: none; flex-direction: column; }
	#timetable ul li strong { color: #730; padding: 0; background: none; position: absolute; left: 0; top: .5em; }
	#timetable ul li:first-child { width: 100%; padding: .3em 0 0 0; }
	#timetable ul li:first-child strong { color: #FFF; margin-top: 0; position: static; display: block; }
	#timetable ul li:last-child { border-bottom: none; }
	#timetable ul li ul { width: 100%; }
	#timetable ul li ul li { text-align: left; width: auto; padding: .3em 0 .2em 0; border-bottom: none; display: inline; float: left; }
	#timetable ul li ul li:first-child { text-align: left; width: auto; padding-right: 2em; border-bottom: none; }
	#timetable ul li ul.railhead li { padding-top: .3em; }

}

#price { padding-bottom: 20px; }
#price p { font-size: 115%; line-height: 1.3; color: #730; padding-bottom: .8em; }
#price p.attention { font-weight: normal; text-indent: -1em; color: #C00; padding: 0 0 0 1em; }
#price p strong a { display: none; }

@media only screen and (max-width: 640px){
	#price p strong a { text-align: center; font-weight: normal; text-decoration: none; color: #333; margin-top: .3em; padding: 1em 0 .8em 0; border: solid 1px #730; border-radius: 2em; background: #FFF; display: block; }
}



/* Event */
#gift { padding-bottom: 25px; }

#present { margin-bottom: 10px; zoom: 1; overflow: hidden; }
#present:after { content: ""; clear: both; display: block; }
#present li { float: left; }
#present1 { width: 63%; padding-right: 1%; }
#present2, #present3 { width: 36%; }
#present1 { width: 55%; }
#present3 { width: 45%; padding-top: 5em; }
#present li img { width: 100%; height: auto; }

#present2019 { margin-bottom: 10px; zoom: 1; overflow: hidden; }
#present2019 img { width: 100%; height: auto; }

#stamp { padding: 10px 0 20px 0; background: url(../img/event/stamp_bg.gif); position: relative; }
#stamp h3 { font-size: 115%; line-height: 1.5; font-weight: normal; color: #FFF; margin-bottom: 20px; padding: 1em 2% .8em 30%; background: #480; }
#stampseat { width: 22%; height: auto; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4); position: absolute; left: 30px; top: -5px; transform: rotate(5deg); z-index: 100; }
#stampseat img { width: 100%; height: auto; }
#stampbox { padding: 0 2% 0 30%; }
#stampbox ul { zoom: 1; overflow: hidden; }
#stampbox ul:after { content: ""; clear: both; display: block; }
#stampbox ul li { width: 18%; height: auto; margin: 0 1%; float: left; }
#stampbox ul li img { width: 100%; height: auto; }
#stampbox ul li:last-child { margin-right: 0; }
#stampbox p { font-size: 105%; line-height: 1.3; text-align: center; margin-top: 10px; padding: .7em 0 .4em 0; border-radius: 1.2em; background: #FFF; }

@media only screen and (max-width: 640px){
	#present1 { width: 100%; height: auto; }
	#present3 { width: 100%; height: auto; padding-top: 0; }
	/*
	#present2, #present3 { width: 50%; height: auto; }
	*/
	#present li img { width: 100%; height: auto; }
	#stamp { padding: 10px 0; }
	#stamp h3 { font-size: 105%; line-height: 1.3; margin-bottom: 10px; padding: .4em .4em .2em .4em; }
	#stampseat { width: 60%; height: auto; margin: 0 auto; position: static; transform: rotate(0); }
	#stampbox { padding: 0 10px; }
	#stampbox ul { padding-top: 10px; }
	#stampbox ul > li { width: 18%; height: auto; margin: 0 1%; }
	#stampbox ul > li img { width: 100%; height: auto; }
	#stampbox ul > li:nth-child(5n) { margin: 0; }
	#stampbox p span:before { content: "\A" ; white-space: pre; }
}

#photos p { font-size: 123%; line-height: 1.8; color: #730; padding-bottom: .6em; }
#photos p span:before { content: "\A" ; white-space: pre; }
#photos p img { width: 1.3em; height: 1.3em; margin: -.3em .2em 0 0; }
#photos { margin-bottom: 1em; zoom: 1; overflow: hidden; }
#photos:after { content: ""; clear: both; display: block; }
#photos dl { width: 23%; height: auto; margin-bottom: 2%; padding: 0 1%; position: relative; float: left; }
#photos dl dt, #photos dl dt img, #photos dl dd ul, #photos dl dd ul li, #photos dl dd ul li img { width: 100%; height: auto; }
#photos dl dt { position: absolute; left: 0; top: 2%; transform: rotate(-5deg); z-index: 100; }
#photos dl dd { margin-top: 18%; padding: 2%; background: #FFF; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4); position: relative; }
#photos dl dd ul li span { font-size: 100%; line-height: 1.2; font-weight: bold; color: #730; padding: .5em .5em .4em 2.6em; border-radius: 3px 0 0 0; background: url(../img/event/loupe.gif) no-repeat 0 -.2em; background-size: 60px 30px; position: absolute; right: 0; bottom: 0; }
#photos dl dd ul li a:hover img { opacity: .8; }
#photos dl dd ul li:nth-of-type(n+2) { font-size: 1%; width: 1px; height: 1px; position: absolute; opacity: 0; }
#photos dl#phpika dd { margin: 0; padding: 0; background: none; box-shadow: none; }
#photos dl#phpika dd img { width: 100%; height: auto; }
@media only screen and (max-width: 640px){
	#photos p span:before { content: ""; }
	#photos dl { width: 48%; height: auto; margin-bottom: 2%; padding: 0 1%; position: relative; float: left; }
}

#kesennuma { position: relative;}
#kesennuma .read p span:before { content: "\A" ; white-space: pre; }
#kesennuma .read div#flyer { width: 20%; height: auto; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4); transform: rotate(5deg); position: absolute; right: 3%; bottom: -3%; }
#kesennuma .read div#flyer img { width: 100%; height: auto; }
@media only screen and (max-width: 1024px){
	#kesennuma .read div#flyer { right: 0; bottom: -5%; }
}
@media only screen and (max-width: 640px){
	#kesennuma .read p span:before { content: "" ; }
	#kesennuma .read div#flyer { width: 27%; height: auto; right: 1%; bottom: -2%; }
}

#kesennuma dl { padding: 15px 2px 30px 2px; zoom: 1; overflow: hidden; }
#kesennuma dl:after { content: ""; clear: both; display: block; }
#kesennuma dl dt { width: 48%; height: auto; margin-right: 4%; box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.3); float: left; }
#kesennuma dl dt img { width: 100%; height: auto; }
#kesennuma dl dd { width: 48%; height: auto; float: left; position: relative; }
#kesennuma dl dd h3 { font-size: 123%; line-height: 1.2; text-align: center; color: #FFF; padding: .5em 0; background: #F60; border-radius: 1.1em; }
#kesennuma dl dd ul { padding: .3em 0 0 .5em; }
#kesennuma dl dd ul li { font-size: 123%; line-height: 1.3; color: #730; margin-top: .6em; padding-left: 1.5em; background: url(../img/event/ball.png) no-repeat 0 0; background-size: 1.2em 1.2em; }
#kesennuma dl dd ul li a:after { content: url(../img/common/blank_icon.gif); }
@media only screen and (max-width: 640px){
	#kesennuma dl { padding: 10px 2px 15px 2px; }
	#kesennuma dl dt { width: 100%; margin: 0 0 15px 0; float: none; }
	#kesennuma dl dd { width: 100%; float: none; }
	#kesennuma dl dd ul { padding: .4em 0 0 0; }
	#kesennuma dl dd ul li { font-size: 105%; margin-top: .2em; padding-left: 1.3em; background-size: 1.1em 1.1em; }
}


/* Gallery */
#gallery { width: 100%; max-width: 930px; margin: 40px auto 0 auto; }
#gallery ul { display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; flex-wrap: wrap; zoom: 1; overflow: hidden; }
#gallery ul:after { content: ""; clear: both; display: block; }
#gallery ul > li { width: 23%; margin: 1%; display: block; float: left; }
#gallery ul li img { width: 94%; height: auto; padding: 3%; background: #FFF; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4); }
#gallery ul li a:hover img { opacity: .8; }
@media only screen and (max-width: 640px){
	#gallery { margin: 10px auto 0 auto; }
	#gallery ul > li { width: 48%; }
}


/* Trainview */
#viewclose { position: fixed; right: 0; top: 10px; z-index: 1000; }
#viewclose a { width: 3.4em; height: 3.4em; border-top: solid 1px #630; border-left: solid 1px #630; border-bottom: solid 1px #630; border-radius: 10px 0 0 10px; background: #FE0; display: block; }
#viewclose a:hover { background: #FF9; }
#viewclose strong { font-size: 70%; color: #630; margin-left: -1.3em; position: absolute; left: 50%; bottom: .2em; }
#viewclose strong:before, #viewclose strong:after { width: 100%; height: 4px; background-color: #630; border-radius: 50%; }
#viewclose strong:before, #viewclose strong:after { position: absolute; top: -18px; left: 0; content: ' '; }
#viewclose strong:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#viewclose strong:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }