@charset "utf-8";
/* ===================================================================
CSS information

 file name  :  location.css
 style info :  スタイル指定
=================================================================== */

p {
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#4c4948;
}

section.pt230 {
	padding-top:230px;
}

#main img.fixImg {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:-1;
}
.txt {
	font-size: 15px;
	color: #262626;
	line-height: 2.5;
	position:relative;
}

/* slider
--------------------*/
#slider .sp-slides { position: relative;}
#slider .sp-slides .caption { position: absolute; bottom:0; right:0; color:#fff; background:rgba(0,0,0,0.7); margin:0; padding:1px 3px;}

.sp-thumbnails { max-width:980px;}
.sp-thumbnail-container { opacity:0.3;}
.sp-selected-thumbnail { opacity:1;}
.sp-selected-thumbnail { border:#46a0e2 3px solid;}

/*----------main----------*/
#main div.img {
    margin-top: -50px;
}
#main > p {
	padding:0 20px;
}

/*----------conts----------*/
#conts {
	max-width:980px;
	margin:0 auto;
	position:relative;
	z-index:1;
}
#conts .bgWrap {
    background: url(../../../img/pages/location/location_bg.png) no-repeat;
	background-size:100% auto;
}

h3 {
    display: block;
	text-align:left;
	color:#333;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 1.4em;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 20px;
	letter-spacing:0.065em;
}

#conts .left {
	display:inline-block;
	max-width:46.326530612%;
	vertical-align:top;
	margin-right:5.306122448%;
}
#conts .right {
	display:inline-block;
	max-width:48.367346938%;
}
#conts .left > p {
    text-align: left;
    line-height: 2.4;
    font-size: 0.9em;
}
#conts .right > div > p span {
	display:inline-block;
	width:20%;
	margin-right:2%;
	vertical-align:middle;
}
#conts .right > div > p small {
	display:inline-block;
	vertical-align:middle;
	width:78%;
    font-size: 0.8em;
    text-align: left;
	padding-left:4%;
	border-left:#ccc 1px solid;
}

/*-----point-----*/

.point {
	background:url(../../../img/elements/point_bg.jpg) 0 0 repeat;
	max-width:980px;
	position:relative;
	border-radius:3px;
	-webkit-box-shadow: 0 1px 10px #777;
	-moz-box-shadow: 0 1px 10px #777;
	box-shadow: 0 1px 10px #777;
	color:#333;
	margin:0 auto 60px;
	padding:30px;
}
.point p {
    font-size: 0.9em;
    letter-spacing: 0.08em;
    line-height: 2;
}
.point::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	left:10px;
	z-index:10;
}
.point::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
}
.point > div::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:10;
}
.point > div::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	left:10px;
	z-index:10;
}

/*-figcaption-*/
figure {
	position:relative;
	display:inline-block;
}
figcaption {
	position:absolute;
	color:#333;
	font-size:0.7em;
}
#main figcaption {
    right: 10%;
    bottom: 20%;
}
#conts figure {
	margin-bottom:30px;
}
#conts figure img {
	width:100%;
}
#conts figcaption {
	right:0;
    bottom: 0;
    margin-bottom: -14px;
}

/*----------boxBottom----------*/
#conts > h3 { text-align:center; margin-bottom:50px;}
#conts .boxBottom { position:relative; margin-bottom:30px;}
#conts .boxBottom > figure { position:relative; margin-bottom:0;}
#conts .boxBottom > figure figcaption { position: absolute; bottom:0; right:0; margin-bottom:0; color: #fff; background: rgba(0,0,0,0.7); padding:4px 0px 2px 6px;}
#conts .boxBottom.al .point { right:0;}
#conts .boxBottom.ar .point { left:0;}
#conts .boxBottom .point { position:absolute; top:50%; transform: translateY(-50%); max-width:415px;}
#conts .boxBottom .point .left { max-width:178px; margin-right:7px; text-align:left;}
#conts .boxBottom .point .right { max-width:164px;}

/*----------bottomImg----------*/
.bottomImg {
    margin: -300px 0 100px;
    position: relative;
    z-index: 0;
}
.bottomImg figure {
	display:block;
}
.bottomImg figcaption {
	right:10px;
    bottom: 0;
    margin-bottom: -14px;
}

@media screen and (max-width: 1000px) {
#conts {
    margin: 0 20px;
}
#conts .left {
    max-width: 100%;
    margin:0 0 30px;
}
#conts .left h3,
#conts .left > p {
	text-align:center;
}
#conts .right {
    max-width: 474px;
}
.bottomImg {
    margin: -260px 0 100px;
}
}
@media screen and (max-width: 991px) {
#conts .boxBottom { text-align:center !important;}
#conts .boxBottom .point { position: relative; transform: none; max-width: 760px;}
#conts .boxBottom .point .left { max-width: none; width:70%; margin-right:4%; vertical-align: middle;}
#conts .boxBottom .point .right { max-width: none; width:26%; vertical-align: middle;}
}
@media screen and (max-width: 780px) {
#main div.img {
    margin-top: -30px;
    margin-bottom: 50px;
}
.bottomImg {
    margin: -180px 0 100px;
}
}
@media screen and (max-width: 680px) {

}
@media screen and (max-width: 640px) {
#main > p {
	text-align:left;
}
#main > p br {
	display:none;
}

#main div.img {
    margin-top: -10px;
}
#main figcaption {
    bottom: 10%;
}

#conts .left > p {
	text-align:left;
}
#conts .left > p br {
	display:none;
}

#conts .boxBottom .point .left { width:50%;}
#conts .boxBottom .point .right { width:46%;}
}
@media screen and (max-width: 510px) {
#conts .left > h3 {
	text-align:left;
}
#conts .left > h3 br {
	display:none;
}
.bottomImg {
    margin: -100px 0 100px;
}
}
@media screen and (max-width: 480px) {

}
@media screen and (max-width: 320px) {

}