@charset "utf-8";

/* 全体設定
----------------------------- */
html {
	height: 100%;	/* 背景キレない用 */
}
body {
	background: url("../img/background-dot2.jpg");	/* ツブツブ背景 */
	font-family: 'メイリオ', sans-serif;
	color: #444;
	overflow-y: scroll;	/* メニューがガタつかないように縦スクロールバーを常に出す */
	height: 100%;	/* 背景キレない用 */
}
a:link {	/* リンクの色 */
	color: #0f52fe;
}
a:visited {	/* リンクの色(訪問済みページ) */
	color: #FF4343;
}
a:hover, a:active {	/* リンクの色(アクティブ時) */
	color: #1cc845;
}

/* webfont
----------------------------- */
#head_menu li {	/* 上のメニュー */
	font-family: 'Play', sans-serif;
}




/* ページ全体の横幅
----------------------------- */
#page-window {
	width: 900px;
	margin: auto;	/* センタリング */
	padding: 150px 0 0;	/* ヘッダとフッタ被らないように余白確保 */
	overflow: hidden;
}


/* 最上部ヘッダーメニュー
----------------------------- */
header {
	width: 100%;
	height: 80px;
	position: fixed;	/* メニューをスクロールしても固定 */
	z-index: 5;	/* 上にかぶさるように */
	box-shadow: 0 0 7px rgba(0,0,0,0.5);
	color: #999;	/* 非アクティブリンクの色 */

	background: linear-gradient(to bottom, rgba(200,0,50,0.7) 0%, rgba(255,30,90,0.8) 25%);
	background: -moz-linear-gradient(center top, rgba(200,0,50,0.7) 0%, rgba(255,30,90,0.8) 25%);
	background: -webkit-gradient(linear, 100% 0%, 100% 25%, from(rgba(200,0,50,0.7)), to(rgba(255,30,90,0.8)));
	background: -o-linear-gradient(rgba(200,0,50,0.7), rgba(255,30,90,0.8)); 
}
header a:link, header a:visited {	/* リンクの色 */
	color: #333;
	transition: all .2s linear;
}
header a:hover, header a:active {	/* リンクの色(アクティブ時) */
	color: #fff;
	text-shadow: 0 0 1px #fff;
}

/* header内ページ全体の横幅
----------------------------- */
#head-window {
	width: 900px;
	margin: auto;	/* センタリング */
}

#title_logo {
	float: right;
	margin-top: -50px;
	z-index: 25;
}

#head_menu {	/* メニュー */
	padding: 10px 0 0 5px;
}
#head_menu li {
	display: inline-block;
	padding: 0 0.5em 0 0.25em;
	text-shadow: 0 0 5px #333;
	font-size: 150%;
	line-height: 0.6;
		transition: all .2s linear;
		-moz-transition: all .2s linear;
		-webkit-transition: all .2s linear;
		-o-transition: all .2s linear;
		-ms-transition: all .2s linear;
}
.menu_rubi {	/* カタカナのフリガナ部分 */
	font-size: 50%;
}

#head_menu li:hover {
	color: #fff;
	text-shadow: 0 0 3px #fff;
}


/* SNSボタン
----------------------------- */
#socialbtn {
	margin: 10px 0.5em 0;
}
#socialbtn div {
	float: left;
	margin-right: 15px;
}




/* 最下部フッター
----------------------------- */
footer {
	text-align: center;
	margin-top: 1em;
}
/* 最下部コピーライト
----------------------------- */
small {
	font-size: 80%;
	padding: 0.5em 0 0;
	color: #555;
}



/* 汎用枠
----------------------------- */
.box {	/* 横幅はだいたい848px */
		background: linear-gradient(to bottom, rgba(255,230,230,0.5) 0%, rgba(255,255,255,0.8) 100%);
		background: -moz-linear-gradient(center top, rgba(255,230,230,0.5)  0%, rgba(255,255,255,0.8) 100%);
		background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(255,230,230,0.5)), to(rgba(255,255,255,0.8)));
		background: -o-linear-gradient(rgba(255,230,230,0.5), rgba(255,255,255,0.8)); 
	box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 3px rgba(255,255,255,0.9) inset;
	margin: 0 2em 2em;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
}
h2 {
	padding: 0.25em 0.5em;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	color: #fff;
		background: rgba(255,100,130,0.7);
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
h2:before, h2:after {
	content: "-";
}