@charset "utf-8";


/*TOPページ共通
---------------------------------------------------------------------------*/

/*ヘッダー#996699
---------------------------------------------------------------------------*/

header {
	width: 100%;	
	background: #573c57;
	background: radial-gradient(circle 500px at 80% 230px,#000000,#996699);	}



/*TOPページ_サイト幅にしたheader内のブロック*/
#top header .inner {
	height: 580px;
	background: url(../images/main-2-1.jpg) no-repeat 100%;	

}

/*ロゴ画像*/
#top #logo img {
	width: 40%;
	position: absolute;
	left: 0px;
	top: 220px;
}








/*グローバールメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menu-box {
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #ccc;	
}

/*サイト幅にしたmenu-box内のブロック*/

#menubar {
	width: 1000px;	
	overflow: hidden;
	margin: 0 auto;
		
	}

/*メニュー１個あたりの設定*/

#menubar li,
#menubar-s li {
	float: left;	
	width: 25%;	
	text-align: center;
	}

#menubar li:first-child {
	margin-left: 0px;
	}

#menubar a,
#menubar-s a {
	display: block;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.1em;
	padding: 10px 0px 0px;	
	color: #333;
	}
	
/*飾り文字*/

#menubar span {
	display: block;
	font-size: 10px;
	color: #4f4439;	
	margin: -5px 0px 0px;
	padding-bottom: 5px;
	}


#menubar-s span {
	display: block;
	font-size: 10px;
	color: #4f4439;	
	margin: -5px 0px 0px;
	border-bottom: 2px solid #4f4439;
	padding-bottom: 5px;
	}


/*マウスオン時と、現在表示中*/

#menubar li a:hover ,
#menubar li.current a {
	background: #edeeef;
	color: #4f4439;	
	}

#menubar a:hover span {
	color: #000;
	}

/*スマホ用メニューを表示させない*/
#menubar-s {
	display: none;
	}
	
/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
	}


/*コンテンツ（main、subを囲むボックス）
---------------------------------------------------------------------------*/
#contentshome {
	clear: both;
	overflow: hidden;
	padding-top: 10px;
	}

/*サイト幅にしたcontents内のブロック*/
#contents .inner {
	width: 1000px;
	margin: 0 auto;
}

/*メインコンテンツ(１カラム)
---------------------------------------------------------------------------*/

.c1 #main {
	float: none;
	width: auto;
	}






/*TOP_一覧画像メニュー（4つ並び）
---------------------------------------------------------------------------*/

#main section.list.home {
	width: 100%;
	float: left;	
/*	height: 400px;	*/
	margin-left: 2%;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
	padding: 0%;
	}


#main section.list.home a {
	height: 100%;
	}

.c1 #main section.list.home {
	width: 23%;
	}



























/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop a {
	clear: both;
	color: #FFF;	
	font-size: 20px;
	padding: 0px 20px;
	background: #333;
	text-decoration: none;
	text-align: center;
	display: block;
	float: right;
	border-radius: 4px 4px 0px 0px;
	}
	
/*マウスオン時*/
#pagetop a:hover {
	background-color: #999;	
	color: #FFF;			
	}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	background: #4f4439;	
	color: #fff;		
	font-size: 85%;		
	}

footer a {
	color: #fff;
	}

footer a:hover {
	color: #fff;
	}
	
footer .pr {
	display: block;
	font-size: 80%;
}



/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	background: #333;
	}
	
#copyright a {
	text-decoration: none;
	}












/*---------------------------------------------------------------------
　　画面幅800px以下の設定
--------------------------------------------------------------------------*/

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


/*ヘッダー
---------------------------------------------------------------------------*/
/*サイト幅にしたheader内のブロック（トップページ用の追加指定）*/

#top header .inner {
	height: 250px;
	-webkit-background-size: contain;	/*この１行は古い端末向けの最低限の設定 96% 70%/45%*/
	background: url(../images/main-2-2.jpg) no-repeat 100%;
	}


/*TOP_ロゴ画像*/

#top #logo img {
	position: absolute;
	left: 250px;
	top: 30px;
	}


/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/

#menubar {
	width: auto;
	border: none;
	}
	
/*メニュー１個あたりの設定*/
#menubar li {
	width: 50%;
	margin: 0px;
	}
	
#menubar a,
#menubar-s a {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}

/*不要？コンテンツ（main、subを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
	padding-top: 0px;
}
/*サイト幅にしたcontents内のブロック*/
#contents .innerhome {
	width: auto;
	margin: 10px;
}

/*main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub {
	float: none;
	width: auto;
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	width: 90%;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub {
	display: none;
}

}





/*------------------------------------------------------------------------------　　画面幅480px以下の設定
------------------------------------------------------------------------*/

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



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

/*サイト幅にしたheader内のブロック（トップページ用の追加指定）*/
#top header .inner {
	height: 300px;
	-webkit-background-size: contain;	/*この１行は古い端末向けの最低限の設定↓mainimg_s.png*/
	background: url(../images/smain-2-1.jpg) no-repeat center bottom/auto 100%;
	}
	
/*ロゴ画像*/
header #logo img {
	width: 60%;
	position: static;
	padding: 12px 0 0 20px;
	}
/*ロゴ画像（トップページ専用の追加設定）6px;*/
#top #logo img {
	width: 80%;
	position: static;
	padding: 12px 0px 0px 60px;
}






/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/

#menubar-s li {
	width: 100%;
	margin: 0px;
	}
	
/*スマホ用メニューを非表示から表示に切り替える*/

#menubar-s {
	display: block;
	}
	
/*PC用メニューを非表示にする*/

#menubar {
	display: none;
	}


/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/

#menubar_hdr {
	color: #fff;		
	font-size: 100%;
	font-weight:bold;
	text-align: center;
	display: block;
	position: absolute;
	top: 10px;		
	right: 10px;	
	width: 30px;	
	border: 3px solid #fff;	
	padding: 10px 10px 5px;	
	}
	
	
/*３本のバー（1本あたり）*/

#menubar_hdr span {
	display: block;
	border-top: 3px solid #fff;
	margin-bottom: 7px;	
	}

/*TOPページの一覧用ブロック
---------------------------------------------------------------------------*/
#contents .innerhome {
	width: auto;
	margin: 10px;
	}



/*追加設定*/
#main section.list.home {
	width: 100% !important;
	float: none;
	height: auto;
	margin-left: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 10%;
}


/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/

#footermenu {
	display: none;
	}

	}

/*-------------------------------
画面幅350px以下の設定
---------------------------------------*/

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


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

/*サイト幅にしたheader内のブロック*/
#top header .inner {
	height: 250px;
	-webkit-background-size: contain;
	background: url(../images/main-2-1.jpg) no-repeat center bottom/auto 100%;
	}
	
/*ロゴ画像*/

#top #logo img {
	width: 70%;
	padding: 15px;
}

}