@charset "utf-8";

/********* HTML再定義 ***********************************************/

*{
	margin: 0;
	padding: 0;
}
body{
	text-align: center;
	margin: 0 auto;
	padding: 0;
	font-size: 14px;
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: #222;
	letter-spacing: 0.06em;
}
.sp{
	clear: both;
}
object,img {  
	vertical-align: middle;
	border: 0;
	padding: 0;
	margin: 0;
}
a{
	color: #09C;	
}
a:hover{
	color: #F60;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */
.clearfix:after,#nav:after,#footer:after {
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
p{
	text-align: left;
}
ul{
	clear: both;
}
li img{
	line-height: 0;
}
.area {
    clear: both;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
}
h2, h3, h4, h5, h6 {
	font-size: 120%;
}
h2 {
	margin: 15px 0;
	padding: 5px 0;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	font-weight: bold;
}

/********* 全体 *****************************************************/

div#container  {
	max-width: 1080px;
	*width: 1080px;
	_width: 1080px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}
div#container  p {
	line-height: 180%;
}

/********* ヘッダー *************************************************/

.title {
	width: 100%;
	background-image: url(https://www.usio.ed.jp/images/tit-bg.png);
	margin: 0;
	padding: 0;
}
.title h1 {
	max-width: 1080px;
	*width: 1080px;
	_width: 1080px;
	margin: 0 auto;
	padding: 40px 0px;
	text-align: left;
}
.title h1 img {
	margin: 0;
	padding: 0;
}

/* navigation */
.clearfix:after,#head-info:after,#navigation:after,#main-nav:after {
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
ul#nav {
	max-width: 1080px;
	*max-width: 1090px;
	margin: 0 auto;
	padding: 0;
	*width: auto;
	z-index: 999;
}
#navigation {
	background-color: #FFF;
	width: 100%;
	z-index: 9999 !important;
	background-image: url(https://www.usio.ed.jp/images/header-bg.png);
	background-position: bottom center;
	background-repeat: no-repeat;
}
#main-nav {
	max-width: 1080px;
	*width: 1080px;
	_width: 1080px;
	position: relative;
	margin: 14px auto;
}
#head-info {
	max-width: 1080px;
	*width: 1080px;
	_width: 1080px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	max-height: 56px;
}
#head-logo {
	z-index: 200;
	width: 40%;
	float: left;
	text-align: left;
}
#head-nav {
	z-index: 200;
	width: 60%;
	float: right;
	text-align: right;
	padding-top: 8px;
	position: relative;
}
#head-nav ul {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
}
#head-nav li {
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav{
	list-style-type: none;
	max-width: 1080px;
	height: auto\9;
	margin: 0;
	padding: 0;
	float: right;
}
#nav li{
	position: relative;
	display: block;
	width: 180px;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#nav li.home {
	display: none;
}
#nav li a{
	display: block;
	margin: 0;
	color: #000;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}
#nav li a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)"; /* IE 8 */
	-khtml-opacity: .80; /* Safari 1.x */
}
#nav li a:hover {
	background-color: #FFFFE8;
	background-color: rgba(255,255,232,0.8);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); /* IE8以下*/
}
#nav li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	width: 180px;
}
#nav li:last-child ul{
	left: -100%;
	width: 100%
}
#nav li ul li{
	overflow: hidden;
	width: 100%;
	height: 0;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
	z-index: 300;
	*height: auto;
}
#nav li ul li a,#nav li:hover ul li a{
	padding: 16px 0px;
	font-weight: normal;
	width: 100%;
	border-bottom: 1px solid #CCC;
}
#nav li:hover ul li a:hover {
	padding: 16px 0px;
	background-color: #55BF64;
	color: #FFF;
}
#nav li ul li a:hover {
	color: #000;
	padding: 0;
}
#nav li:hover > a{
	color: #000;
}
#nav > li:hover > a{
	color: #000;
}
#nav li:hover ul li{
	height: inherit;
}
#nav li:hover ul li:first-child{
	border-top: 1px solid #CCC;
}
#toggle {
	display: none;
}
#navigation-sticky-wrapper {
	*width: 1090px;
	*margin: 0 auto;
	*position: relative;
	max-height: 145px;
}
.is-sticky #navigation {
	border-bottom: 1px solid #DDD;
	*left: 0;
}
#main-nav #logo {
	display: none;
}
#main-nav #head-nav02 {
	display: none;
}
#nav li.sp-list {
	display: none;
}

/********* フッター *************************************************/

#pagetop {
	display: block;
	text-align: right;
	max-width: 1080px;
	*width: 1080px;
	_width: 1080px;
	margin: 0 auto;
	padding: 16px 0px;
}
#footer {
	width: 100%;
	background-color: #FD2E28;
	padding: 26px 0px;
}
#footer .info {
	float: left;
	color: #FFF;
	width: 65%;
}
#footer .info p {
	margin: 0;
}
#footer .info .img-left {
	float: left;
	margin-right: 24px;
}
#footer .y-blog {
	float: right;
	text-align: right;
}
.cr {
	font-size: 12px;
	padding: 6px 0px;
	margin: 0 auto;
}

/********* メニュー *************************************************/

div#menu {
	background-color: #666666;
	margin-top: 40px;
}
div#menu h2 {
	display: none;
}
div#menu ul {
	margin: 0;
	padding: 5px 10px;
}
div#menu ul li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}

div#menu a:link, div#menu a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
div#menu a:active, div#menu a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

/********* 内容 *****************************************************/

div#content {
	float: left;
	width: 100%;
	max-width: 800px;
	*width: 800px;
	_width: 800px;
}

/********* エントリー ***********************************************/

div#entry h2 {
	display: none;
}
div#entry div.entry {
	width: 100%;
	max-width: 800px;
	*width: 800px;
	_width: 800px;
	margin: 15px 0;
}
div#entry div.entry h3 {
	display: block;
	text-align: left;
	background-image: url(https://www.usio.ed.jp/images/circle.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 28px;
	color: #300;
	font-size: 180%;
	margin: 20px 0px 12px 0px;
	padding-bottom: 12px;
	border-bottom: 1px dotted #999;
}
div#entry div.entry h3 a:link, div#entry div.entry h3 a:visited {
	color: #300;
	text-decoration: none;
}
div#entry div.entry h3 a:active, div#entry div.entry h3 a:hover {
	color: #300;
	text-decoration: none;
}
div#entry div.entry div.content {
	margin: 0 10px;
}
div#entry div.entry ul.information {
	margin: 2px 10px 15px 10px;
	padding-top: 10px;
	font-size: 90%;
}
div#entry div.entry ul.information li {
	display: inline;
	margin-right: 5px;
}
div#entry div.entry ul.link {
	margin: 0;
	padding: 10px;
	text-align: right;
}
div#entry div.entry ul.link li {
	display: inline;
	margin-left: 5px;
}

div#entry div#entry_link h3 {
	display: none;
}
div#entry div#entry_link ul.entry_link {
	margin: 0;
	text-align: center;
}
div#entry div#entry_link ul.entry_link li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}
div#entry div#entry_link ul.entry_link li.home {
	padding-right: 10px;
	padding-left: 10px;
	border-right: 1px solid #999999;
	border-left: 1px solid #999999;
}
div#entry div#entry_link ul.entry_link li.previous:before {
	content: "<< ";
}
div#entry div#entry_link ul.entry_link li.next:after {
	content: " >>";
}

/********* ページ移動 ***********************************************/

div#page h2 {
	display: none;
}
div#page ul.order {
	margin: 10px 0;
}
div#page ul.order li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}
div#page ul.direct {
	margin: 10px 0;
	text-align: right;
}
div#page ul.direct li {
	display: inline;
	list-style: none;
	margin-left: 10px;
}

/********* コメント *************************************************/

div#comment div.comment ul.information {
	margin: 15px 0 0 0;
	text-align: right;
}
div#comment div.comment ul.information li {
	display: inline;
	margin-left: 5px;
}

/********* トラックバック *******************************************/

div#trackback div.trackback ul.information {
	margin: 15px 0 0 0;
	text-align: right;
}
div#trackback div.trackback ul.information li {
	display: inline;
	margin-left: 5px;
}

/********* インフォメーション ***************************************/

div#information {
	margin-bottom: 30px;
}
div#information ul.continue {
	margin: 0;
	text-align: right;
}
div#information ul.continue li {
	display: inline;
}

/********* ユーティリティ *******************************************/

div#utility {
	float: right;
	width: 240px;
	margin-left: 10px;
	margin-bottom: 20px;
}
div#utility h2 {
	display: none;
}
div#utility div.utility {
	margin: 15px 0;
	padding-bottom: 10px;
	background-color: #EEEEEE;
}
div#utility div.utility h3 {
	padding: 10px 10px 0 10px;
}
div#utility div.utility div.content {
	margin: 0 10px;
}
div#utility div.utility ul {
	margin-right: 0;
	text-align: left;
}
div#utility div.utility ul li ul {
	margin-top: 0;
	margin-bottom: 0;
}
div#utility div.utility form {
	margin: 0;
}
div#utility div.utility form dl {
	margin: 0;
}
div#utility div.utility form dl dt {
	display: none;
}
div#utility div.utility form dl dd {
	margin: 0;
}
div#utility div.utility form dl dd input {
	width: 170px;
}
div#utility div.utility form p {
	margin: 0 0 10px 0;
}

div#utility div.utility table.calender {
	margin: 0 auto;
	border: 0px solid #000000;
}
div#utility div.utility table.calender tr th, table.calender tr td {
	padding: 5px;
	border: 0px solid #000000;
	background-color: #EEEEEE;
	font-weight: normal;
	text-align: center;
}
div#utility div.utility table.calender tr td span.day {
	color: #222222;
}
div#utility div.utility table.calender tr td span.satday {
	color: #2222CC;
}
div#utility div.utility table.calender tr td span.sunday {
	color: #CC2222;
}
div#utility div.utility ul.calender {
	margin: 10px 0;
	text-align: center;
}
div#utility div.utility ul.calender li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}

div#utility div.utility ul.gallery {
	margin: 0;
	padding: 0;
}
div#utility div.utility ul.gallery li {
	list-style: none;
}
div#utility div.utility ul.gallery li img {
	max-width: 180px;
	max-height: 130px;
	margin-bottom: 5px;
}

/********* ギャラリー ***********************************************/

div#gallery {
	overflow: hidden;
}
div#gallery div.gallery {
	float: left;
	margin-right: 12px;
	margin-bottom: 20px;
}
div#gallery div.gallery p.picture {
	overflow: hidden;
	width: 140px;
	height: 100px;
	margin: 0;
}
div#gallery div.gallery p.picture a {
	color: #FFFFFF;
	text-decoration: none;
}
div#gallery div.gallery p.picture a img {
	min-width: 140px;
	min-height: 100px;
}
div#gallery div.gallery p.picture a span.empty {
	display: block;
	line-height: 100px;
	width: 140px;
	height: 100px;
	background-color: #AAAAAA;
	text-align: center;
}
div#gallery div.gallery p.comment {
	overflow: hidden;
	width: 140px;
	margin: 3px 0 0;
	font-size: 80%;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div#gallery ul {
	margin: 10px 0 20px 0;
}
div#gallery ul li {
	display: inline;
}
div#gallery ul li img {
	margin: 0 2px 10px 0;
}

/********* 個別指定 *************************************************/

div#page_link ul.page_link {
	margin: 0 0 20px 0;
}
div#page_link ul.page_link li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}
div#page_link ul.page_link li.home {
	padding-right: 10px;
	padding-left: 10px;
	border-right: 1px solid #999999;
	border-left: 1px solid #999999;
}
div#page_link ul.page_link li.previous:before {
	content: "<< ";
}
div#page_link ul.page_link li.next:after {
	content: " >>";
}

ul.link {
	margin: 0;
	padding: 10px;
	text-align: right;
}
ul.link li {
	display: inline;
	margin-left: 5px;
}
.tit-category {
	margin: 20px auto;
	background-color: #FF2D29;
	font-size: 140%;
	padding: 14px 0px;
	color: #FFF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	font-weight: bold;
	text-align: center;
}

/********* レスポンシブ *********************************************/

@media screen and (max-width:1080px){
	#nav {
		display: none;
	}
	#nav li {
		width: 100%;
		float: none;
		position: static;
		background-color: #FFF;
	}
	#nav li ul {
		position: inherit;
		width: 100%;
	}
	#nav li ul li {
		height: auto;
		text-align: center;
	}
	#nav li:hover ul li{
		height: auto;
	}
	#nav li ul li a:hover {
		color: #444;
		border: none;
	}
	#nav li a,#nav li ul li a,#nav li ul li a:hover {
		border-bottom: 1px solid #CCC;
		font-size: 14px;
		text-align: center;
		padding: 10px 0px;
	}
	#nav li a:hover,#nav li ul li a:hover {
		background-color: #D00;
		color: #FFF;
	}
	#nav li a.about {
		display: none;
		border-bottom: none;
	}
	#head-info {
		display: none;
	}
	#main-nav {
		background-color: #FFF;
		min-height: 68px;
		margin: 0 auto;
	}
	#main-nav #logo {
		position: absolute;
		left: 0;
		top: 2px;
		z-index: 200;
		display: inline-block;
		width: 42%;
		text-align: left;
	}
	#toggle {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 18%;
		background: #FD2E28;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 22px 0 22px 36px;
		color:#FFF;
		text-align: center;
		text-decoration: none;
		font-size: 18px;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 5px;
		background: #FD2E28;
	}
	#toggle a:before {
		margin-top:-8px;
	}
	#toggle a:after {
		margin-top: 4px;
	}
	ul#nav {
		top: 68px;
		position: absolute;
		width: 100%;
		z-index: 300;
		margin-left: 0px;
		border-top: 1px solid #CCC;
	}
    ul#nav li a:before {
        content:attr(data-label);
    }
    ul#nav li img {
        display:none;
    }
	#nav li:hover ul li:first-child{
		border-top: none;
	}
	#nav li:hover ul li{
		line-height: normal;
		height: auto;
		border-bottom: none;
	}
	#nav li ul li a,#nav li:hover ul li a{
		padding: 10px 0px;
	}
	#nav li:hover ul li a:hover {
		padding: 10px 0px;
	}
	#navigation {
		height: auto;
		background-image: none;
	}
	#main-nav #head-nav02 {
		display: inline-block;
		float: none;
		margin-left: 18%;
		padding-top: 7px;
		text-align: left;
		width: 32%;
		z-index: 200;
	}
	#main-nav #head-nav02 ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#main-nav #head-nav02 ul li {
		width: 22%;
		margin: 0px 1%;
		float: left;
		list-style-type: none;
	}
	#navigation-sticky-wrapper {
		max-height: 56px;
	}
}
@media screen and (max-width:1079px){
	img{
		display: inline;
		max-width: 100%;
		height: auto;
		width /***/:auto;
	}
	#footer .y-blog {
		margin-right: 1%;
	}
	div#container {
		max-width: 98%;
		margin: auto;
	}
	div#content {
		float: none;
		width: 100%;
		max-width: none;
	}
	div#entry div.entry {
		width: 100%;
		border-right: 0;
		border-left: 0;
		max-width: none;
	}
	div#utility {
		float: none;
		width: 100%;
		margin: 0;
	}
}
@media screen and (max-width:960px){
	#footer .info {
		float: none;
		display: inline-block;
		width: 74%;
		text-align: left;
		font-size: 90%;
	}
	#footer .y-blog {
		float: none;
		display: inline-block;
		width: 23%;
		margin-right: 1%;
		text-align: right;
	}
}
@media screen and (max-width:900px){
	#footer .info {
		display: block;
		text-align: left;
		width: 100%;
		font-size: 100%;
	}
	#footer .info .img-left {
		margin-left: 12px;
	}
	#footer .y-blog {
		display: block;
		text-align: center;
		padding-top: 8px;
		margin-right: 0px;
		width: 100%;
	}
	#main-nav #head-nav02 {
		padding-top: 1.2%;
	}
	#main-nav #logo {
		padding-top: 0.4%;
	}
}
@media screen and (max-width:780px){
	#main-nav #logo {
		width: 70%;
	}
	#toggle {
		width: 24%;
	}
	#main-nav #head-nav02 {
		display: none;
	}
	#nav li.sp-list {
		display: inherit;
	}
	#nav li a, #nav li ul li a, #nav li ul li a:hover {
		padding: 8px 0px;
	}
}
@media screen and (max-width:680px){
	#main-nav #logo {
		width: 100%;
		text-align: center;
		padding-top: 0px;
		top: 0;
	}
	#main-nav #logo img {
		max-height: 48px;
	}
	#toggle {
		width: 100%;
		top: 50px;
	}
	#toggle a {
		padding: 14px 0px;
	}
	#main-nav {
		min-height: 102px;
	}
	ul#nav {
		top: 101px;
	}
	#navigation-sticky-wrapper {
		max-height: 103px;
	}
}
@media screen and (max-width:640px){
	#footer .info .img-left {
		margin: 0 auto 14px auto;
		float: none;
		display: block;
	}
	#footer .info p {
		margin: auto;
		width: 86%;
	}
	.cr {
		font-size: 75%;
		letter-spacing: normal;
		margin: auto;
		width: 96%;
	}
	div#container p {
		margin: auto;
		width: 98%;
	}
}
@media screen and (max-width:480px){
	#footer .info p {
		font-size: 80%;
		margin: auto;
		width: 94%;
		letter-spacing: normal;
	}
	#pagetop {
		text-align: center;		
	}
	#nav li a, #nav li ul li a, #nav li ul li a:hover {
		font-size: 86%;
		padding: 1.4% 0px;
	}
	.tit-category {
		text-align: left;
		padding-left: 6px;
	}
}


/********* IE6用設定 ************************************************/

* html pre {
	width: 100%;
}
* html table tr th, * html table tr td {
	font-size: 80%;
}