/* メイン・骨格 
------------------------------------------------------------------------------------------------- 
*/
body{
     background-color: #faf0e6;
     font-family:consolas,'游ゴシック Medium',sans-serif;
	 font-weight: normal;
     color: #233B6C;
}


#all{
     background-color: #fff;
     width:960px;
     margin-left:auto;
     margin-right:auto;
}

header{
     height: 160px;
     background-image: url("../sys/header.jpg");
}

aside{
     float:left;
     width:23%;
     background-color: transparent;
}

article{
     float:right;
     width:77%;
     background-color:transparent;
     z-index: 5;
}

section{
     background-color:#ffffff;
     line-height: 150%;
     padding: 20px;
     margin: 20px 10px 10px 0px;
     box-shadow: 2px 2px  5px #666;
     -webkit-box-shadow: 2px 2px 5px #666;
     -moz-box-shadow: 2px 2px 5px #666;
}

footer{
     height: 80px;
     clear:both;
     background-color: #f0fff0;
     background: linear-gradient(rgba(240,255,240,1), rgba(204,255,153,1));
     background: -moz-linear-gradient(rgba(240,255,240,1), rgba(204,255,153,1));
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(240,255,240,1)), to(rgba(204,255,153,1)));
     text-align:center;
     padding-top: 10px;
}

a:link {
     text-decoration: none;
     color: #004080;
}

a:visited {
     text-decoration: none;
     color: #004080;
}

a:hover {
     color: #ff69b4;
	 text-decoration: underline;
}

a:active {
     color: #ff69b4;
	 text-decoration: underline;
}


/* ヘッダー部分 
------------------------------------------------------------------------------------------------- 
*/

header div#h_title{
     position: relative;
     top: 10px;
     left: 30px;
     font-size: 2em;
     text-shadow: 5px 5px 2px #666;
}

header p{
     margin: 10px;
     text-shadow: 5px 5px 2px #666;
     font-size: 1em;
}


/* ナビゲーション 
------------------------------------------------------------------------------------------------- 
*/
/* navタグでなく <ul><li> に割り当てる命令群 */
#nav {
     margin: 0;
     padding: 7px 6px 0;
     background-color: #558e55;
     background: rgba(0,153,51,0.5);
     line-height: 100%;
     -moz-border-radius: 2em;
     -webkit-border-radius: 2em;
     border-radius: 2em;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
     box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
     margin: 0 5px;
     padding: 0 0 8px;
     float: left;
     position: relative;
     z-index: 100;
     list-style: none;
}


/* main level link */
#nav a {
     font-weight: bold;
     color: #e7e5e5;
     text-decoration: none;
     display: block;
     padding:  8px 20px;
     margin: 0;
     -moz-border-radius: 1.6em;
     -webkit-border-radius: 1.6em;
     border-radius: 1.6em;
     text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
     background: #000;
     color: #fff;
}

/* main level link hover */ /* 上部ナビポインター時の動き */
#nav .current a, #nav li:hover > a {
     background-color: #0066ff;
     background: rgba(0,102,255,0.5);
     border-top: solid 1px #f8f8f8;
     -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
     -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
     box-shadow: 0 1px 1px rgba(0,0,0, .2);

}

/* sub levels link hover */ /* 下部メニューのところ */
#nav ul li:hover a, #nav li:hover li a {
     background: none;
     border: none;
     color: #233b6c;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
}
#nav ul a:hover {
     background: #0078ff !important;
     color: #fff !important;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
     display: block;
}

/* level 2 list */
#nav ul {
     display: none;

     margin: 0;
     padding: 0;
     width: 185px;
     position: absolute;
     top: 35px;
     left: 0;
     background-color: #dedede;
     background: rgba(220,220,220,0.8);
     border: solid 1px #b4b4b4;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
     -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
     box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
     float: none;
     margin: 0;
     padding: 0;
}

#nav ul a {
     font-weight: normal;
     text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
     left: 181px;
     top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
     -webkit-border-top-left-radius: 9px;
     -moz-border-radius-topleft: 9px;

     -webkit-border-top-right-radius: 9px;
     -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
     -webkit-border-bottom-left-radius: 9px;
     -moz-border-radius-bottomleft: 9px;

     -webkit-border-bottom-right-radius: 9px;
     -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}
#nav {
     display: inline-block;
}


/* サイドバー 
------------------------------------------------------------------------------------------------- 
*/

/* 上部の黄色いやつ */
#s_top{
      position: relative;
      width: 150px;
      min-height: 50px;
      margin: 25px auto;
      padding: 15px;
      background: #f1f3a2;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(247,247,210,1)), to(rgba(240,242,155,1)));
      background: -moz-linear-gradient(top, rgba(247,247,210,1), rgba(240,242,155,1));
      -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.5);
      -moz-box-shadow: 0 2px 12px (rgba(0,0,0.5));
      box-shadow: 0 1px 2px #000;
      -o-transform: rotate(-.5deg);
      -ms-transform: rotate(-.5deg);
      -moz-transform: rotate(-.5deg);
      -webkit-transform: rotate(-.5deg);
      transform: rotate(-.5deg);
}
#s_top:nth-child(even) {
      -o-transform: rotate(.5deg);
      -ms-transform: rotate(.5deg);
      -moz-transform: rotate(.5deg);
      -webkit-transform: rotate(.5deg);
      transform: rotate(.5deg);
}
#s_top p {
      text-align: center;
      color: #000;
      font-size: 1.2em;
      overflow:hidden;
}
#s_top::before {
      content: ' ';
      display: block;
      position: absolute;
      left: 55px;
      top: -15px;
      width: 75px;
      height: 25px;
      z-index: 2;
      background-color: rgba(243,245,228,0.5);
      border: 2px solid rgba(255,255,255,0.5);
      -moz-box-shadow: 0 0 5px #888;
      -webkit-box-shadow: 0 0 5px #888;
      box-shadow: 0px 0px 1px #000;
      -o-transform: rotate(-6deg);
      -ms-transform: rotate(-6deg);
      -moz-transform: rotate(-6deg);
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
}
#s_top:nth-child(even)::before {
      -o-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
      -moz-transform: rotate(6deg);
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
}


/* 付箋の部分 */

aside a{
     position: relative;
     left: 54px;
     display: block;
     width: 150px;
     height: 30px;
     margin-top: 1em;
     padding-top: 10px;
     background-color: #fff0f5;
     background: linear-gradient(rgba(255,250,250,0.8), 
rgba(255,182,193,0.8));
     background: -moz-linear-gradient(rgba(255,250,250,0.8), 
rgba(255,182,193,0.8));
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,250,250,0.8)), to(rgba(255,182,193,0.8)));
     border-left: 15px solid rgb(240,128,128);
     -moz-box-shadow: -1px 1px 2px (rgba(102,102,102,0.5));
     -webkit-box-shadow: -1px 1px 2px rgba(102,102,102,0.5);
     box-shadow: -1px 1px 2px #666;
     z-index: 1;
}

aside a:hover{
     background: linear-gradient(rgba(255,255,255,1), rgba(255,182,193,1));
     background: -moz-linear-gradient(rgba(255,255,255,1), 
rgba(255,182,193,1));
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,182,193,1)));
     border-left: 15px solid rgb(240,156,156);
	 text-decoration: none;
}



/* 記事部分 ------------------------------------------------------------------------------------------------- */

#honbun_text {
	background-image:url("../sys/book.png");
     min-height: 640px;
}

#honbun_img {
	padding: 10px 0px;
	background-image:url("../sys/corkboard.gif");
	text-align: center;
}

#honbun_irst {
	padding: 10px 0px;
	background-image:url("../sys/bg3.png");
}

#honbun_none {
	background-image: none;
}

div#honbun_irst ul{
	text-align: center;
}

div#honbun_irst ul.left{
	text-align: left;
}

div#honbun_irst ul li.ilst{
	display: block;
	width: 100px;
	height:100px;
	text-align: center;
	margin-right: 12px; /* アイコンの間隔 */
	float: left;
	padding-top: 20px;
}

div#honbun_irst ul li.ilst img{
    width: 55px; /* デフォルトの幅.*/
    height: 55px; /* デフォルトの高さ  */
    border:10px;
     /*animate transform property */
    -webkit-transition:-webkit-transform 0.3s ease-in; /* Safari Chrome */
    -o-transition:-o-transform 0.3s ease-in; /* Opera */
}

div#honbun_irst ul li.ilst img:hover{
    /* スケールアップ 1.8x */
    -moz-transform:scale(1.8); /* Firefox */
    -webkit-transform:scale(1.8); /* Safari Chrome */
    -o-transform:scale(1.8);  /* Opera */
}


/* テキスト装飾：主要項目 ------------------------------------------------------------------------------------------------- */

section p{
	margin-left: 2em;
}

section h1{
	font-size: 1.5em;
	margin-left: 1em;
}

section h2{
	font-size: 1.3em;
	margin-left: 1em;
}

section h3{
	font-size: 1em;
	margin-left: 1.5em;
}

section .navi{
	margin-left: 2em;
}

table{
	border: 0px;
	margin-left: 2em;
}



/* テキスト装飾：副次項目 ------------------------------------------------------------------------------------------------- */
.clear{
	clear: right;
	clear: left;
}

.ita{
	font-style: italic;
}

.line{
	text-decoration: line-through;
}

img.border{
	border-style: solid;
	border-color: #66cc66;
	padding: 10px;
}

img.banner{
	margin: 5px;
}

p.spacer_lar{
	display: block;
	height: 300px;
	vertical-align: center;
}

p.spacer_sma{
	display: block;
	height: 100px;
	vertical-align: center;
}


p.birthday{
	font-size:+1;
}

p.monthly{
	padding-left: 1.5em;
}


/* 文字装飾、裏ぺージ用 */
p.tabi{
	color: #8b4513;
}

p.aoduki{
	color: #1e90ff;
}

p.shion{
	color: #9900cc;
}

p.gai{
	color: #2e8b57;
}

/* プロフィール用 ------------------------------------------------------------------------------------------------- */

table.prof{
	border: 1px;
	border-style: dashed;
	border-color: #99cc99;
	border-collapse: collapse;
	margin-left: 2em;
}
table.prof td{
	border: 1px;
	border-style: dashed;
	border-color: #99cc99;
}


/* 更新履歴用 ------------------------------------------------------------------------------------------------- */

table.kousin{
	width: 550px;
	border-top :solid 2px #233B6C;
	border-bottom: solid 2px #233B6C;
}

td.day{
	height: 50px;
	width: 20px;
	text-align: right;
	vertical-align: top;
	padding: 0px 5px;
	font-size: 1.5em;
	font-style: italic;
}

td.month{
	width: 20px;
	vertical-align: top;
	font-style: italic;
	padding: 0px 5px;
	border-right: solid 1px #ccc;
}

td.rireki{
     padding: 5px 10px;
}

/* ブックマーク用エリア 
------------------------------------------------------------------------------------------------- 
*/

/* リンク最上部 */
table.links_t{
     width: 550px;
     word-break: break-all;
     border-top: solid 2px #233B6C;
     border-bottom: solid 1px #233B6C;
}

/* リンク中央部 */
table.links{
     width: 550px;
     word-break: break-all;
     border-top: none;
     border-bottom: solid 1px #233B6C;
}

/* リンク最下部 */
table.links_b{
     width: 550px;
     word-break: break-all;
     border-top: none;
     border-bottom: solid 2px #233B6C;
}

/* バナー */
td.banner{
     height: 70px;
     width: 220px;
     text-align: center;
     vertical-align: center;
}

/* Name と Address 部分 */
td.side{
     width: 55px;
     height: 30px;
     padding: 0px 10px;
     font-size: small;
     vertical-align: top;
}

/* サイト名、アドレス表示部 */
td.side2{
     vertical-align: bottom;
     text-align: left;
}

/* サイトについての一言欄 */
td.hitokoto{
     height: 30px;
     padding: 3px 10px;
}

/* 動作確認表 ------------------------------------------------------------------------------------------------- */
table.dousa{
	width: 500px;
	border: 1px;
	border-style: solid;
	border-color: #99cc99;
	border-collapse: collapse;

}

table.dousa tr{
	border: 1px;
	border-style: dashed;
	border-color: #99cc99;
	border-collapse: collapse;
}

table.dousa td.icon{
	width: 40px;
	height: 40px;
	text-align: center;
	vertical-align: center;
	border: 1px;
	border-style: dashed;
	border-color: #99cc99;
	border-collapse: collapse;
}

table.dousa td.browser{
	width: 200px;
	height: 40px;
	text-align: left;
	vertical-align: center;
	padding-left: 10px;
}

.t_right{
	width: 50px;
}
.t_righttop{
	width: 50px;
	vertical-align: top;
}

.jump{
	border-width: 0px;
}

.c_right{
	width: 90px;
}
.c_left{
	width: 250px;
}
.c_righttop{
	width: 70px;
	vertical-align: top;
}
.c_image{
	width: 270px;
	vertical-align: center;
	text-align: center;
}


/* ノベル整理用 ------------------------------------------------------------------------------------------------- */
table.novels{
	margin-left: 2em;
	width: 200px;
	border: 0px;
}

table.novels tr{
	text-align:right
}


.left{
	text-align: left;
}

.right{
	text-align: right;
}

.super{
	font-size: small;
	vertical-align: super;
}

.small{
	font-size: small;
}

/* 画廊用 
------------------------------------------------------------------------------------------------- 
*/

#honbun_img.img{
width: 200px;
height: 150px;
}

span.gallery img {
     width: 200px;
     height: 150px;
     padding: 10px 10px 25px 10px;
     background: #fefefe;
     border: 1px solid #fff;
     -moz-box-shadow: 0px 2px 15px #333;
     box-shadow: 0px 2px 15px #333;
     position: relative;
}

     span.gallery a.pic-1 {
         width: 200px;
         height: 150px;
         z-index: 1;
         -o-transform: rotate(-10deg);
         -ms-transform: rotate(-10deg);
          -moz-transform: rotate(-10deg);
         -webkit-transform: rotate(-10deg);
         transform: rotate(-10deg);
     }
     span.gallery a.pic-2 {
         width: 200px;
         height: 150px;
         z-index: 5;
         -o-transform: rotate(-3deg);
         -ms-transform: rotate(-3deg);
          -moz-transform: rotate(-3deg);
         -webkit-transform: rotate(-3deg);
         transform: rotate(-3deg);
     }
     span.gallery a.pic-3 {
         width: 200px;
         height: 150px;
         z-index: 3;
         -o-transform: rotate(4deg);
         -ms-transform: rotate(4deg);
          -moz-transform: rotate(4deg);
         -webkit-transform: rotate(4deg);
         transform: rotate(4deg);
     }
     span.gallery a.pic-4 {
         width: 200px;
         height: 150px;
         z-index: 4;
         -o-transform: rotate(14deg);
         -ms-transform: rotate(14deg);
          -moz-transform: rotate(14deg);
         -webkit-transform: rotate(14deg);
         transform: rotate(14deg);
     }

     span.gallery a.pic-5 {
         width: 200px;
         height: 150px;
         z-index: 2;
         -o-transform: rotate(-12deg);
         -ms-transform: rotate(-12deg);
          -moz-transform: rotate(-12deg);
         -webkit-transform: rotate(-12deg);
         transform: rotate(-12deg);
     }
     span.gallery a.pic-6 {
         width: 200px;
         height: 150px;
         z-index: 6;
         -o-transform: rotate(5deg);
         -ms-transform: rotate(5deg);
          -moz-transform: rotate(5deg);
         -webkit-transform: rotate(5deg);
         transform: rotate(5deg);
     }
     span.gallery a:hover {
         z-index: 10;
         -o-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     span.gallery img:hover {
         -moz-box-shadow: 3px 5px 15px #333;
         box-shadow: 3px 5px 15px #333;
     }


div.gazou{
     width: 400px;
     padding: 10px;
     margin-left: auto;
     margin-right: auto;
     box-shadow: 2px 2px 5px #666;
     -moz-box-shadow: 2px 2px 5px #666;
     -webkit-box-shadow: 2px 2px 5px #666;
}

div.gazou hr{
     border-style: dashed;
     border-color: #6495ed;
     border-width: 1px;
}

/* フォーム用 ------------------------------------------------------------------------------------------------- */
div.login{
     margin-left: 60px;
     margin-top: 30px;
     font-size: 120%;
}

div.login input{
     width: 200px;
     height: 20px;
     margin-top: 10px;
     margin-left:20px;
}

div.lbtn {
     text-align: center;
     margin:30px;
}
div.lbtn button {
     width: 150px;
     height: 50px;
}


/* フッター ------------------------------------------------------------------------------------------------- */

#h_nav a{
	margin: 0px 1em;
	text-decoration: underline;
}