@charset "Shift_JIS";

/* グーグルフォント読み込み */
@import url("http://fonts.googleapis.com/css?family=Almendra");


/* 全称 */
* {	}


/* 画像の枠線を表示しない */
img { border: 0; }			/* 表示したい場合は0を好きな数字に書き換える　数字が大きいほど太い枠線 */


/* ページの基本的な設定 */
body { 
	overflow: auto;		/* スクロールバーの設定 */
	background-color: #0b0000;	/* 背景色 */
	color: #fffbf2;			/* 文字色 */
	line-height: 2;			/* 行間 */
	font-size: 12px;		/* 文字の大きさ */
	margin: 10px;			/* 上下左右に10の余白 */
	text-align: center;		/* センタリング */
}

/* 鍵盤の設定 */
#menu {
	border: none;		/* 枠線なし */
	height: 300px;		/* 高さ　300 */
	width: 720px;		/* 横幅　45*16 */
	margin: 0 auto;		/* センタリング */
	font-family:'Almendra', serif;
}


/* 鍵盤の設定 */
#menu div {
	height: 300px;		/* 高さ300 */
	width: 45px;		/* 横幅45 */
	float: left;		/* ブロック左寄せ */
	font-size: 20px;		/* 文字の大きさ */
	font-style: italic;		/* 文字を斜めに */
}

/* 鍵盤リンクの設定 */
#menu div a {
	display: block;		/* ブロック風表示 */
	width: 100%;		/* 横幅100％がリンク領域 */
	height: 100%;		/* 高さ100％がリンク領域 */
	color: #250d00; 		/* リンクの文字色 */
	text-decoration: none;		/* リンクの装飾 */
	padding-top: 70px;	/* 上からの余白 */
	/* 縦書き */
	direction: ltr;
	-webkit-direction: ltr;
	-o-direction: ltr;
	writing-mode: tb-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
}

/* 鍵盤リンクに触れたときの設定 */
#menu div a:hover {
	padding-top: 110px;	/* 上からの余白 */
}


/* 左端の鍵盤の設定 */
.p-left {
	background-image: url(left.jpg);	/* 背景画像 */
}

/* 左端の鍵盤に触れたときの設定 */
.p-left:hover {
	background-image: url(left2.jpg);	/* 背景が変わる */
}

/* ドとファの鍵盤 */
.p-cf {
	background-image: url(cf.jpg);	/* 背景画像　以下同様 */
}

/* ドとファの鍵盤に触れたとき */
.p-cf:hover {
	background-image: url(cf2.jpg);
}

/* レの鍵盤 */
.p-d {
	background-image: url(d.jpg);
}

/* レの鍵盤に触れたとき */
.p-d:hover {
	background-image: url(d2.jpg);
}

/* ミとシの鍵盤 */
.p-eh {
	background-image: url(eh.jpg);
}

/* ミとシの鍵盤に触れたとき */
.p-eh:hover {
	background-image: url(eh2.jpg);
}

/* ソの鍵盤 */
.p-g {
	background-image: url(g.jpg);
}

/* ソの鍵盤に触れたとき */
.p-g:hover {
	background-image: url(g2.jpg);
}

/* ラの鍵盤 */
.p-a {
	background-image: url(a.jpg);
}

/* ラの鍵盤に触れたとき */
.p-a:hover {
	background-image: url(a2.jpg);
}

/* 右端の鍵盤 */
.p-p {
	background-image: url(p.jpg);
}

/* 右端の鍵盤に触れたとき */
.p-p:hover {
	background-image: url(p2.jpg);
}

/* 回りこみ解除 */
.clear { 
	clear:both;
	display: none;
}

iframe {
	width:88%;
	height:440px;
	border:4px double #f8f4e6;
}