@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption {
	border: 0;
	font-family: inherit;
	font-size: 13px;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	border-color:inherit;
	line-height: 1.3em;
	color : #999999;
	box-sizing: border-box;
}
table, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 10px;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	border-color:inherit;
	line-height: 1.3em;
	color : #404040;
	box-sizing: border-box;
}

body{
	background-color: #000000 ;
	font-family : "Arial";
	}
#main{
	background-repeat: no-repeat;
	background-position: center top;
	min-height : 1200px;
	width : 924px;
	margin : 0 auto;
/*	background-image: url( "./@@bg.gif")  ;*/
}

.cm_idx,
.cm_technology,
.cm_contact
{
	background-image: url( "./bg1.png")  ;
}

.cm_martial_arts{
	background-image: url( "./bg2.png")  ;
}

#contents_main{
	position :relative;
	background-repeat: no-repeat;
	background-position: center top;
	height : 1032px;
}

#header,#footer{
	height : 84px;
	width :100%;
}

#footer{
	padding-top : 10px;
}
#footer .company{
	color: #b2b2b2;
	font-weight: bold;
	font-size : 12px;
}

#footer .addr{
	color: #808080;
	font-size : 12px;
}

#footer .copyright{
	float:right;
}

.mainmenu{
	background-repeat: no-repeat;
	background-position: left center;
	height : 20px;
	width : 130px;
	display : inline-block;
	margin-right : 14px;
	margin-top: 64px;
	cursor:pointer;
}

.mainmenu.on{
	cursor:default;
}

#m_technology{
	background-image: url( "./m_TECHNOLOGY.png")  ;
}
#m_technology.on,
#m_technology:hover{
	background-image: url( "./m_TECHNOLOGY_.png")  ;
}

#m_martial_arts{
	background-image: url( "./m_MARTIAL_ARTS.png")  ;
}
#m_martial_arts.on,
#m_martial_arts:hover{
	background-image: url( "./m_MARTIAL_ARTS_.png")  ;
}

#m_contact{
	background-image: url( "./m_CONTACT.png")  ;
}
#m_contact.on,
#m_contact:hover{
	background-image: url( "./m_CONTACT_.png")  ;
}

#logo{
	background-repeat: no-repeat;
	background-position: left center;
	width : 124px;
	height : 33px;
	
	position:absolute;
	right : 26px;
	top: 16px;
	background-image: url( "./logo.png")  ;
	
}

#knowing{
	background-repeat: no-repeat;
	background-position: left center;
	width : 140px;
	height :323px;
	
	position:absolute;
	right : 52px;
	top: 80px;
	background-image: url( "./knowing.png");
}

#desc{
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url( "./desc.png");
	width : 269px;
	height :154px;
	position:absolute;
	right : 10px;
	top: 425px;
	opacity: 0;
}

/* 武～アニメーション(ここから) -----------------------------------------------------*/
.desc_in {
	animation : kf_desc_in 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-moz-animation: kf_desc_in 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-webkit-animation: kf_desc_in 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-o-animation: kf_desc_in 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-ms-animation: kf_desc_in 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
}

@-moz-keyframes kf_desc_in {
	0% {top: 0 ; opacity: 0 ; display:block;}
	100% {top: 425px; opacity: 1}
}

@-webkit-keyframes kf_desc_in {
	0% {top: 0 ; opacity: 0 ; display:block;}
	100% {top: 425px; opacity: 1}
}

@-o-keyframes kf_desc_in {
	0% {top: 0 ; opacity: 0 ; display:block;}
	100% {top: 425px; opacity: 1}
}

@-ms-keyframes kf_desc_in {
	0% {top: 0 ; opacity: 0 ; display:block;}
	100% {top: 425px; opacity: 1}
}


.desc_out {
	animation : kf_desc_out 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-moz-animation: kf_desc_out 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-webkit-animation: kf_desc_out 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-o-animation: kf_desc_out 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-ms-animation: kf_desc_out 0.5s cubic-bezier(.31,.55,.76,.97) 1 forwards;
}

@-moz-keyframes kf_desc_out {
	0% {top: 425px; opacity: 1}
	100% {top: 0 ; opacity: 0 ; display:block;}
}

@-webkit-keyframes kf_desc_out {
	0% {top: 425px; opacity: 1}
	100% {top: 0 ; opacity: 0 ; display:block;}
}

@-o-keyframes kf_desc_out {
	0% {top: 425px; opacity: 1}
	100% {top: 0 ; opacity: 0 ; display:block;}
}

@-ms-keyframes kf_desc_out {
	0% {top: 425px; opacity: 1}
	100% {top: 0 ; opacity: 0 ; display:block;}
}
/* 武～アニメーション(ここまで) -----------------------------------------------------*/

.listset{
	position :absolute;
	top : 413px;
	left : 30px;
	text-align:center;
	opacity: 0;
	display:none;
}

.leaf{
	display :none;
}

ul.listmenu li{
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url( "./menu_bg.png");
	width : 189px;
	height : 30px;
	left : -1px;
}

ul.listmenu li:last-child{
	height : 31px;
}

ul.listmenu li.on,
ul.listmenu li:hover{
	color: #404040;
	background-image: url( "./menu_bg_.png");
}

.listset ul li{
	position :relative;
	display : block;
	list-style-type: none;
}

.listset >ul li ul {
	position :absolute;
	left : 189px;
	top  : 0;
}

.branch{
	width : 100%;
	height : 31px;
	display :inline-block;
	padding-top : 9px;
	cursor:pointer;
}

.on >.branch,
.branch:hover{
	color:#404040;
}

.listmenu{
	display : none;
}

.listmenu.on{
	display :block;
}


/* サブメニューアニメーション(ここから) -----------------------------------------------------*/
.listmenu_in {
	display:block;
	animation : kf_listmenu_in 0.25s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-moz-animation: kf_listmenu_in 0.25s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-webkit-animation: kf_listmenu_in 0.25s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-o-animation: kf_listmenu_in 0.25s cubic-bezier(.31,.55,.76,.97) 1 forwards;
	-ms-animation: kf_listmenu_in 0.25s cubic-bezier(.31,.55,.76,.97) 1 forwards;
}

@-moz-keyframes kf_listmenu_in {
	0% {top: 423px; left:20px; opacity: 0 ; display:block;}
	100% {top: 413px; left:30px; opacity: 1}
}

@-webkit-keyframes kf_listmenu_in {
	0% {top: 423px; left:20px; opacity: 0 ; display:block;}
	100% {top: 413px; left:30px; opacity: 1}
}

@-o-keyframes kf_listmenu_in {
	0% {top: 423px; left:20px; opacity: 0 ; display:block;}
	100% {top: 413px; left:30px; opacity: 1}
}

@-ms-keyframes kf_listmenu_in {
	0% {top: 423px; left:20px; opacity: 0 ; display:block;}
	100% {top: 413px; left:30px; opacity: 1}
}


.leaf_in {
	display:block;
	animation : kf_leaf_in 0.25s cubic-bezier(.5,.65,.82,1.06) 1 forwards;
	-moz-animation: kf_leaf_in 0.25s cubic-bezier(.5,.65,.82,1.06) 1 forwards;
	-webkit-animation: kf_leaf_in 0.25s cubic-bezier(.5,.65,.82,1.06) 1 forwards;
	-o-animation: kf_leaf_in 0.25s cubic-bezier(.5,.65,.82,1.06) 1 forwards;
	-ms-animation: kf_leaf_in 0.25s cubic-bezier(.5,.65,.82,1.06) 1 forwards;
}

@-moz-keyframes kf_leaf_in {
	0% { opacity: 0 ; display:block; width:0 ; height :0}
	100% {top: 413px; left:30px; opacity: 1; width:100% ; height :100%}
}

@-webkit-keyframes kf_leaf_in {
	0% { opacity: 0 ; display:block; width:0 ; height :0}
	100% {top: 413px; left:30px; opacity: 1; width:100% ; height :100%}
}

@-o-keyframes kf_leaf_in {
	0% { opacity: 0 ; display:block; width:0 ; height :0}
	100% {top: 413px; left:30px; opacity: 1; width:100% ; height :100%}
}

@-ms-keyframes kf_leaf_in {
	0% { opacity: 0 ; display:block; width:0 ; height :0}
	100% {top: 413px; left:30px; opacity: 1; width:100% ; height :100%}
}

/* サブメニューアニメーション(ここまで) -----------------------------------------------------*/
div#c_send_ok.listmenu_in,
div#c_contact.listmenu_in{
	opacity: 1;
	animation : none;
	text-align:left;
	-moz-animation : none;
	-webkit-animation : none;
	-o-animation : none;
	-ms-animation : none;
}

#c_contact{
	width : 243px;
	text-align:left;
	line-height : 1.65em;
}

.leaf{
	text-align:left;
	padding: 25px;
	background-color:#e6e6e6;
	color : #404040;
	width : 300px;
	border: 1px solid #575757;
	font-size: 11px;
	position:relative;
	left : 188px;
	top : -31px;
}


.leaf_close{
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url( "./close.png");
	width : 17px;
	height : 17px;
	position:absolute;
	top : 5px;
	right : 5px;
}
.leaf_close:hover{
	background-image: url( "./close_.png");
}

.txt_r{
	text-align:right;
}

input[name="email"],
input[name="name"],
textarea{
	width : 100%;
}

.send{
	padding : 8px;
	margin-top : 1em;
	background-color: #1f1f1f;
	display:inline-block;
	border: 1px solid #575757;
	width : 80px;
	text-align:center;
	
}
.send:hover {
	background-color: #e5e5e5;
	color: #404040;
}