@charset "UTF-8";
/* CSS Document */

/*slideshow*/


#slideshow div.photo {
	overflow: hidden;
	position: relative;
	margin:0 auto 20px;
}

#slideshow div.photo img {
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#slideshow div.photo div {
	top: 0;
	left: 0;
	position: absolute;
	width:100%;
	height:auto;
}

#slideshow div.photo div img{
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

#slideshow div.text h2{
	font-size:41px;
	line-height:1.2;
	color:#858585;
}

#slideshow div.text p{
	font-size:125%;
	line-height:1.2;
	margin-bottom:20px;
}

#slideshow ul {
	width: 100%;
}

#slideshow ul li {
	width: 45%;
	overflow:auto;
	display:inline-block;
	padding-bottom:30px;
	vertical-align:top;
}

#slideshow ul li h3 {
	font-size:112.5%;
	line-height:1.3;
	font-weight:bold;
	margin-bottom:5px;
	width:90%;
}

#slideshow ul li p {
	font-size:75% !important;
	line-height:1.3;
	width:90%;
}



#slideshow .active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

#slideshow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#slideshow ul {
	display: inline-block;
	overflow: hidden;
}


/*btn*/


.btn{
	width:25%;
	height:auto;
	display:block;
	float:left;
	padding-left:1px;
	overflow: hidden !important;
	box-sizing:border-box;
}

.btn img{
	width:100%;
	height:auto;
}

.btn figcaption {
	width:100%;
	height:auto;
}

.btn figure {
	position: relative;
	overflow: hidden !important;
	padding:0;
	margin:0;
}
.btn.fade figcaption {
	position: absolute;
	top: 0;
	left: 0;
	display:none;
}

.btn.slide figcaption {
	position: absolute;
	bottom:-100%;
	left: 0;
}

.btn.slide_t figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	padding:20px 15px 0;
	box-sizing:border-box;
}

.btn.slide_t figcaption p{
	font-family: 'AxisStd-Regular', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:112.5%;
	color:#FFF;
	position:absolute;
	top:0;
	left:0;
	padding:20px 15px 0;
	display:none;
}

.btn.slide_t figcaption img {
	position: absolute;
	top: 0;
	left: -100%;
}

.btn.exp figcaption {
	width:100%;
	height:100%;
	display:none;
	background-color: rgba(0,86,168,0.6);
	position: absolute;
	top: 0;
	left: 0;
}

.btn.exp figcaption p.title{
	font-family: 'AxisStd-Regular', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:112.5%;
	line-height:1.4;
	font-weight:bold;
	margin-bottom:5px;
	padding:20px 15px 0;
}

.btn.exp figcaption p{
	font-size:87.5%;
	line-height:1.2;
	color:#FFF;
	padding:0 15px;
}

.transform {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
figure:hover .transform {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

/*slider*/


.slider_box{
	width:704px;
	height:475px;
	margin:0 auto;
}

.slider{
	width:704px;
	height:435px;
	margin:0 auto;
}

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

.bx-wrapper .bx-viewport {
	left: -5px;
	background: #fff;
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -40px;
	width: 100%;
}

.bx-next {
	position:absolute;
	bottom:50%;
	right:-63px;
	background:url(/jp/~/media/Images/effects-parts/pe_r.png) top left no-repeat;
	width: 32px ;
	height: 32px ;
	text-indent:-9999px ;
	cursor:pointer ;
	z-index:100 ;
}

.bx-next:hover {
	opacity:0.6;
}

.bx-prev {
	position:absolute;
	bottom:50%;
	left:-63px;
	background:url(/jp/~/media/Images/effects-parts/pe_l.png) top left no-repeat;
	width: 32px ;
	height: 32px ;
	text-indent:-9999px ;
	cursor:pointer ;
	z-index:100 ;
}
.bx-prev:hover {
	opacity:0.6;
}

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #b5b6c3;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #0056a8;
}



/*photo_c*/


.photo_c{
	position:relative;
}

.photo_c img.m_pic{
	width:100%;
	height:auto;
	filter:alpha(opacity=0)!important;
	-moz-opacity: 0!important;
	opacity: 0!important;
	margin-bottom:25%;
}

#main_photo{
    position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#main_photo img{
	width: 100%;
	height:auto;
    position: absolute;
    top:0;
	left:0;
}

#thumbnail{
    overflow: hidden;
    width: 103%;
	display:table;
	position:absolute;
	bottom:0;
	left:-3%;
}
#thumbnail li{
	display:table-cell;
	padding-left:3%;
}

#thumbnail li img{
    width:100%;
    opacity: 0.5;
    filter: alpha(opacity=50); 
}
#thumbnail li.current img{
    opacity: 1;
    filter: alpha(opacity=100);
}

/*iframe_box*/
.iframe_box {
  position: relative;
  width: 100%;
  padding: 56.25% 0 0 0;
  margin-bottom:30px;
}
.iframe_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*accordion*/
.accordion{
	font-family: 'AxisStd-Regular', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:112.5%;
	line-height:44px;
	color:#FFF;
	font-weight:bold;
	height:40px;
	padding-left:20px;
	margin-bottom:0 !important;
	background-color:#a2a4b4;
	background-image:url(/jp/~/media/Images/effects-parts/a_plus.png);
	background-position:right center;
	background-repeat:no-repeat;
	cursor:pointer;
}

.accordion_box{
	border:1px solid #a2a4b4;
	display:none;
}

.accordion_inner{
	padding:20px 20px 0;
}

.accordion_box p{
	font-size:87.5%;
	margin-bottom:30px;
}

@media screen and (max-width: 800px) {

	/*slideshow*/
		
	#slideshow div.photo img {
		width:100%;
		height:auto;
	}
		
		
	/*slider*/
	
	
	.slider_box{
		width:75%;
		height:auto;
		margin:0 auto;
	}
	
	.slider{
		width:100%;
		height:auto;
		margin:0 auto;
	}
	
	
	.bx-next {
		position:absolute;
		bottom:50%;
		right:-43px;
		background:url(/jp/~/media/Images/effects-parts/pe_r.png) top left no-repeat;
		width: 32px ;
		height: 32px ;
		text-indent:-9999px ;
		cursor:pointer ;
		z-index:100 ;
	}
	
	.bx-next:hover {
		opacity:0.6;
	}
	
	.bx-prev {
		position:absolute;
		bottom:50%;
		left:-43px;
		background:url(/jp/~/media/Images/effects-parts/pe_l.png) top left no-repeat;
		width: 32px ;
		height: 32px ;
		text-indent:-9999px ;
		cursor:pointer ;
		z-index:100 ;
	}
	
	
	/*btn*/
	
	.btn{
		width:50%;
		height:auto;
	}
	
}


/* page feeding */

ul.pagenav-type01 {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	border: 1px solid #eee;
	text-align: center;
}

ul.pagenav-type01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}


ul.pagenav-type01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px 10px;
	background: #a2a4b4;
	text-decoration: none;
	vertical-align: middle;
	color:#fff;
}


ul.pagenav-type01 li span{
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px 10px;
	background: #0056a8;
	text-decoration: none;
	vertical-align: middle;
	color: #fff;

}
ul.pagenav-type01 li a:hover {
	color: #fff;
	background: #0056a8;
	border-color: #00f;
}

