@charset "UTF-8";
/* CSS Document */

.main_image img {height: auto;width: 100%;}
.main_image_txt {font-size: 1.2em;line-height: 1.8;color: #525252;padding: 25px 0;}

#example_list {width: 710px;overflow: hidden;}
#example_list ul {width: 760px;}
#example_list ul li {width: 380px;padding: 0 0 40px;float: left;}
#example_list ul li a {display: block;margin: 0 50px 0 0;}
#example_list ul li img {height: auto;width: 100%;}
#example_list ul li img.sp_image {display: none;}
#example_list ul li a:hover img {filter:alpha(opacity=70);opacity: 0.7;}

#example_detail {padding: 0 0 30px;}
#example_detail h4 {font-size: 14px!important;line-height: 40px;font-weight: 700;color: #FFF!important;letter-spacing: 0.2em;background: url(images/sub_bar.png) no-repeat 0 0;height: 40px;padding: 0 0 0 20px;}

#example_detail .btn{display:block;width:710px;height:120px;margin:0 0 15px;overflow:hidden;position:relative;box-shadow:0px 2px 3px 0px #888888;}
#example_detail .btn img{width:100%;height:auto;vertical-align:top;position:absolute;top:0;left:0;}
#example_detail .btn:hover img{top:-120px;opacity:1;}

#example_detail .main_photo {text-align:center;width: 710px;margin: 0 auto 15px;}
#example_detail ul {text-align: left;margin: 0 0 0 5px;}
#example_detail ul li {display: inline-block;height: 82px;width: 82px;margin: 0 0 5px 5px;vertical-align: top;text-align: center;}
#example_detail ul li a {cursor: pointer;}
#example_detail .pc_hidden {display: none;}

@media screen and (max-width: 767px) {
    .main_image_txt {padding: 10px 0 0;}
    
	#example_detail .btn{width:100%;height:auto;}
	#example_detail .btn img{width:100%;height:auto;vertical-align:top;position:inherit;top:inherit;left:inherit;}
	#example_detail .btn:hover img{top:inherit;}
	
    #example_list {width: auto;overflow: hidden;}
    #example_list ul {width: auto;}
    #example_list ul li {width: auto;margin: 0 20px;padding: 0 0 25px;float: none;}
    #example_list ul li a {margin: 0;}
    #example_list ul li img.pc_image {display: none;}
    #example_list ul li img.sp_image {display: block;}
    #example_list ul li a:hover img {opacity: 1;}
    
    #example_detail ol {margin: 0 30px;}
    #example_detail ol li {padding: 0 0 10px;}
    #example_detail ol li img {height: auto;width: 100%;}
    #example_detail .pc_hidden {display: block;}
    #example_detail .sp_hidden {display: none;}
}