@charset "utf-8";

html{
    margin: 0;
    padding: 0;
    height:100%;
}
body{
    margin: 0;
    padding: 0;
    height:100%;
    background-color: #f4f3f1;
    font-size: 11pt;
    color: #353637;
    font-family: "Lucida Grande",Lucida,"メイリオ",meiryo,Verdana,sans-serif;
}

/**********************/
/*　既存のタグのスタイル指定 */
/**********************/

/* テーブル */
table{
    margin:0 auto;
}
tr{
    margin: 20px;
}
th{
    white-space: nowrap;
    text-align: center;
    padding: 12px;
    margin: 5px 20px;
    background-color: rgb(200,200,200);
}
td{
    white-space: nowrap;
    padding: 1% 3%;
}

/* リンク色の指定 */
a {
    color: #05f;
}

a:visited {
    color: #a0f;
}

a:hover,
a:active {
    color: #0af;
}

/* 個別スタイル */
.center{
    margin: 0 auto;
    width:500px;
}

/* 全体レイアウト */

/* js引用注意 */
#left{
    width: 210px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: black;
    border-right: 3px solid gray;
    float: left;
}
/* js引用注意 */
#right{
    margin: 0 auto;  
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 10px solid black;  
}

/**************/
/* 左側レイアウト */
/**************/

/* ロゴ */
#logo {
	color: white;
	background-color: black;

    margin: 0 auto;
    padding: 0;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: -10px;

    border-top: 10px solid black;
}

/* 目次 */
#navi{
    background-color: black;
    font-size:20px;
    padding: 10px auto;
}
#navi li{
  display: inline;
  margin-left: 30px;
}
#navi a{
  color: white;
  text-decoration: none;
}
#navi a:hover{color: #69c;}

.post{
    padding:10px;
    margin: 0 auto;
    text-align: center;
}

/* コピーライト */
#foot{
    text-align:center;
    padding:30px;
    color:white;
    background-color: black;
    clear:both;
}
#foot a {
    padding: 8px 12px;
    color: #eee;
    text-decoration: none;
}
#foot a:hover {
    text-decoration: underline;
    color: #fafafa;
}

/* 左側デザイン */

/**************/
/* 右側レイアウト */
/**************/

/* js引用注意 */
#right-body{
    margin: 0 auto;  
    padding: 0;
    height: 90%;
    width: 80%;
}
#right-header h1{
    text-align: center;
}

/******************************/
/*    コンテンツ上の詳細なデザイン    */
/******************************/
#content-main-img{
    height: 50%;
    min-height: 200px;
    margin: 0 auto;
    display: block;
}

/* 画像のサイズをウィンドウに合わせて変更するjsで引用するためのクラス */
/* js引用注意 */
.contents-img{
    width: 100%;
    margin: auto;
    display:inline-block;
}

/* *********************************/
/* キャプションを画像上に表示するためのスタイル */
/* ********************************/
/* 参考：http://www.nxworld.net/tips/css-only-caption-effect.html */
a figure{
    text-decoration:none;
    border:0;
}
figure{
    position: relative;
    overflow: hidden;
}
figure img{
    width:100%;
    height: 100%;
}
figcaption{
    position: absolute;
    bottom: -25%;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 25%;
    background: rgba(0,0,0,.6);
    -webkit-transition: .3s;
    transition: .3s;
}
figure:hover figcaption {
    bottom: 0;
}
figure img {
    position: relative;
    z-index: 2;
}
figure h3,
figure p {
    position: absolute;
    z-index: 1;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
}
figure h3 {
    top:0;
    left:5%;
    font-size: 150%;
}
figure p {
    right:0;
    bottom:0;
    font-size: 100%;
}
figure:hover h3 {
    opacity: 1;
}
figure:hover p {
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}