@charset "utf-8";

.disnon{display:none;
}   
.responsive_box{
    width:100%;
    padding:0;/* -------------5px--------------------*---- */
    border:solid 0px;
}
 
.responsive_image_box{
    width:100%;
    margin-bottom:20px;
}
 
.responsive_image_box img{
    width:100%;
}
 
#responsive_tab:after{
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}
 
#responsive_tab li{
    float:left;
    width:24.5%;	/* -------------25%---------------------*---- */
　　list-style-type:none;
}
 
#responsive_tab li:hover{
    border:solid 3px #428bca;
    cursor:pointer;
}

.image-resize {
max-width: 340px;
max-height: auto;
margin-left: auto;
margin-right: auto;

}

/*----------------------*/


.demo2{
width:100%;/*-------250px---------------*/
margin: 0 auto;
  border: 0px solid #000;/*-------0px solid #000;--------------*/
  padding: 0px;/*-------0px--------------*/
position: relative;
  overflow: hidden;
hight:0 auto;
display: table;
}

.demo2-1{
width: 48%;/*-------123px---------------*/
  float: left;/*-------leftt---------------*/
  border: 0px solid #000; /*-------border: 1px solid #000;---------------*/ 
    padding:10px;/*------10px---------------*/
margin: 0 auto;
hight:0 auto;
clear:both;    


}

.demo2-2{
width: 48%;/*-------123px---------------*/
  float: right;/*-------right---------------*/
  border: 0px solid #000; /*-------border: 1px solid #000;---------------*/ 
  padding:10px;/*------10px---------------*/
  hight:auto;
margin: 0 auto;
    

    
}

.contents clearfix{
width:100%;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  max-with: 100%;
hight:0 auto;
background: #FFFFFF;
}



.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
/*------.center{
 text-align: center;
}---------------*/ 
.left-box { float: left; width: 48%; padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;　width: 48%; padding: 1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}


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

.demo2-1{
width: 90%;
padding: 3px;
hight:0 auto;
margin: 0 auto;
}

.demo2-2{
clear:both;    
padding: 3px;  
hight:0 auto;
  width: 90%;
margin: 0 auto;
}
.left-box { float: left; width: 100%; padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;width: 100%;padding:  1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}

@media screen and (min-width: 950px){

.demo2-1{
width: 90%;
padding:3px;
hight:0 auto;
margin: 0 auto;
}

.demo2-2{
clear:both;    
padding:3px;
hight:0 auto;
  width: 90%;
margin: 0 auto;
}
.left-box { float: left; width: 100%; padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;width: 100%; padding:  1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}

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

.demo2-1{
width: 90%;
padding:3px;
hight:0 auto;
margin: 0 auto;
clear:both;    

}

.demo2-2{
clear:both;    
padding:3px;	  
hight:0 auto;
  width: 90%;
margin: 0 auto;
}
.left-box { float: left; width: 100%; padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;width: 100%; padding: 1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}

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

.demo2-1{
width: 90%;
padding:3px;
hight:0 auto;
margin: 0 auto;
}

.demo2-2{
clear:both;    
padding:3px;
hight:0 auto;
  width: 90%;
  
margin: 0 auto;
}
.left-box { float: left; width: 100%;padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;width: 100%; padding: 1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}

/*------@media screen and (min-width: 768px) {
    iframeWrapper  {
        width: 640px; 
        height: 480px;
    }---------------*/ 

@media screen and (min-width: 760px){

.demo2-1{
width: 90%;
padding:3px;
hight:0 auto;
margin: 0 auto;
}

.demo2-2{
clear:both;    
padding:3px;
hight:0 auto;
width: 90%;
margin: 0 auto;
}
.left-box { float: left; width: 100%; padding:  1%; box-sizing: border-box; margin:0 auto;  text-align: left;  position: relative; hight:auto;}
.right-box { float: left;　width: 100%; padding: 1%; box-sizing: border-box; margin:0 auto; text-align: left;  position: relative; hight:auto;}


}





#container{
    margin: 0 auto;
    max-width: 550px;
}
#photo_container{
    position: relative;
}
#thumbnail{
	overflow: hidden;
	margin: 0 0 10px;
    padding: 0 3% ;
    width: 100%;
}
#thumbnail li{
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
	list-style: none;
}
#thumbnail li:last-child{
    margin-right: 0;
}
#thumbnail li img{
    width: 100%;
	opacity: 0.5;
    filter: alpha(opacity=50); 
}
#thumbnail li.current img{
	opacity: 1;
    filter: alpha(opacity=100);
}
#main_photo{
	position: relative;
    height: 490px;
    border: solid 15px #fff;
    box-shadow: 0 1px 8px #bbb;
}
#main_photo img{
	position: absolute;
	top:0;
	width: 100%;
}
.img_nav btn{
    position: absolute;
    top:52%;
    margin: -25px 6% 0;
    width: 50px;
    height: 50px;
    border-top: solid 2px #fff;   
    border-left: solid 2px #fff;
    cursor: pointer;
}
#prev{
    -ms-transform: rotateX(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#next{
    right: 0;
    -ms-transform: rotateX(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.ctr_btn{
    position: absolute;
    top:7%;
    right: 5%;
}
.ctr_btn btn{
    padding:10px 20px;
    border: solid 2px #fff;
    color: #fff;
    cursor: pointer;
}


#navi li .toplevel {
	line-height: 16px;
	/*	height: 32px;*/
	padding-top: 6px;
	padding-right: 25px;
	padding-bottom: 6px;
	padding-left: 25px;
	font-size: 13px;
	color: #505050;
	text-decoration: none;
	text-align: center;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E0E0E0;
}
/*IE6除外
---------------*/
html > body #navi li .toplevel {
	height: 32px;
}
/*---------------*/
#navi li a.toplevel:hover,
#navi li a.toplevel.jshover {
	color: #151515;
}
/*----
div.iframeWrapper {
position: relative;
width: 100%;
padding-top: 75%;
display:block;
}
div.iframeWrapper iframe {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;

}-----*/


div.iframeWrap {
position: relative;
width: 100%;
}
div.iframeWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}


.iframe-wrap { 
position: relative; 
width: 100%; 
padding: calc(480 / 854 * 100%) 0 0; 
} 


.iframe-wrap iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}