﻿@charset "utf-8";

/*========================

1．レイアウト
2．リンク
3．各要素のリセット
4．ヘッダー
5．ナビゲーション
6．メインコンテンツ
7．サイドメニュー
8．フッター
9．その他

========================*/

/*----------------------------------------------------
■ レイアウト
----------------------------------------------------*/


/*----------------------------------------------------
■ リンク
----------------------------------------------------*/

a:link{
	color: #3f9fff;
	text-decoration: none;
}
a:visited{
	color: #3f9fff;
	text-decoration: none;
}
a:hover{
	color: #3f9fff;
	text-decoration: none;
}
a:active{
	color: #3f9fff;
}

/*----------------------------------------------------
■ 各要素のリセット
----------------------------------------------------*/

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,div,form,fieldset,table,th,td,img ,address {
	margin: 0;
	padding: 0;
	border: none;
	font-weight: normal;
	font-style: normal;
}

html {
	font-size: 100%;
}

html>/**/body {
	font-size: 16px;
}
body {
	min-width: 320px;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
a img {
	border: none;
}
.ie8 img{
	width: auto;
}

input ,select{
	vertical-align:middle;
}

hr {
	display: none;
}


/*----------------------------------------------------
■ ヘッダー
----------------------------------------------------*/

header ul {
	list-style: none;
}
.widget-content input[type="submit"] {
	cursor:pointer;
}

/*----------------------------------------------------
■ ナビゲーション
----------------------------------------------------*/


/*----------------------------------------------------
■ メインコンテンツ
----------------------------------------------------*/

#contentArea {
	padding: 10px 0px 20px;
	font-size: 0.875em;
	line-height: 150%;
}

/*----------------------------------------------------
■ サイドメニュー
----------------------------------------------------*/



/*----------------------------------------------------
■ フッター
----------------------------------------------------*/

footer {
	font-size: 0.875em;
	line-height: 150%;
}

footer h1 {
	padding-bottom: 10px;
}

/*----------------------------------------------------
■ その他
----------------------------------------------------*/

/*clearfix*/
.clearfix {
	  zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* text-indent */
.indent {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}


/*=================================================================
▼▼▼ media Queries（640px以下の画面サイズのスタイル）▼▼▼
=================================================================*/

@media only screen and (max-width: 640px) {

/*----------------------------------------------------
■ レイアウト
----------------------------------------------------*/

header {
	width: 100%;
	margin: 0px 0px 0px;
	padding-bottom: 25px;
	box-sizing: border-box;
}
#contentArea {
	padding: 10px 20px 20px;
}
footer {
	padding: 20px;
	border-top: solid 2px #30a3dc;
}

/*----------------------------------------------------
■ ヘッダー
----------------------------------------------------*/

header {
	background: url(../images/bg001.png) 
		left bottom 
		repeat-x;
}
header #logo {
	width: 85%;
	margin: 15px 0px 20px 10px;
}
header ul {
	text-align: center;
}
header ul li {
	display: inline;
}

/* 検索フォーム */
header .widget-content {
	padding-top: 10px;
}
header .widget-content form {
	width: 300px;
	margin: 0px auto;
}
header .widget-content form input {
	width: 57px;
	height: 28px;
	background: url(../images/bt_serch.png) 
		0px 0px 
		no-repeat;
	border: 0px;
	text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

header .widget-content form input#search {
	width: 180px;
	height: 24px;
	margin-right: 5px;
	background: none;
	border: solid 1px #7e9db9;
	float: left;
	text-indent: 0;
}

/*----------------------------------------------------
■ ナビゲーション
----------------------------------------------------*/
.menu ul li ul {
	display: none;
}


} /* 640px */

/*=================================================================
▼▼▼ media Queries（1024px～641pxの画面サイズのスタイル）▼▼▼
=================================================================*/

@media only screen and (min-width: 641px)  and (max-width: 1024px) {

/*----------------------------------------------------
■ レイアウト
----------------------------------------------------*/

header {
	width: 100%;
	padding: 0px 20px 14px;
	box-sizing: border-box;
	background: url(../images/bg001.png) 
		left bottom 
		repeat-x;
}
#contentArea {
	padding: 10px 20px 20px;
}
footer {
	padding: 20px;
	border-top: solid 2px #30a3dc;
}

/*----------------------------------------------------
■ ヘッダー
----------------------------------------------------*/

header #logo {
	margin: 15px 0px 20px;
}
header ul {
	float: right;
	text-align: center;
}
header ul li {
	float: left;
	padding-left: 10px;
}
header ul li img {
	padding-top: 3px;
}

/* 検索フォーム */
header .widget-content {
	padding-left: 10px;
}
header .widget-content form {
	width: 267px;
	margin: 0px auto;
}
header .widget-content form input {
	width: 57px;
	height: 28px;
	background: url(../images/bt_serch.png) 
		0px 0px 
		no-repeat;
	border: 0px;
	text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}
header .widget-content form input#search {
	width: 180px;
	height: 24px;
	margin-right: 5px;
	background: none;
	border: solid 1px #7e9db9;
	float: left;
	text-indent: 0;
}


/*----------------------------------------------------
■ ナビゲーション
----------------------------------------------------*/
.menu ul li ul {
	display: none;
}

} /* 1024px～641px */

/*=================================================================
▼▼▼ media Queries（1025px 以上の画面サイズのスタイル）▼▼▼
=================================================================*/

@media only screen and (min-width: 1025px) {

/*----------------------------------------------------
■ レイアウト
----------------------------------------------------*/

header {
	width: 100%;
	margin: 0px 0px 14px;
}
header .wrap {
	width: 940px;
	margin: 0px auto;
}

nav.menu {
	width: 100%;
}

#contentArea {
	width: 950px;
	margin: 0px auto;
}

article {
	padding: 0 10px;
}

footer {
	width: 100%;
}


/*----------------------------------------------------
■ ヘッダー
----------------------------------------------------*/

header {
	border-top: solid 2px #30a3dc;
}
header #logo {
	float: left;
	margin-top: 17px;
}
header ul {
	list-style: none;
	float: right;
	margin-top: 25px;
width: 290px;
}
header ul li ul {
	margin: 0px;
}
header ul li ul li {
	float: left;
	margin-left: 10px;
}

/* 検索フォーム */
header .widget-content {
	float: right;
	padding-top: 10px;
}
header .widget-content form input {
	width: 57px;
	height: 28px;
	background: url(../images/bt_serch.png) 
		0px 0px 
		no-repeat;
	border: 0px;
	text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}
header .widget-content form input#search {
	width: 200px;
	height: 24px;
	margin-right: 5px;
	background: none;
	border: solid 1px #7e9db9;
	float: left;
	text-indent: 0;
}

/*----------------------------------------------------
■ ナビゲーション
----------------------------------------------------*/

nav.menu {
	background: url(../images/bg001.png) 
		left bottom 
		repeat-x;
}

.menu ul{
	width: 950px;
	margin:0 auto;
	padding:0;
}
.menu ul li {
	list-style: none;
	margin: 0px;
	padding:0;
	font-size:14px;
	float: left;
	position: relative;
	height: 48px;/*親メニューの高さ*/
}
.menu ul li a {
	display: block;
	height: 48px;
	color: #333;
	text-decoration: none;
	text-indent: 100%;
    	white-space: nowrap;
    	overflow: hidden;
}
.menu ul li#m01 a {
	width: 162px;
	background: url(../images/m001.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m02 a {
	width: 188px;
	background: url(../images/m002.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m03 a {
	width: 218px;
	background: url(../images/m003.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m04 a {
	width: 238px;
	background: url(../images/m004.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m05 a {
	width: 134px;
	background: url(../images/m005.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m01 a:hover {
	background: url(../images/m001_o.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m02 a:hover {
	background: url(../images/m002_o.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m03 a:hover {
	background: url(../images/m003_o.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m04 a:hover {
	background: url(../images/m004_o.png) 
		0px 0px 
		no-repeat;
}
.menu ul li#m05 a:hover {
	background: url(../images/m005_o.png) 
		0px 0px 
		no-repeat;
}

/* 子メニュー */

.menu ul li ul {
	position: absolute;
	top: 48px;/*親メニューの高さと同じにする*/
	width: 150px;
	z-index: 100;
}
.menu ul li ul li {
	visibility: hidden;
	overflow: hidden;
	height: 0;
}

ul.menu {
	width:100%;
	background:#ffe1cd;
}

.menu ul li ul li a {

}
.menu ul li#m01 ul li a,
.menu ul li#m02 ul li a,
.menu ul li#m03 ul li a,
.menu ul li#m04 ul li a,
.menu ul li#m05 ul li a  {
	height: 3em;
	padding: 0px 15px;
	background: #ffe1cd;
	text-indent: 0;
}
.menu ul li#m01 ul li a {
	width: 40em;
	


}
.menu ul li#m02 ul li a {
	width: 30em;

}
.menu ul li#m03 ul li a {
	width: 30em;

}
.menu ul li#m04 ul li a {
	width: 30em;
	
}
.menu ul li#m05 ul li a {
	width: 60em;

}

.menu ul li#m01 ul li a:hover,
.menu ul li#m02 ul li a:hover,
.menu ul li#m03 ul li a:hover,
.menu ul li#m04 ul li a:hover,
.menu ul li#m05 ul li a:hover  {
	background: #ffa76d;/*ホバー時のサブメニューの背景色*/
}
.menu ul li:hover ul li,
.menu ul li a:hover ul li{
	visibility: visible;
	overflow: visible;
	height: 2.5em;/*サブメニューの高さ*/
	line-height: 2.5em;
	z-index: 10;
}
.menu * {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

/* スライドメニュー用ボタン */
#button{
	display: none;
}


/*----------------------------------------------------
■ フッター
----------------------------------------------------*/

footer {
	padding: 20px 0px;
	border-top: solid 2px #30a3dc;
}
footer h1,
footer p,
footer address {
	width: 950px;
	margin: 0px auto;
}

} /* 1025px */