@charset "euc-jp";
/* CSS Document */

.titlebox {
	background-image: url(images/titlebg.jpg);
}

#sightseeing .bscontainer {
	align-items: stretch !important;
}
#sightseeing .bsbox.photo {
	width: 46%;
	align-self: center;
}
#sightseeing .bscontainer {
	align-items: strech;
}
#sightseeing .bsbox.line_l {
	width: 50%;
	align-self: strech;
	position: relative;
}
#sightseeing .bsbox.line_l::before {
	position: absolute;
	display: block;
	content: '';
	width: 5px;
	height: 100%;
	background: #1CB5E0;
	background: -webkit-linear-gradient(to bottom, #FFF, #1CB5E0, #054183);
	background: linear-gradient(to bottom, #FFF, #1CB5E0, #054183);
	left: 0;
}
#sightseeing .bsbox.line_l.bdcol2::before {
	background: #2BC0E4;
	background: -webkit-linear-gradient(to bottom, #2BC0E4, #EAECC6, #EE7C40, #6430CF, #054183);
	background: linear-gradient(to bottom, #2BC0E4, #EAECC6, #EE7C40, #6430CF, #054183);
}
#sightseeing .bsbox.line_l.bdcol3::before {
	background: #A5FECB;
	background: -webkit-linear-gradient(to bottom, #054183, #20BDFF, #A5FECB, #FFF);
	background: linear-gradient(to bottom, #054183, #20BDFF, #A5FECB, #FFF);
}

#sightseeing ol {
	list-style: none;
	margin: 2em .5em 2em 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
}
#sightseeing ol li {
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 0 1em 1em 1.5em;
}
#sightseeing ol li strong {
	display: block;
	position: relative;
	padding: 10px;
	background: #EFEFEF;
	border-bottom: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-radius: 10px;
	font-size: 1.6rem;
	text-align: center;
}
#sightseeing ol li strong::before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #EFEFEF;
	border-width: 10px;
	margin-top: -10px;
}
#sightseeing ol li strong::after {
	position: absolute;
	display: block;
	content: '';
	width: 10px;
	height: 10px;
	border: solid 2px #AAA;
	border-radius: 100%;
	background: #FFF;
	left: -25px;
	top: 50%;
	margin-top: -8px;
}

#sightseeing ol li p {
	margin: 0 0 1em;
}

@media screen and (max-width:649px){
#sightseeing .bsbox.photo, #sightseeing .bsbox.line_l {
	width: 100%;
}
}