@charset "UTF-8";

#main_content > .page_name{ background-image: url(../example/image/title_bg.jpg); }
#main_content > .page_name > .overlay{ background-image: url(../example/image/title_overlay.png); }
#main_content > .content > .head.default > span{ background: url(../example/image/h01.png) 0 0 no-repeat; width: 383px; height: 65px; }
#main_content > .content > .photo{ position: absolute; right: 0; top: 11px; }
#main_content > .content > .article{ margin-top: 20px; }
#main_content > .content > .article+.article{ margin-top: 55px; }
#main_content > .content > .article > .name{ font-size: 16px; line-height: 24px; color: #532800; font-weight: bold; background-color: #ffd960; padding: 10px 15px; }
#main_content > .content > .article > .name > .new{ color: #802a00; border: 1px solid #802a00; font-size: 14px; line-height: 22px; padding: 0 5px; }
#main_content > .content > .article > .inner_wrap{ position: relative; min-height: 480px; width: 850px; margin: 20px auto 0; overflow: hidden; }
#main_content > .content > .article > .inner_wrap > .display{ position: absolute; height: 100%; width: 640px; background-color: #43301e; }
#main_content > .content > .article > .inner_wrap > .display > .name{ display: none; }
#main_content > .content > .article > .inner_wrap > .display > .photo{ position: absolute; top: 50%; margin-top: -240px; width: 640px; height: 480px;  }
#main_content > .content > .article > .inner_wrap > .display > .controller{ width: 73px; height: 73px; background: url(../image/common/content/controll_btn.png) 0 0 no-repeat #1f1f1f; position: absolute; top: 50%; margin-top: -36px; transition: opacity 0.25s linear; display: none; }
#main_content > .content > .article > .inner_wrap > .display > .controller.next{ right: 0; background-position: 0 0; }
#main_content > .content > .article > .inner_wrap > .display > .controller.prev{ left: 0; background-position: 0 bottom; }
#main_content > .content > .article > .inner_wrap > .display > .controller:hover{ opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; cursor: pointer; }
#main_content > .content > .article > .inner_wrap > .list_wrap{ float: right; width: 202px; overflow: hidden; margin-top: -3px; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li{ width: 92px; height: auto; border: 2px solid #e0d5c8; margin: 3px 0 0 5px; float: left; background-color: #ffffff; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li > img{ width: 100%; height: auto; transition: opacity 0.25s linear; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li:hover{ cursor: pointer; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li:hover > img{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li.current{ cursor: auto; border-color: #43301e; }
#main_content > .content > .article > .inner_wrap > .list_wrap > li.current > img{ opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; }


/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main_content > .content > .photo{ display: none; }
	#all_wrap{ position: relative; }
	#main_content > .content{ position: static; }
	#main_content > .content > .article+.article{ margin-top: 35px; }
	#main_content > .content > .article > .inner_wrap{ position: static; min-height: 0; width: auto; overflow: visible; margin-top: 15px; }
	#main_content > .content > .article > .inner_wrap > .display{ display: none; overflow: hidden; margin-top: 0; }
	#main_content > .content > .article > .inner_wrap > .display.modal{ display: block; position: absolute; border: none; left: 0; top: 0; width: 100%; height: 100%; z-index: 8000; animation: showModalView 0.25s linear; }
	@keyframes showModalView{
		0%{ opacity: 0; }
		100%{ opacity: 1; }
	}
	#main_content > .content > .article > .inner_wrap > .display.modal > .photo{ position: static; width: auto; height: auto; margin: auto; }
	#main_content > .content > .article > .inner_wrap > .display.modal > .photo > img{ width: 100%; height: auto; opacity: 0; }
	#main_content > .content > .article > .inner_wrap > .display.modal > .close_btn{ width: 51px; height: 51px; margin-left: auto; background: url(../image/common/content/icon-close.png) 0 0 no-repeat; display: block; }
	#main_content > .content > .article > .inner_wrap > .display.modal > .close_btn:hover{ cursor: pointer; }
	#main_content > .content > .article > .inner_wrap > .display.modal > .name{ display: block; color: #ffffff; padding: 10px; color: #ffffff; font-size: 16px; line-height: 20px; font-weight: bold; }
	#main_content > .content > .article > .inner_wrap > .display.modal > .name > .new{ display: none; }
	#main_content > .content > .article > .inner_wrap > .display > .controller{ position: static; margin-top: 0; background-color: transparent; display: block; }
	#main_content > .content > .article > .inner_wrap > .display > .controller.prev{ float: left; }
	#main_content > .content > .article > .inner_wrap > .display > .controller.next{ float: right; }
	#main_content > .content > .article > .inner_wrap > .list_wrap{ width: 260px; margin: 10px auto 0; float: none; }
	#main_content > .content > .article > .inner_wrap > .list_wrap > li{ width: 80px; margin: 4px 2px 0 2px; border-width: 1px; }
	#main_content > .content > .article > .inner_wrap > .list_wrap > li.current{ border-color: #e0d5c8; }
	#main_content > .content > .article > .inner_wrap > .list_wrap > li:hover{ cursor: pointer; }
	#main_content > .content > .article > .inner_wrap > .list_wrap > li:hover > img{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; }
}