@charset "UTF-8";
/* CSS basic1 v1.0 */

section,article,aside,nav,hgroup,header,footer{display: block;}

/* Reset-------------------------------------------------------------- */

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}

ul,ol{
list-style: none;
}

table{
border-collapse: collapse;
border-spacing: 0;
}

.clear{
clear: both;
line-height: 0;
}

a{
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;
}

a:hover{
	color: #f93;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;
}

a:hover img{
	filter:Alpha(0.8);
	opacity: 0.8;
}

body {
font: 100% "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
background: #E5EFFF;
}

noscript{
	color:#fff;
}

#wrapper{
width: 980px;
margin: 0 auto;
background: url(../images/wrap_bg_gr.png) repeat-y #E5EFFF;
}

header{
position: relative;
width: 960px;
height: 185px;
margin: 0 10px;
padding: 0;
background: url(../images/header_bg2.png) no-repeat 0 0 #fff;
}

header h1{
	position: relative; top:25px; left:0;
	display: block;
	width: 240px;
	height: 60px;
	overflow: hidden;
	font-size: 0.9em;
}

header a{
}

header h1 span{
	position: absolute; top:0; left: 0;
	display: block;
	width: 240px;
	height: 60px;
	background: url(../images/kyowa_logo.png) no-repeat 0 0;
}

/*-- nav --*/

nav{
position:absolute; top: 100px;
width: 960px;
padding: 0;
height: 60px;
}

nav ul{
display: list-item;
}

nav > ul{
height: 25px;
padding: 0;
}

nav li{ /*リストの1段目*/
float: left;
width: auto;
height: 20px;
padding: 5px 0px 0px 27px;
text-align: center;
font-size: 17px;
font-weight: normal;
letter-spacing: 0.05em;
}

nav li a{
text-decoration: none;
-moz-transition: color 0.5s;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
color: #fff;
}

nav li a:hover{
color: #693;
}

nav ul ul{ /*2段目以降*/
display: none;
position: absolute;
margin: 0 0 0 0;
background: #360;
}

nav li li{ /*2段目以降のリスト項目*/
clear: left;
position:relative;
background: rgba(0,0,0,0.1);
}

nav ul ul ul{ /*3段目以降*/
top: 0;
left: 100%;
margin: 0;
}

nav ul li:hover > ul{
display: block;
}

nav li{
	display: block;
	margin: 0;
	padding:0;
}

nav li.home {
	position: relative; top:0; left: 0;
	width: 192px;
	height: 60px;
}

nav li.home span{
	position: absolute; top:0; left:0;
	width: 192px;
	height: 60px;
	background: url(../images/nav.png) no-repeat 0 0;
}

nav li.home a:hover span{
	background: url(../images/nav.png) no-repeat 0 -60px;
}

nav li.katarai{
	position: relative; top:0; left: 0;
	width: 192px;
	height: 60px;
}

nav li.katarai span{
	position: absolute; top:0; left:0;
	width: 192px;
	height: 60px;
	background: url(../images/nav.png) no-repeat -192px 0;
}

nav li.katarai a:hover span{
	background: url(../images/nav.png) no-repeat -192px -60px;
}

nav li.aming{
	position: relative; top:0; left: 0;
	width: 192px;
	height: 60px;
}

nav li.aming span{
	position: absolute; top:0; left:0;
	width: 192px;
	height: 60px;
	background: url(../images/nav.png) no-repeat -384px 0;
}

nav li.aming a:hover span{
	background: url(../images/nav.png) no-repeat -384px -60px;
}
	
nav li.about{
	position: relative; top:0; left: 0;
	width: 192px;
	height: 60px;
}

nav li.about span{
	position: absolute; top:0; left:0;
	width: 192px;
	height: 60px;
	background: url(../images/nav.png) no-repeat -576px 0;
}

nav li.about a:hover span{
	background: url(../images/nav.png) no-repeat -576px -60px;
}

nav li.contact{
	position: relative; top:0; left: 0;
	width: 192px;
	height: 60px;
}

nav li.contact span{
	position: absolute; top:0; left:0;
	width: 192px;
	height: 60px;
	background: url(../images/nav.png) no-repeat -768px 0;
}

nav li.contact a:hover span{
		background: url(../images/nav.png) no-repeat -768px -60px;
}

/*-- utilityNav --*/

.utilityNav{
	display: block;
position: absolute; top: 10px; right:10px;
font-size: 13px;
}

/*text resizer*/

.textresize{
	position: absolute; top:92px; right:226px;
	width: 200px;
	height: 20px;
}

.textresize p{
	float: left;
	margin: 0 7px 0 0;
	padding: 3px 0 0 0;
}

.textresize ul.textresizer{
}

.textresize ul.textresizer li {
	float: left;
}

.textresize ul.textresizer li a{
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 2px 0 0;
	padding: 0;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	border: 1px solid #aaa;
	border-radius: 2px;
	background: url(../images/textsixze_li_bg.jpg) no-repeat 0 0;
	color: #369;
}

.content_box{
width: 960px;
padding: 0px 10px 0 10px;
background: url(../images/wrap_bg_gr.png) repeat-y #fff;
}
	
.side{
float: left;
display: block;
width: 192px;
margin: 0;
padding: 0;
}

.side a{
	text-decoration: none;
	color: #fff;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;
}

.side a:hover{
	color: #f93;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;
}

.side #box1{
	margin: 0 0 7px 0;
	background: url(../images/side_bg1.pg) repeat 0 0 #4c8f00;;
}

.side #box1 h2{
	margin: 0;
	padding: 0;
}

.side #box1 img{
	margin: 0;
}

.side #box1 ul{
	margin: 0;
}

.side #box1 li{
	display: block;
	margin: 0;
	padding: 9px 0 7px 10px;
	border-top: 1px solid #9C6;
	font-size: 14px;
	background: url(../images/side_li_bg.pg) repeat-x 0 0 #6DA400;
	color: #fff;
}

.side #box1 li:before{
	content:"■ ";
	position: relative; bottom: 2px;
	padding: 0 0.5em 0 0;
	font-size: 10px;
	color: #9C9;
}

.side #box1 li:last-child{
	border-bottom: 1px solid #9c6;
}

.side #box1 li ul{
	display: block;
	margin: 5px 0 0 0;
}

.side #box1 li ul li{
	display: block;
	height: 20px;
	margin: 0 0 0 0;
	padding: 5px 0 3px 0px;
	font-size: 14px;
	font-weight: normal;
	background: none;
}

.side #box1 ul li li:before{
	content:"?";
}

.side #box2{
	margin: 0 0 3px 0;
	padding: 0 0 7px 0;
	background: url(../images/side_bg2.pg) repeat 0 0 #0F6FE3;
}

.side #box2 img{
	margin: 0;
}

.side #box2 ul{
	margin: 0;
}

.side #box2 li{
	display: block;
	margin: 0 0 0 0px;
	padding: 9px 0 7px 10px;
	border-top: 1px solid #9CF;
	font-size: 14px;
	background: url(../images/side_li_bg.pg) repeat-x 0 0 #4A94EB;
	color: #fff;
}

.side #box2 li:before{
	content:"■ ";
	position: relative; bottom: 2px;
	padding: 0 0.5em 0 0;
	font-size: 10px;
	color: #fff;
}

.side #box2 li:last-child{
	border-bottom: 1px  #2e559f;
}

.side #box2 li ul{
	display: block;
	margin: 15px 0 0 0;
}

.side #box2 li ul li{
	display: block;
	height: 20px;
	margin: 0 0 0 0;
	padding: 5px 0 3px 5px;
	font-size: 14px;
	font-weight: normal;
	background: none;
}

.side #box2 ul li li:before{
	content:"?";
	color: #9cf;
}

.side #box3{
	margin: 20px 0 0 0;
	padding: 0 0 20px 0;
}

.side #box3 h2{
	padding: 9px 0 7px 0;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	background: #8DC2FE;
	color: #333;
}

.side #box3 ul{
	margin: 5px 0 0 0;
}

.side #box3 li{
	margin: 0;
	padding: 9px 0 7px 10px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	background: url(../images/side_li_bg.png) repeat-x 0 0;
	color: #333;
}

.side #box3 li a{
	color: #333;
}

.side #box3 li:before{
	content:"■ ";
	position: relative; bottom: 2px;
	padding: 0 0.5em 0 0;
	font-size: 10px;
	color: #9CF;
}
	
.side #box3 li li{
	display: none;
	height: 1.5em;
	background: none;
}

#mainContent{
	width: 768px;
	margin: 0 0 0 192px;
}

#mainContent p{
	padding: 1em 0.5em;
	line-height: 1.5em;
}

footer{
height: 50px;
margin: 20px 0 0 0;
padding: 20px 0 15px 0;
text-align: center;
background: url(../images/footer_bg.jpg) repeat-x 0 0;
}

footer p{
	font-size: 14px;
	color: #f8f8f8;
}

footer p a{
	text-decoration: none;
	color: #fff;
}

.copy{
	display: block;
	margin: 1em 0 0 0;
	text-align: center;
	font-size: 12px;
	color: #fff;
}

.pagecontrol{
	margin: 20px 0 0 0;
	text-align: center;
	font-size: 14px;
}

.pagecontrol p{
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
}

.pagecontrol span a{
	display: inline-block;
	margin: 0 0.3em;
	padding: 0.5em 0.7em;
	line-height: 1;
	border: 1px solid #ccc;
	background: #069;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

.gr span a{
	background: #4A8E00;
}

.pagecontrol span a:hover{
	color: #f90;
}

.pagecontrol span.active{
	display: inline-block;
	margin: 0 0.3em;
	padding: 0.5em 0.7em;
	line-height: 1;
	border: 1px solid #ccc;
	background: #ccc;
	font-weight: bold;
	font-size: 14px;
	color: #666;
}

p.to_top{
	border: none;
	text-align: right;
}

.center{
	text-align: center;
}

.red{
	color: #c00;
}

iframe{
	margin: 20px 0 0 10px;
}



.socialButtons {
    overflow: hidden;
}
.socialButtons li {
    display:inline-block;
    vertical-align:top;
    margin-right: 4px;
}
.socialButtons iframe {
    margin: 0 !important;
}