@charset "utf-8";

html{width:100%;
	background:rgba(0,0,0,1.00);
	overflow-y:scroll;}

body{padding:0;
	margin:0;
	font-family:
		'Lucida Grande',
		'Hiragino Kaku Gothic ProN',
		 Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;}

.sp{display: none;}

#bg_filter_side{background:url(../img/bg/bg_filter_side.png) center center / cover no-repeat fixed;}
	
ul {margin: 0;
  padding: 0;}

li{list-style:none;}

a{text-decoration:none;
	border:none;}
	
.sp{display: none;}
	
img{border:none;}

/* sf_menu */
#checked,.menu-btn,.drawer-menu{display:none;}
	
/* container */
.container {
    width: 100%;
	min-width:960px;/* mainと同じ */
    padding: 0;
    margin: 0;
	background:url(../img/bg/bg_filter.png) repeat;
	z-index:2;
}

/* header */
#header{width:100%;
	padding:10px 0;
	background:rgba(0,0,0,1.00);
	border-bottom:rgba(123,123,123,1.00) solid 1px;}

.header_inner{width:95%;
	margin:0 auto;
	overflow:hidden;}

.logo01{float:left;}

.logo01 img{height:50px;}/* header footer 共通 */

.logo_sub01{float:left;
	margin-left:15px;}

.logo_sub01 img{height:40px;
	margin-top:10px;}
/* about_bg */
.about_bg01,.about_bg01_sf,.about_bg_data,.about_bg_img,.sf_bg_data,.pc_bg_data{float:right;
	height:50px;
    font-size:12px;
	margin:0 10px;}

.sf_bg_data{display:none;
	width:0;
	height:0;}

.pc_bg_data:hover{opacity:0.7;}
	
.about_bg_img img{width:100%;
	height:100%;}

.about_bg_data{line-height:25px;}

.about_bg_stage{color:rgba(255,255,255,1.00);
	padding:0 3px 0 0;}

.about_bg_photo{border:rgba(255,255,255,1.00) solid 1px;
	color:rgba(255,255,255,1.00);
	padding:0 3px;
	text-align:right;}
    
.color_gray{color:rgba(128,128,128,1.00);}

.about_bg01{border:rgba(246,146,30,1.00) solid 1px;
	color:rgba(246,146,30,1.00);
	line-height:50px;
	padding:0 10px;}

.about_bg01_sf{display:none;}

/* main */
#main{width:960px;
	min-height:85vh;
	margin:0 auto;}

.block01{width:960px;
	margin:20px auto;
	overflow:hidden;}

.con_title01{width:100%;
	font-size:18px;
	line-height:40px;
	color:rgba(255,255,255,1.00);
	box-shadow:rgba(255,255,255,1.00) 0 0 0 1px inset;
	background:url(../img/bg/bg_filter2.png) repeat;}

.rotate_circle img{width:20px;
	height:20px;
	margin:10px 5px 10px 10px;
	float:left;
	-webkit-animation:infiniterotate 5s linear infinite;
	-moz-animation:infiniterotate 5s linear infinite;
	-ms-animation:infiniterotate 5s linear infinite;
	-o-animation:infiniterotate 5s linear infinite;
	animation:infiniterotate 5s linear infinite;}

@-webkit-keyframes infiniterotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-moz-keyframes infiniterotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-ms-keyframes infiniterotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-o-keyframes infiniterotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes infiniterotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.block_text01{color:rgba(255,255,255,1.00);
	font-size:12px;
	line-height:20px;
	padding:10px;}

.link01{height:30px;
	line-height:30px;
	margin:5px;
	padding:0 10px;
	text-align:center;
	font-size:12px;
	float:right;
	background:rgba(0,113,187,1.00);}
	
.link01 a{display:block;
	color:rgba(255,255,255,1.00);}

.link01:hover{background:rgba(255,126,0,1.00);}

.link_inner01{width:940px;
	padding:10px;
	margin-top:5px;
	margin-bottom:10px;
	box-shadow:rgba(255,255,255,1.00) 0 0 0 1px inset;
	background:url(../img/bg/bg_filter2.png) repeat;
	overflow:hidden;}

.link_inner01 img{width:225px;
	margin:5px;
	float:left;}

.link_img:hover{opacity:0.7;}
/* menu_pc */
#menu_pc{width:960px;
	height:55px;
	margin:5px auto;
	background:rgba(0,0,0,0.70);
	overflow:hidden;}
	
.menu01{width:160px;
	height:55px;
	line-height:27px;
	font-size:12px;
	text-align:center;
	float:left;}

.menu_line{width:120px;
	height:1px;
	margin:0 auto;
	background:rgba(255,255,255,1.00);}

.menu01 a{color:rgba(255,255,255,1.00);
	display:block;}

.menu01:hover{background:rgba(255,255,255,0.20);}
	
.menu01:hover a{color:rgba(255,158,0,1.00);}

.menu01:hover .menu_line{background:rgba(255,158,0,1.00);}

/* footer */
#footer{width:100%;
	padding:20px 0 10px;
	background:rgba(0,0,0,1.00);}

.footer_inner{width:960px;
	margin:0 auto;
	overflow:hidden;}

/* ロゴサイズはヘッダー部に記述
.logo01{float:left;}

.logo01 img{height:50px;}

.logo_sub01{float:left;
	margin-left:15px;}

.logo_sub01 img{height:40px;
	margin-top:10px;}
 */

.footer_link01{width:700px;
	margin-left:25px;
	padding-top:10px;
	font-size:14px;
	color:rgba(255,255,255,1.00);
	line-height:20px;
	float:left;}

.footer_link01 a{color:rgba(255,255,255,1.00);}

.footer_link01 a:hover{color:rgba(255,158,0,1.00);}

.footer_link02{clear:both;
	width:100px;
	height:40px;
	margin:25px auto;
	overflow:hidden;}

.link_sns{height:40px;
	margin:0 5px;
	float:left;}

.link_sns img{width:40px;
	height:40px;}
	
.link_sns img:hover{opacity:0.7;}

.copyright{clear:both;
	width:100%;
	text-align:center;
	color:rgba(255,255,255,1.00);
	font-size:12px;}
/* gotop */
.gotop{width:60px;
	height:60px;
	color:rgba(255,255,255,1.00);
	text-align:center;
	font-size:12px;
	background: linear-gradient(#000000, #999999);
	background:-webkit-gradient(linear, top, bottom, from(#000000) , to(#999999));
	border:rgba(255,255,255,1.00) solid 1px;
	border-radius:5px;
	position:fixed; bottom:10px; right:10px;
	z-index:3;}

.gotop:hover{opacity:0.7;}

.gotop_bar_left{width:21px;
	height:2px;
	position:absolute; top:20px; left:12px;
	-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
	background:rgba(255,255,255,1.00);}
	
.gotop_bar_right{width:21px;
	height:2px;
	position:absolute; top:20px; right:12px;
	-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
	background:rgba(255,255,255,1.00);}

.gotop_text{width:60px;
	position:absolute; top:40px;
	text-align:center;}








@media screen and ( max-width:736px )
{
html,body{overflow-x:hidden;}

img{max-width:100%;}

.pc{display: none;}
.sp{display: block;}

#menu_pc{width:0;
	height:0;
	display:none;}

.drawer-menu{display:block;}

/* drawer menu */

.drawer-menu {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    padding: 20px 0 70px;
    background: #222;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    /*-webkit-transform: perspective(500px) rotateY(90deg);
    transform: perspective(500px) rotateY(90deg);*/
	overflow-y:scroll;
    opacity: 1;
	z-index:1;
}

.drawer-menu li {
    text-align: left;
	padding-left:20px;
}

.menu_head{font-size:28px;
	padding-bottom:10px;
	color:rgba(255,255,255,0.50);
	border-bottom:rgba(255,255,255,0.50) solid 1px;}

.drawer-menu li a {
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    -webkit-transition: all .8s;
    transition: all .8s;
}

/*.drawer-menu li a:hover {
    color: #1a1e24;
    background: #fff;
}*/

/* checkbox */
.check {
    display: none;
}

/* menu button - label tag */
.menu-btn {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: block;
    width: 40px;
    height: 40px;
	padding:10px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
	background: linear-gradient(#000000, #999999);
	background:-webkit-gradient(linear, top, bottom, from(#000000) , to(#999999));
	border:rgba(255,255,255,1.00) solid 1px;
	border-radius:5px;
    z-index: 9;
}

.bar {
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    width: 40px;
    height: 2px;
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

.bar.middle {
    top: 24px;
    opacity: 1;
}

.bar.bottom {
    top: 38px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.menu-btn_text {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: block;
    visibility: visible;
    opacity: 1;
}

.menu-btn:hover .bar {
    background:rgba(255,255,255,1.00);
}

.menu-btn:hover .menu-btn__text {
    color:rgba(255,255,255,1.00);
}

.close-menu {
    position: fixed;
    top: 0;
    left: 250px;
    width: 100%;
    height: 100vh;
    /*background: rgba(0,0,0,0);
    cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;*/
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    visibility: hidden;
    opacity: 0;
}

/* checked */
.check:checked ~ .drawer-menu {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    left: 0;
	opacity: 1;
    z-index: 0;
}

.check:checked ~ .container {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
}

.check:checked ~ .menu-btn .menu-btn__text {
    visibility: hidden;
    opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
    width: 44px;
	top:10px;
	left:15px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
    opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
    width: 44px;
    top: 41px;
	left:15px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    background: rgba(0,0,0,0);
    visibility: visible;
    opacity: 1;
    z-index: 3;
}

/* container */
.container {width: 100%;
	min-width:0;
    padding: 0;
    margin: 0;
	position:relative;
	z-index:2;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

/* header */
#header{}

.header_inner{width:100%;}

.logo01{margin-left:10px;}

.about_bg_data,.about_bg_img,.sf_bg_data{margin:0 1px 0 0;}

.about_bg01{display:none;}

.about_bg01_sf{border:rgba(246,146,30,1.00) solid 1px;
	color:rgba(246,146,30,1.00);
	line-height:50px;
	margin:5px 10px;
	padding:0 3px 0 3px;
	display:block;
	border-radius:5px;
	cursor:pointer;}

.sf_bg_data{clear:both;
	width:100%;
	height:50px;
	padding:10px 3px;
	background:rgba(69,69,69,1.00);
	display:none;}

.pc_bg_data{display:none;}

.about_bg_img,.sf_bg_data{margin:0;}

.about_bg_img{width:50px;
	height:50px;}

.about_bg_data{font-size:8px;}

/* main */
#main{width:100%;
	max-width:480px;
	margin:0 auto;
	text-align:left;}

.block01{width:95%;
	margin:10px auto;}

.link01:hover{background:rgba(0,113,187,1.00);}

.link_inner01{width:100%;
	padding:5px 0;
	margin-top:5px;
	margin-bottom:10px;
	box-shadow:rgba(255,255,255,1.00) 0 0 0 1px inset;
	background:rgba(0,0,0,0.40);}

.link_inner01 img{width:46%;
	margin:5px 2%;}

.link_img:hover{opacity:1.0;}

.gotop:hover{opacity:1;}

/* foter */
#footer{width:100%;
	padding-bottom:80px;}

.footer_inner{width:95%;
	text-align:center;}
	
.footer_inner .logo01{float:none;}

.footer_link01{display:none;}

.link_sns img:hover{opacity:1.0;}

}

/* font */

.fs14{font-size:14px;}

.fs16{font-size:16px;}

.fs18{font-size:18px;}

.fs22{font-size:22px;}