@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
* {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

 ul {
	 list-style: none;
 }
 
a img {
	border: 0;
}

.cl-b {
	clear: both;
}

body{
	font:93%/1.5 "Lucida Sans Unicode", "Lucida Grande", Arial, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",sans-serif;
	color:#008080;
	background:#FFEEFF;
}



/* リンク設定
------------------------------------------------------------*/
a{
	margin:0;
	padding:0;
	text-decoration:none;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	font-size:100%;
	color:#666;
}

a:hover,
a:active{
	-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
	outline: none;
	color:#000080;
}


/**** Clearfix ****/
nav .panel:before,nav .panel:after, nav#mainNav:before,nav#mainNav:after, .newsTitle:before,.newsTitle:after, #footerInfo:before,#footerInfo:after{
	content: "";
	display: table;
}

nav .panel:after,nav#mainNav:after,.newsTitle:after,#footerInfo:after{
	clear: both;
}

nav .panel,nav#mainNav,.newsTitle,#footerInfo{
	zoom: 1;
}



/* レイアウト
------------------------------------------------------------*/
#wrapper, #header, .inner{
	margin: 0 auto;
	padding-bottom:10px;
	width: 960px;
}

#header{
	padding:10px 0;
}

#content{
	float:left;
	width:625px;
	line-height: 30px;
}

#sidebar{
	float:right;
	width:300px;
	padding-top:30px;
}

#footer{
	clear:both;
} 



/* ヘッダー
*****************************************************/
#header h1 a{
	padding:20px 10px;
	font-size:300%;
	font-weight:bold;
	color: #000080;
	text-shadow:5px -1px #fff;
}



/* トップナビゲーション
*****************************************************/
nav#mainNav{
	clear:both;
	margin-bottom:20px;
	background:url(images/navBg.png) repeat-x;
	position:relative;
}

.panel ul li{
	float: left;
	position: relative;
	height:66px;
	line-height:66px;
}

.panel ul li a{
	display: block;
	height:66px;
	text-align: center;
	color:#000080;
}

#searchHead input{
	margin-top:15px;
	line-height:30px;
}

#searchHead input.searchBox[type="text"]{
	vertical-align:top;
	width:140px;
}

nav div.panel{
	display:block !important;
	float:left;
}

a#menu{
	display:none;
}

.panel ul{
	width:960;
}

.panel ul li{
	margin:0 10px;
}

.panel ul li a span{
	margin: 0 10px 0 -5px;
	padding: 0 2px 0 20px;
	_position:relative; /*To fix IE6 problem (not displaying)*/
	float:left;
}

.panel ul li a:hover,
.panel ul li a:active {
	color:#fff;
	background: url(images/mainNav.png) no-repeat 100% 50%;
}

.panel ul li a:hover span,
.panel ul li a:active span {
	background: url(images/mainNav.png) no-repeat 0 50%;
}



.panel ul li li a:hover {
	color:#fff;
	background: #d06387;
	background: -moz-linear-gradient(top, #d06387 0%, #f386a4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d06387), color-stop(100%,#f386a4));
	background: -webkit-linear-gradient(top, #d06387 0%,#f386a4 100%);
	background: -o-linear-gradient(top, #d06387 0%,#f386a4 100%);
	background: -ms-linear-gradient(top, #d06387 0%,#f386a4 100%);
	background: linear-gradient(to bottom, #d06387 0%,#f386a4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d06387', endColorstr='#f386a4',GradientType=0 );
}





/* content
*****************************************************/
h2.title{
	clear:both;
	margin:30px 0 20px;
	padding:5px;
	line-height:33px;
	font-size:120%;
	font-weight:bold;
	border:1px solid #dadade;
	background:#fff url(images/headingBg.png) repeat-x 0 100%;
}

h2.title span {
	padding:6px 5px 6px 26px;
	color:#000080;
	background:url(images/span.png) no-repeat 0 50%;
}

.content p{
	font-size: 14px;
	line-height: 22px;
	text-align: justify;
	margin: 0 5px 15px;
	padding: 0 0 0 0;
}

#next {
	margin: 80px 0 50px 0;
}

#next h3{
	margin:10px 0;
	font-size:170%;
	font-weight:normal;
	color:#008080;
	border-bottom: 2px solid #999;
}

#next h4 {
	font-size: 150%;
	letter-spacing: 3px;
	margin: 0 0 0 30px;
}

#next h4 a {
	color:#000080;
}

#next h4 a:hover {
	color:#008080;
}

img.aligncenter {
	display: block;
	margin:5px auto;
	padding:4px;
	background:#fff;
	border:1px solid #ccc;
}

img.alignright,
img.alignleft{
	padding:4px;
	margin:0 0 2px 7px;
	display:inline;
	background:#fff;
	border:1px solid #ccc;
}

img.alignleft{
	margin: 0 7px 2px 0;
}

.alignright{
	float:right;
}

.alignleft{
	float: left;
}

#jo_link_list,
#pack_link_list {
	margin: 50px 0 20px;
	padding: 5px 5px;
}

#jo_link_list h3,
#pack_link_list h3 {
	font-size: 20px;
	margin: 0 0 15px 0;
	padding: 0 0 0 0;
}

#jo_link_list p,
#pack_link_list p {
	font-size: 13px;
	line-height: 140%;
	text-align: justify;
	margin: 0 10px 15px 10px;
	padding: 0 0 0 0;
}

#jo_link_list p a,
#pack_link_list p a {
	font-size: 15px;
}

#jo_link_list p a:hover,
#pack_link_list p a:hover {
	text-decoration: underline;
}



/* サイドバー
*****************************************************/
.newsTitle{
	margin:0 0 20px;
	padding:5px;
	line-height:33px;
	font-size:120%;
	border:1px solid #dadade;
	background:url(images/headingBg.png) repeat-x 0 100%;
}

.newsTitle h3 span{
	float:left;
	font-weight:bold;
	padding:0 5px 0 26px;
	color:#000080;
	background:url(images/span.png) no-repeat 0 50%;
}

.newsTitle p{
	float:right;
	padding:0 10px 0 13px;
	font-size:15px;
	background:url(images/arrow.png) no-repeat 0 50%;
}

.newsTitle p a{
	color: #000080;
}

.newsTitle p:hover{
	background-position:4px 50%;
}

.news{
	padding-bottom:40px;
}

.news p{
	clear:both;
	margin: 0 10px;
	padding:5px;
	background:url(images/borderDot.png) repeat-x 0 100%;
}

.news p a {
	display:block;
	color:#000080;
	font-style:italic;
	font:italic 110% "Palatino Linotype", "Book Antiqua", Palatino, serif;
	letter-spacing: 3px;
}

.news a span{
	font:normal 90% Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

.news p a:hover {
	color:#008080;
}



/* ページ上部へ戻る
*****************************************************/
#pagetop{
	clear:both;
	display:block;
	overflow:hidden;
	padding-top:30px;
}

#pagetop a{
	float:right;
	display:block;
	position:relative;
	padding:5px 15px 2px;
	font-size:90%;
	border:1px solid #dadade;
	border-bottom:0;
	border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	background:#fff;
}



/* フッター
*****************************************************/
#footerInfo{
	padding:20px 10px;
	margin-bottom:20px;
	border:1px solid #dadade;
	background:#C0C0C0;
	color: #000;
}

#footerLogo{
	float:left;
	padding:10px;
}

.contactInfo{
	float:right;
	text-align:right;
}

#footer ul{
	text-align:center;
	font-size:95%;
	padding-bottom:20px;
}

#footer ul li{
	display:inline-block;
	vertical-align:text-top;
	text-align:left;
	padding:5px 0;
	background:url(images/bullet.png) no-repeat 0 12px;
}

#footer ul li a{
	display:block;
	padding:0 20px 0 12px;
	overflow:hidden;
}

#footer ul li a:hover{
	background: url(images/mainNav.png) no-repeat 100% 50%;
}

#copyright{
	clear:both;
	padding:5px;
	text-align:center;
	font-style:normal;
	font-size:90%;
	color:#fff;
	background:#a7a7a7;
}


/* page navigation
------------------------------------------------------------*/
.pagenav{
	clear:both;
	width: 100%;
	height: 30px;
	margin: 5px 0 20px;
}

.prev{
	float:left
}

.next{
	float:right;
}

#pageLinks{
	clear:both;
	color:#666;
	text-align:center;
}




@media screen and (max-width:767px) {

/*
#title {
	font-size:25px;
	position: static;
}

#contents h1 {
	font-size:20px;
}
*/


* {width:initial!important;}



#header {
	width: 100%;
	/*position:static;*/
}

#header h1 {
	font-size:10px;
	position: static;
}

#base {
	width: 100%;
}

#head {
	width: 100%;
	position: static;
}

#head img#logo {
	position: static;
}

#head #title {
	position: static;
}


#title {
	/*font-size:20px;*/
	position: static;
}




#mainimg {
	height:auto;

}



#navi {
	position: static;
}



#wrapper {
	width: 100%;
}

#wrapper,.inner{
	width: 100%;
}


img { 
    max-width: 100%; 
    height:auto;
}

#visual {
	width: 100%;
}



#imgArea {
	width: 100%;
}

#mainImg {
	height:auto;
}


div.section {
	width: 100%;
}

#hdbox1 {
	min-width: 100%;
}

#hdbox2 {
	min-width: 100%;
}

#hdbox3 {
	min-width: 100%;
}


#jsnavi li [
	clear: left;
}



#content {
	width: 100%;
	clear: left;
}

#container {
	width:100%;
}


#main {
	width: 100%;
	clear:both;	
}

#navi {
	width: 100%;
	position: static;
}


#jsnavi li {
	float:none;
}


#nav li {
	display: block;
}


#gnavi {
	width: 100%;
}




#header-menu {
	height:100%;
}

#header #logo {
	position:static;
}

#header-menu li {
	float:none;
}



ul#topmenu {
	width:100%;
	flex-direction: column; /* 縦並び */
}

#pagetop {
	width:100%;
}


#Menu ul li {
	float:none;
}

#mainimg {
	height:100%;
}


#main h1 {
	background-image:url(images/title_bg1.gif);
}



#gnavi li {
	float:none;
}



#header-menu {
	background-repeat:repeat;
}

*
#menu {
	width:100%;
		flex-direction: column; 
	background-color:#000;
}


#menu_block {
		flex-direction: column; /* 縦並び */
}


#menu ul {
		flex-direction: column; 
}

#menu li {
		flex-direction: column; /* 縦並び */
}

#menu1 {
	position:static;
}
#menu2 {
	position:static;
}
#menu3 {
	position:static;
}
#menu4 {
	position:static;
}
#menu5 {
	position:static;
}
#menu6 {
	position:static;
}





#mainpict {
	width:100%;
}

ul#mainNav {
		flex-direction: column; /* 縦並び */
}

ul#mainNav li {
		flex-direction: column; /* 縦並び */
		float:clear;

}




ul {
		flex-direction: column; /* 縦並び */
}

ul#menu {
		flex-direction: column; /* 縦並び */
}

ul#menu li {
		float:none;
		flex-direction: column; /* 縦並び */
}




#current {

		clear:none;
		flex-direction: column; /* 縦並び */
}



#header-menu ul {
		flex-direction: column; /* 縦並び */
	}

#header-menu li {
		flex-direction: column; /* 縦並び */
		display:block;
	}



navi li ,section{
		flex-direction: column; /* 縦並び */
	}


#naviArea {
	width: 100%;
}


#mainVisual .mainVisualInr {
	width: 100%;
}

#globalNavi ul {
	width: 100%;
}


#sub {
	width: 100%;
}

#side {
	margin-top:10px;
}


#footer {
	width: 100%;
}

#footer .footerInr {
	width: 100%;
}

nav#mainNav ul {
		width: 100%;
}



#footerContents {
	width:100%;
}


	nav ul,section{
		flex-direction: column; /* 縦並び */
	}
	nav ul{
		display:inline;
		padding: 0 0 1.5%;
	}
	nav ul li{
		width: 100%;
		margin-top: 5px;
		float:none;
	}
	nav ul li a{
	}
}


#top-navi {
	width: 100%;
}



#footer {
	width: 100%;
}

#top-navi table {
	width: 100%;
}

div.main-textarea {
	width: 100%;
}





#copyright {
	width:100%;
}