/* -------------------------------------
GANREF
Copyright (c) 2016 Impress Corporation. All rights reserved.
------------------------------------- */

@import "/css/application_sp.css";
@import "/css/jquery.fileupload.css";
@import "/common/css/resp_sp.css";


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {
	line-height: 1.4;
	-webkit-text-size-adjust: 110%;
}
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;
}

b, strong {font-weight:bold;}


/***********************************************************************/

.respBreadcrumbs .breadcrumbs ol li:first-child {
	margin-left: 6em;
}


#mainCntInner{margin:1rem}


.sns {
	display:none;
}


#spot h1 {
	text-align:center;
	font-size: 1.3rem;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 2px dotted #ffbf4d;
	margin: 1em 0;
	line-height: 1;
}


#spot h1 span {
	display: block;
	font-size:1rem;
	width:15rem;
	height:1.6rem;
	line-height:1.6rem;
	margin:0 auto 4px;
	color:#fff;
	border-radius: 6px;
	position:relative;
	font-weight: normal;
	background:#FC0;
}

#spot .titleArea {
	position: relative;
    width: 100%;
	margin-bottom: 1rem;-bottom: 1rem;
}

#spot .titleArea:before {
    content:"";
    display: block;
    padding-top: 20%;
}

#spot .titleArea h1 {
	text-indent: 100%;
	font-size: 0px;
	white-space: nowrap;
	overflow: hidden;
	background: url(img/title.jpg) no-repeat center bottom;
	background-size:contain;
	margin: 0;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	border-bottom: none;
}



#spot .sakura .titleArea h1 {
	text-indent: 100%;
	font-size: 0px;
	white-space: nowrap;
	overflow: hidden;
	background: url(target/sakura/img/title.jpg) no-repeat center bottom;
	background-size:contain;
	margin: 0;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	border-bottom: none;
}


#spot .titleArea span {
	display: none;
}

.areaList  {
	margin: 0.5rem 0;
	padding-top: 0.5rem;
	border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
}

.areaList h3  {
	display: block;
	font-size:1rem;
	font-weight:bold;
	color:#555;
	line-height:1.2rem;
	margin-bottom: 0.5rem;
}


.areaList ul {
	margin-bottom: 1em;
	letter-spacing: -.40em;
}

.areaList li {
	display: inline-block;
	letter-spacing: normal;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

#spot .areaList ul li a {
	display: inline-block;
	border-radius: 6px;
	line-height: 2rem;
	font-size: 1rem;
	padding: 0 0.5rem;
	background: #eaf2ff;
	color: #002f86;
	vertical-align: middle;
	text-decoration: none;
}

#spot .areaList ul li span {
	display: inline-block;
	border-radius: 6px;
	line-height: 2rem;
	font-size: 1rem;
	padding: 0 0.5rem;
	background: #eee;
	color: #333;
	vertical-align: middle;
	text-decoration: none;
}

.areaList li:last-child:after {
	content: none;
}

.areaList li span {
	font-weight: bold;
}

.areaList .photo{
    display: block;
	margin-bottom: 1em;
}

#spot ul.spotList {
	margin-bottom:1em;
	letter-spacing: -.40em;
	width: 100%;
}

#spot ul.spotList li {
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	text-align:center;
	font-size: 0.9rem;
}

#spot ul.spotList li a div {
	margin-bottom:5px;
}

#spot ul.spotList li a div img {
	border:1px solid #0074d9;
}

@media screen and (max-width: 375px) {
	#spot ul.spotList li {
		margin:0 1% 8px;
		width: 31%;
	}
}

@media screen and (min-width: 376px) {
	#spot ul.spotList li {
		margin:0 1% 8px;
		width: 22%;
	}
}

@media screen and (min-width: 768px) {
	#spot ul.spotList li {
		margin:0 1% 8px;
		width: 18%;
	}
}


#spot .accList h2,
#spot .jpnMap h2,
#spot .clm02 h2 {
	border-left:5px solid #09f;
	letter-spacing:normal;
	margin-bottom:0.5em;
	font-size:1.3em;
	padding:0 10px;
	color:#000;
}

#spot .clm01 {
	background:#fff1dc;
	padding:15px;
	margin-bottom:1em;
	border-radius: 8px;
}


#spot .clm02 {
	background:#eaf2ff;
	padding:15px;
	border-radius: 8px;
	position:relative;
	margin-bottom:15px;
}

#spot .clm02#area { letter-spacing: -.40em; }
#spot .clm02#area * { letter-spacing: normal; }

#spot .clm02 dl {
	display:block;
	vertical-align:top;
	margin-bottom:1em;
	font-size:1.1em;
}

#spot .clm02 dl dt{
	color:#333;
	font-size: 1rem;
	margin-bottom:10px;
}

#spot .clm02 dl dd{
	display:inline-block;
 }

#spot .clm02 dl dd a {
	display:inline-block;
	padding:0 10px;
	line-height: 1.8rem;
	margin:0 2px 6px 0;
	background:#fff;
	border-radius: 6px;
	box-shadow: 2px 2px 0 0 rgba(200,200,200,0.5);
	text-decoration:none;
	position:relative;
	font-size: 1rem;
    border:1px solid #fff;
}

#spot .clm02 dl dd span {
	display:inline-block;
	padding:0 10px;
    line-height: 1.8rem;
	margin:0 2px 6px 0;
	background:#09F;
    color: #fff;
	border-radius: 6px;
	box-shadow: 2px 2px 0 0 rgba(200,200,200,0.5);
	text-decoration:none;
	position:relative;
    border:1px solid #fff;
}


#spot .clm02 dl a span{
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#F69;
	font-size:0.7em;
	font-weight:bold;
	padding-left:5px;
}


#target ul li {
	padding-bottom: 15px;
}

#target ul li a {
	text-decoration:none; display:block;
	padding:10px 10px 10px 85px; background:#fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 2px 2px 0 0 rgba(200,200,200,0.5);
	box-shadow: 2px 2px 0 0 rgba(200,200,200,0.5);
	margin:0;
	text-decoration:none;
	position:relative;
	min-height:65px;
	behavior:url("/common/css/PIE.htc");
}

#target ul li a h3 {
	font-weight: bold;
	font-size: 1rem;
}

#target ul li a p {
	color: #000;
	margin: 0 !important;
}

#target ul li .botanical {
	background: #fff url('location/botanical_garden/img/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}


#target ul li .sakura {
	background: #fff url('target/sakura/img/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}

#target ul li .airport {
	background: #fff url('target/img/airport/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}

#target ul li .airshow {
	background: #fff url('target/img/airshow/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}

#target ul li .sl {
	background: #fff url('target/img/sl/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}

#target ul li .tram {
	background: #fff url('target/img/tram/thumb.jpg') no-repeat 10px 10px;
	background-size:65px;
}

#spot .sakura h1 {
	border-bottom-color: #FF75AC;
}

#spot .sakura h1 span {
	background-color: #FF75AC;
}

#map_canvas {
	display: none;
}

#spot.botanical h1 {
	border-bottom:3px dotted #a8d526;
}

#spot.botanical h1 span {
    background:#a8d526;
}

#spot.botanical .spotList dl {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px dotted #ccc;
}

#spot.botanical .spotList dl dt {
	margin-bottom: 0.6rem;
}

#spot.botanical .spotList dl dt em a {
	font-size: 1.6rem;
	line-height: 2.3rem;
	display: block;
	vertical-align: middle;
	text-decoration: none;
	font-style: normal;
}

#spot.botanical .spotList dl dt em a::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
	color: #a8d526;
}

#spot.botanical .spotList dl dt ul {
	display: inline-block !important; 
	letter-spacing: -.4em;
}

#spot.botanical .spotList dl dt ul li {
	display: inline-block !important; 
	letter-spacing: normal;
	margin:0.4rem 0.4rem 0.4rem 0;
}

#spot.botanical .spotList dl dt ul li a {
	display: inline-block;
	border-radius: 6px;
	line-height: 2rem;
	font-size: 1rem;
	padding: 0 0.5rem;
	background: #eaf2ff;
	color: #002f86;
	vertical-align: middle;
	text-decoration: none;
}

#spot.botanical .spotList dl dt span {
	display: inline-block;
	border-radius: 6px;
	line-height: 2rem;
	font-size: 0.9rem;
	padding: 0 0.5rem;
	background: #eee;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
}


#spot.botanical .spotList dl dt a:hover {color:#0036ff;}

#spot.botanical .spotList .lined {
	border-width:1px 0 0 0;
	border-spacing:0;
	width:100%;
}

#spot.botanical .spotList .lined,
#spot.botanical .spotList .lined th,
#spot.botanical .spotList .lined td{ 
	border:1px solid #ccc; 
}


#spot.botanical .spotList .lined th {
	white-space:nowrap;
	background-color:#ddd;
}

#spot.botanical .spotList .lined td {
	background-color:#fff;
}

#spot.botanical .spotList .lined th,
#spot.botanical .spotList .lined td{
	font-size: 0.9rem;
	padding:5px 8px;
	border-width:0 1px 1px 1px;
}


#spot.botanical .spotList .lined caption {
	font-weight: bold;
}



#spot.botanical .spotList dl dd .tab {
	letter-spacing: -.4em;
}

#spot.botanical .spotList dl dd .tab li {
	letter-spacing: normal;
	display: inline-block;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	font-size: 0.9rem;
	padding: 6px 10px;
	margin: 0;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	cursor: pointer;
	vertical-align: bottom;
	font-weight: bold;
	color: #002f86;
    width: inherit;
}

#spot.botanical .spotList dl dd .tab li:hover {
	color: #0036ff;}


#spot.botanical .spotList dl dd .tab li.current {
	background: #eee;
	cursor: inherit;
	color: #444;
	padding: 8px 10px 4px;
	border-color: #eee;
}

#spot.botanical .spotList dl dd .contents {
	margin-bottom: 0.6rem;
}


#spot.botanical .spotList dl dd .contents li {
	display: block;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;
	line-height: 1.4rem;
	padding: 8px 10px;
	background: #eee;
	display: none;
    width: inherit;
    text-align: left;
}

#spot.botanical .spotList dl dd .contents li:nth-child(1) {
	display: block;
}

#spot.botanical .spotList dl dd .tab .photo,
#spot.botanical .spotList dl dd .tab .comment{
    font-size: 0;
}

#spot.botanical .spotList dl dd .tab .photo:after {
    font-size: 1rem;
    content: "写真";
}

#spot.botanical .spotList dl dd .tab .comment:after {
    font-size: 1rem;
    content: "コメント";
}

#spot.botanical .spotList dl dd .tab .info {
    font-size: 1rem;
}



/***/

#spot.botanical .thumbList {
	margin:0 0 1rem !important;
	padding: 0 !important;
    text-align: center !important;
}

#spot.botanical .thumbList a {
	padding: 5px;
	display: block;
	border-radius: 6px;
	background: #eee;
	letter-spacing: -.4em;
}

#spot.botanical .thumbList a * {
	letter-spacing: normal;
}

#spot.botanical .thumbList a b {
	display: block;
	margin-bottom: 0.2rem;
}

@media screen and (max-width: 359px) {
	#spot.botanical .thumbList a span {
		display: inline-block;
		margin:5px;
		position:relative;
		vertical-align: middle;
		width:130px;
		height:130px;
		box-sizing:border-box;
		border:1px solid #ddd;
		background: #fff;
	}

	#spot.botanical .thumbList a span img{
		display:block;  
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width:120px;
		max-height:120px;
	}  
}


@media screen and (min-width: 360px) {
	#spot.botanical .thumbList a span {
		display: inline-block;
		margin:5px;
		position:relative;
		vertical-align: middle;
		width:140px;
		height:140px;
		box-sizing:border-box;
		border:1px solid #ddd;
		background: #fff;
	}

	#spot.botanical .thumbList a span img{
		display:block;  
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width:130px;
		max-height:130px;
	}  
}

@media screen and (min-width: 480px) {
	#spot.botanical .thumbList a span {
		display: inline-block;
		margin:5px;
		position:relative;
		vertical-align: middle;
		width:100px;
		height:100px;
		box-sizing:border-box;
		border:1px solid #ddd;
		background: #fff;
	}

	#spot.botanical .thumbList a span img{
		display:block;  
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width:90px;
		max-height:90px;
	}  
}

@media screen and (min-width: 640px) {
	#spot.botanical .thumbList a span {
		display: inline-block;
		margin:5px;
		position:relative;
		vertical-align: middle;
		width:140px;
		height:140px;
		box-sizing:border-box;
		border:1px solid #ddd;
		background: #fff;
	}

	#spot.botanical .thumbList a span img{
		display:block;  
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width:130px;
		max-height:130px;
	}  
}





#spot.botanical .thumbList a:hover span {
	border: 1px solid #0036ff;
}

#spot.botanical .photo::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
    font-size: 1rem;
}

#spot.botanical h3.comment::before,
#spot.botanical li.comment::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
    font-size: 1rem;
}

#spot.botanical .info::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
}

#spot.botanical .extlink::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
}


#spot.botanical .lined tr td .map::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
	/*color: #f00;*/
}

#spot.botanical .spotList dl dd .thumbList a {
	text-decoration: none;
	color: #444;
}

#spot.botanical .spotList dl dd .thumbList a b::before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-decoration: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	margin-right:0.3rem;
}

#spot.botanical .spotList dl dd h3 {
	font-weight: bold;
	margin-bottom: 0.3rem;
	font-size: 1rem;
	color: #666;
}

p.comment {
	padding: 10px;
	display: block;
	border-radius: 6px;
	background: #eee;
}

#spot.botanical .extlink {word-break:break-all;}

/*accordion*/

.accList {margin-bottom: 1rem; }

.accList dt {
	border-top: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding: 1rem 0.5rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.accList dl:last-of-type dt {
	border-bottom: 1px solid #e5e5e5;
}


.accList dt.accOpen {
	border-bottom: 1px solid #e5e5e5;
	background: #eaf2ff;
}

.accList dt a {
	text-decoration: none;
	font-weight: bold;
	color: #000;
}

.accList dd { margin-left: 1rem;}

.accList li {
	border-top: 1px solid #e5e5e5;
	/*border-left: 1px solid #e5e5e5;*/
	border-right: 1px solid #e5e5e5;
	padding: 1rem 0.5rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.accList dl:last-of-type li:last-child {
	border-bottom: 1px solid #e5e5e5;}

.accList dd ul li:first-child {
	border-top: none;
}

.accList dt i::after {
 	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	color: #0D47A1;
}

.accList dt.accOpen i::after {
	content: "";
}


.accList dd ul li i::after {
 	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	color: #0D47A1;
}

.accList dt a,
.accList dd ul li span,
.accList dd ul li a {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto; 
	margin-right:1em;
}


#spot .news {
	border-radius: 6px;
	border: 1px dotted #f33;
	padding: 10px;
	margin-bottom: 1rem; 
}

#spot .news a {
	display: block;
}

/**********************************************************************/
#searchResult ul.thumbList {
	margin-bottom:1em;  
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	-ms-align-items: center;
}


#searchResult ul.thumbList li {
	margin:0 0 10px;
	text-align:center;
	font-size: 0.7rem;
}



@media screen and (max-width: 375px) {
	#searchResult ul.thumbList li {
		margin-bottom:8px;
		flex-basis: 32%;
	}
}

@media screen and (min-width: 376px) {
	#searchResult ul.thumbList li {
		margin-bottom:8px;
		flex-basis: 24%;
	}
}


#searchResult ul.thumbList li a .thumb {
	margin: 0 auto 5px;
	display: block;
	
}

#searchResult ul.thumbList li a .thumb img {
	border:1px solid #0074d9;
	margin-bottom: 3px;

}

#searchResult ul.thumbList li {
	font-size: 0.7rem;
}

#searchResult ul.thumbList li .title {
	font-size: 0.9rem;
	word-wrap: break-word;
}


#searchResult ul.thumbList li .point {
	display: block;
}

#searchResult ul.thumbList li .point::before {content: 'GANREF Point '}

#searchResult ul.thumbList li .author,
#searchResult ul.thumbList li .created,
#searchResult ul.thumbList li .date,
#searchResult ul.thumbList li .favorite,
#searchResult ul.thumbList li .comment {
	display: none;
}

.iconPR,
.iconFT {
	display:inline-block;
	margin:3px 2px 0 2px;
	padding:1px 5px;
	background-color:#ffd55a;
	color:#9f4618;
	font-size:0.7rem;
	font-family:Verdana, Geneva, sans-serif;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
}

ul.nav  {
	padding: 0;
	list-style: none;
	margin-bottom: 1rem;
}

ul.nav li {
	border-top: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding: 1rem 0.5rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

ul.nav li:last-child {
	border-bottom: 1px solid #e5e5e5;
}


ul.nav li i:after {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "";
	color: #0D47A1;
}


ul.nav li a {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto; 
	margin-right:1em;
}