/* 最新のブラウザ対応(2012年現在) */

/* 背景 */
body{
    background-color: rgba(57, 85, 57, 1);
    background-image: url('./images/kusa.jpg');
    background-attachment: fixed;
    background-position:left top;
    background-repeat:no-repeat;
	/*background-image: url('./images/tile.png');*/
    color: rgba(255, 255, 255, 1);
	padding: 0px;
	margin: 0px;
}

header,nav, article, aside, section, footer {
	display:block;
}

/* ヘッダ */
header {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    padding-top: 0px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
	background: -o-linear-gradient(top, rgba(0,0,0,.8), rgba(0,0,0,.4));
	background: linear-gradient(top, rgba(0,0,0,.8), rgba(0,0,0,.4));
}
header hgroup div {
	margin-top: 10px;
	margin-left: 190px;
    font-size:11pt;
    color:rgba(200,200,200,.8);
    text-shadow: 2px 2px 10px rgba(3,3,3,.8);
    width: 700px;

}
header hgroup div.cp {
	margin-top: 0px;
	padding-top:30px;
	margin-left: 30px;
    font-size:40pt;
    font-weight:bold;
    color: rgba(50,90,50,1);
   /* text-shadow: 2px 2px 10px #6633cc;*/

/*	text-shadow:
		0 0 25px #.item_d8ff,
		0 0 20px #.item_d8ff,
		0 0 0.40px #.item_d8ff;*/

	text-shadow:
		1px 0px  4px  rgba(200, 200, 200, .8),
		0px 1px  4px  rgba(200, 200, 200, .8),
		-1px 0px  4px rgba(200, 200, 200, .8),
		0px -1px  4px rgba(200, 200, 200, .8),
		2px 2px  4px  rgba(200, 200, 200, .8);
	}


/* メニュー */
nav{
    width:250px;
    position: fixed;
    top: 220px;
    left: 0;

    z-index: 2; /*コンテンツ部分の重なり順*/
}


/* メニュー全体 */
nav ul {
    width:130px;
    list-style-type: none;
    text-align: left;    
	margin: 0px 0px 0px 30px;
	padding: 0px;
}
/* メニュー見出し */
nav ul h1 {
    display:none;
}

/* メニュー項目 */
nav ul li {
	margin-bottom: 5px; /* 項目の下マージン */
}


/* メニューリンク */
nav ul li a {
	display: block;
	position: relative; /* IE6用 */
	padding: 12px 10px; /* リンクエリアのパディング（上下、左右） */
	background: -o-linear-gradient(top left, rgba(255,255,205,.5), rgba(255,255,205,.2));
	background: linear-gradient(top left, rgba(255,255,205,.5), rgba(255,255,205,.2));
	color: rgba(40,40,40,.8); /* 文字色 */
	text-decoration: none; /* テキストの下線（なし） */
	border-radius: 12px;
    box-shadow: 5px 5px 5px 3px rgba(30,30,30,.5);
	text-shadow: 2px 2px 5px rgba(30,30,30,.8);

    -o-transition: background-color 0.5s linear 0, text-shadow 0.5s linear 0;
    transition: background-color 0.5s linear 0, text-shadow 0.5s linear 0;
}

/* ポイント時の設定 */
nav ul li a:hover {
	background: rgba(219,238,177,.8); /* ポイント時の背景 */
	text-shadow: 2px 2px 3px rgba(30,30,30,.9);
}

/* 選択されたメニュー */
nav ul li.menu_slc a {
    border-color: rgba(0,0,128,1);
    color: rgba(255,0,0,1);
}

article {
    margin-top:160px;
    margin-left:200px;
    margin-right:20px;
    float:left;
    padding:30px;
	/*background: rgba(255,255,205,.6);*/
	background-image: url('./images/paper.png');
    color: rgba(65,20,174,1);
    border-radius: 10px;
    box-shadow: 5px 5px 10px 5px rgba(30,30,30,.5);
    text-shadow: 4px 4px 5px rgba(200,200,200,.6);
    z-index: 1; /*コンテンツ部分の重なり順*/
    line-height:1.3em;
    word-spacing:0.5em;

    /*透明化↓
    filter: alpha(opacity=30);
    -moz-opacity:0.30;
    opacity:0.30;*/
    
    /*-o-transition: display 1s linear 0;
    transition: display 1s linear 0;*/
}
article h2, article h4 {
    color:rgba(0,0,0 ,1);
}
article .item_h {
    float: left;
    color: rgba(0,0,0,1);
    font-size:small;
	display:block;
}
article .item_d {
    float: left;
    font-size:medium;
	text-indent: 1em;
	display:block;
}
article p {
	margin-left: 1em;
}

/* Top */
#top {
}
#top .item {
    float: left;
}
#top .item_d {
	text-align:right;
}

#top p.to_info {
	text-align: center;
    font-weight:bold;
    font-size:large;
}
#top p.to_info a {
    color: rgba(255, 0, 0, 1);
    text-shadow: 3px 3px 2px rgba(0,0,0,.6);
}
#top .poster {
    float: left;
    border:solid 1px #ccc;
    padding:4px;
    box-shadow: 5px 5px 10px 5px rgba(30,30,30,.5);
	margin-right: 1em;
	margin-bottom: 1em;
}

/* about */
#about {
}
#about p {
    margin:5px 1em;
	text-indent: 1em;
}
#about table {
    color:rgba(0,0,0,1);
    text-shadow: 4px 4px 4px rgba(255,255,255,.6);
}
#about td {
    text-indent: 1em;
    border-bottom: 1px solid #CCC;
    font-weight:bold;
}
#about td a {
	padding: 3px 10px;
	text-decoration: none; /* テキストの下線（なし） */
	color: rgba(10,10,60,1); /* 文字色 */
}	
#about td a:hover {
    color: rgba(0,0,200,1);
	text-decoration: underline; /* テキストの下線（あり） */
	border-radius: 4px;
	box-shadow: 2px 2px 3px 2px #333;
    font-weight:bold;
}	

/* info */
#info {
}

#info section {
/*    line-height:1.4em;*/
}
#info strong {
    color: rgba(255, 0, 0, 1);
    display:block;
    float: left;
    font-size:large;
    margin:1em;
    text-shadow: 3px 3px 2px rgba(0,0,0,.6);
}




footer {
    clear:both;  /*←articleとasideのfloatを、これでクリア。*/
    text-align: center;
    padding: 0px;
    font-size: 80%;
}


/* スマートフォン対応 */
@media screen and (max-device-width: 480px) {
	body{
	    background-image:url('./images/kusa_s.jpg');
	}
	
    header {
        width: 100%;
        height: 60px;
        margin: 0px;
        padding: 0px;
        text-align:center;
    }
	header hgroup div {
		margin-top: 6px;
		margin-left: 0px;
        width: 100%;
	    font-size:10pt;
	}
    header hgroup div.cp {
		margin: 0px;
        padding: 10px 0px 0px 0px;
        font-size:18pt;
    }


    /* メニュー */
    nav{
        width:100%;
  		display:block;
	    position: fixed;
	    top: 60px;
	    left: 0px;

        text-align:center;
    }

    /* メニュー全体 */
    nav ul {
        width:100%;
        text-align:center;
		margin: 5px 2px;
		padding: 0px;
    }
    /* メニュー見出し */
    nav ul h1 {
        display:none;
    }
    
    /* メニュー項目 */
    nav ul li {
        float: left;
        text-align: center;  
    	margin-right: 2px; /* ボタンの右側の隙間 */
    }
    
    
    /* メニューリンク */
    nav ul li a {
        display: block;
        position: relative; /* IE6用 */
        padding: 5px; 
        font-size:10pt;
    }

    article {
	    clear:both;
	    margin: 100px 10px 0px;
	    padding: 10px;
	    line-height:1.1em;
    }
	article h2, article h4 {
        font-size:13pt;
	}
	article .item_h {
	    font-size:9pt;
	}
	article .item_d {
	    font-size:11pt;
	}

	/* Top */
	#top {
	}
	#top p {
        font-size:11pt;
	}
	#top a {
        font-size:13pt;
	}
	#top img {
        max-width: 320px;
	}
	#top .poster {
	    float: left;
        max-width: 120px;
	}
	
	/* about */
	#about {
	}
	#about div {
        font-size:11pt;
	}
	#about table {
        font-size:11pt;
	}

	/* info */
	#info {
	}
	#info .item_d {
		width: 280px;
	}
	#info strong {
		width: 280px;
	    font-size:12pt;
	    margin:1em;
	}

}