@charset "utf-8";

.container {
	width: 940px;
	margin: 40px auto 20px auto;
	overflow: hidden;
}

#local-navigation {
	clear: both;
	float: none;
	padding: 12px 0 10px;
	background: url(../../common/images/contents_dotted_line_horizontal.png) repeat-x 0 top;
}

#local-navigation a {
	background: url(../../common/images/icon_arrow_small_left.png) no-repeat 0 center / 8px;
	padding: 0 0 0 15px;
}

#local-navigation a,
#local-navigation li {
	display: inline-block;
	margin-right: 15px;
}

#intro {
	width: 360px;
	float: left;
	overflow: hidden;
	margin: 0 0 30px;
}

#intro h2 {
	font-size: 1.4em;
	font-weight: bold;
	margin: 0 0 20px;
	padding-top: 45px;
	background: url(../images/detail_h2_bg.png) no-repeat left top / auto 25px;
}

#intro h3 {
	font-weight: bold;
	color: #000;
	margin-top: 30px;
	padding-left: 12px;
	background: url(../../common/images/icon_indocator_dot.png) no-repeat left center / 6px;
}

#intro h4 {
	font-weight: bold;
	color: #000;
	margin-top: 10px;
}

#intro p {
	margin-bottom: 20px;
}

#data {
	clear: both;
	float: left;
	/*width: 300px;*/
	margin: 30px 0 0;
}

#data:before {
	margin: 0 0 30px;
	display: block;
	content: "";
	font-size: 0;
	line-height: 0;
	width: 30px;
	height: 1px;
	background: url(../../common/images/contents_dotted_line_horizontal.png) repeat-x left top;
}

.change-time {
	color: #F00;
}

#data2 {
	margin: 0 0 30px;
}

#data2:after {
	margin: 30px 0 0;
	display: block;
	content: "";
	font-size: 0;
	line-height: 0;
	width: 30px;
	height: 1px;
	background: url(../../common/images/contents_dotted_line_horizontal.png) repeat-x left top;
}

#figure {
	position: relative;
	float: right;
	width: 530px;
	height: auto;
	/*height: 350px; */
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

.slick-list:before {
	position: absolute;
	display: block;
	content: ".";
	width: 100%;
	height: 100%;
	background-image: url(../../common/svg/mask-shop_detail.svg);
	font-size: 0;
	line-height: 0;
	z-index: 30;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
}

/* IE11 only */
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .slick-list:before {
		width: 100%;
	}
}

/*#figure:after {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 66.037%;
}*/

.imageReel {
	border-radius: 5px;

	/*position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto 10px;
	width: 100%;
	height: 100%;*/
}

.imageReel:before {
	width: 100%;
	height: 100%;
	background-image: url(../../common/svg/mask-shop_detail.svg);
	z-index: 30;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
}

.imageReel li {
	/*position: absolute;
	float: left;
	width: 530px;
	min-height: 350px;
	overflow: hidden;*/
	background-color: transparent;
	border-radius: 0;
}

.imageReel img {
	width: 100%;
	height: auto;
}

.indicator {
	margin: 5px 0;
}

.indicator li {
	display: inline-block;
	width: auto !important;
	height: auto !important;
}

.indicator li:first-child {
	padding-left: 0;
}

/* Slick */

.indicator li button {
	opacity: 0.25;
	font-size: 0;
	line-height: 0;
	display: block;
	width: 6px;
	height: 6px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background-image: url(../../common/images/icon_indocator_dot.png);
	background-size: 6px;
	background-repeat: no-repeat;
	background-position: center;
	padding: 5px 5px 5px 4px;
	transition: opacity .4s ease;
	box-sizing: content-box;
	background-color: transparent;
}

.indicator .slick-active button {
	opacity: 1.0;
}

/*.indicator img {
	padding: 5px 5px 5px 4px;
	cursor: pointer;
	opacity: 0.25;
	width: 6px;
	-webkit-transition: opacity 0.4s ease;
	   -moz-transition: opacity 0.4s ease;
	    -ms-transition: opacity 0.4s ease;
	     -o-transition: opacity 0.4s ease;
	        transition: opacity 0.4s ease;
}

.indicator li:first-child img {
	padding-left: 0;
}

.indicator .current img,
.indicator img:hover {
	opacity: 1;
}*/

.loading-indicator {
	position: absolute;
	left: 260px;
	top: 165px;
}

/* map */

#map {
	display: block;
	float: right;
	width: 530px;
	height: 350px;
	margin: 30px 0 60px;
	border-radius: 5px;
}

#map iframe {
	width: 530px;
	height: 350px;
}

.mask:before {
	content: none;
}

.shop_detail .mask {
	mask: url(#shop_detail-frame);
}

.common-notice li:first-child {
	display: flex;
	align-items: center;
}

.common-notice li img {
	margin: 0 3px;
	width: 18px;
	height: auto;
}

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

	.container {
		width: 100%;
	}

	#contents {
		margin: 120px auto 0;
	}

	#intro {
		width: 100%;
		float: none;
	}

	#figure {
		float: none;
		margin: 0 auto;
	}

	#map {
		float: none;
		width: 100%;
		margin: 30px auto 60px;
	}

	#map iframe {
		width: 100%;
	}

	.slick-list:before {
		width: 100.5%;
		height: 100.2%;
	}

}

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

	#intro {
		width: 100%;
	}

	#figure {
		width: 490px;
	}

	.imageReel {
		width: 100%;
		height: auto;
	}

	.imageReel li {
	}

}

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

	#doc-title.detail {
		display: none;
	}

	#figure {
		width: 100%;
		height: 100%;
	}

	.imageReel {
		width: 100%;
		height: 100%;
	}

	.imageReel li {
		width: 100%;
		height: 100%;
	}
}

/* ========================================================================== */
/* underIE9                                                                   */
/* ========================================================================== */

.ie6 #data {
	padding-top: 30px;
}
.ie6 #local-navigation a,
.ie6 #local-navigation li,
.ie7 #local-navigation a,
.ie7 #local-navigation li {
	display: inline;
}

.ie8 #contents {
	overflow: hidden;
}

.ie8 #map {
	border-radius: 0;
	zoom: 1;
}

.ie8 #map #canvas {
	width: 530px !important;
	height: 350px !important;
}