/*ページのレイアウト用css*/
html,body{
    /*壁色と壁紙設定*/
    background: url(img/style/dot.gif); 
    background-repeat:repeat-xy; /*繰り返さない場合はno-repeatに変更*/
    background-position: 50% 0% ;
      color: #484848; /* ページ全体の基本フォントカラー */
      margin:0px;
      padding:0px;
    height:auto;
    width:100%;
     position:absolute;
    letter-spacing: 0.5px;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Verdana,'ＭＳ Ｐゴシック',sans-serif;
}

#bodyimage_race{
    background-image:url(img/style/race.png) ;  
    background-repeat: repeat-x; /*繰り返さない場合はno-repeatに変更*/
    background-position: top left ;
    padding-top:40px
}

#bodyimage_selfPortrait{
    background-image:url(img/style/selfPortrait.png) ;  
    background-repeat: no-repeat; /*繰り返さない場合はno-repeatに変更*/
    background-position: left bottom ;
}

#bodyimage3{
    background-image:url(img/style/star.png) ;  
    background-repeat: repeat-x; /*繰り返さない場合はno-repeatに変更*/
    background-position: top left;
}

#scr {
  overflow: scroll;   /* スクロール表示 */ 
  width: 100px;
  height: 100%;
  background-color: red;
}

/*チェックされていない時 */
.to-be-changed { 
    color: black;
}
/*チェックされた時 */
input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

/***********************文字の設定***********************/
h1{
      font-size:70%;
      letter-spacing: 2px;
      padding-left:10px;
      margin: 0px;
}
h2{
      font-size:120%;
    border: solid 2px #cccccc;
        color:#ffffff;
    line-height: 35px;
      padding-left:10px;  
      margin-top: 10px;
      margin-bottom: 1px;
}

#leftli{
    padding-left:15px;
    list-style-image:url(img/style/mark.png); 
    list-style-position: outside;
}

/* リンクが張られている文字の色 */
a{
      text-decoration:none;
    color:#4c8dd0;
}

/*リンクがある文字でオンマウスした時の色*/
a:hover {
    color: #d0a34c;
    text-decoration: none;
}

a img.hover{
    opacity:1.0;/*ＩＥ以外ブラウザ半透明70%の指定*/
    filter: alpha(opacity=100);/*IE用半透明70%の指定*/
    transition: all .3s;
}

a:hover img.hover{
    opacity:0.4;
    filter: alpha(opacity=450);
    transition: all .3s;
}

a img{
    border:none;
}


/* タイトルの色 */
h1 a{
    color:#FFFFFF;
    font-weight:normal;
}

/* 見出し用 */
h3{
    background-color:#d2ebff;
    background-image:url(img/style/dot_mini.gif);
    background-repeat: repeat-xy; 
    font-size:120%;
    letter-spacing: 2px; /*文字同士の間隔*/
    padding-left:3px;
    padding-top:3px;
    padding-bottom:3px;
    margin: 0px;
}

/* ページタイトルのスタイル */
#title{
    color:#cccccc;
    /*background-color:#d2ebff;*/
    font-size:250%;
    /*font-weight:bold;*/
    border-bottom:dashed 2px #cccccc;
    letter-spacing: 6px; /*文字同士の間隔*/
    padding-left:3px;
    padding-top:3px;
    padding-bottom:3px;
    margin: 0px;
}

.subtitle, .subtitle_aco{
    background-color:#fff;
    font-size:100%;
    font-weight:bold;
    color:#f19090;
    border:dashed 2px #ffc3c3;
    letter-spacing: 1px; /*文字同士の間隔*/
    padding-left:3px;
    padding-top:3px;
    padding-bottom:3px;
    margin: 0px;
}

.subtitle_aco:hover, .subtitle_selected{
    background-color:#ffc3c3;
    color:#fff;
    border:dashed 2px #fff;
    cursor:pointer;
}

.table_area{
    display:none;
}

.table_activearea{
    display:inline;
}

#subsubtitle{
    background-color:#fff;
    font-size:100%;
    font-weight:bold;
    color:#0066CC;
    letter-spacing: 1px; /*文字同士の間隔*/
    padding-left:3px;
    padding-top:3px;
    padding-bottom:3px;
    margin: 0px;
}

/* ギャラリー：イラスト更新エリア背景 */
.new_area{
	border-bottom:dotted 1px #ffc3c3;
}
/* new文字背景 */
.bg-circle{
	display:inline-block;
	text-align:center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
	background-color: #ffc3c3;/* 円の色 */
	color:#fff;
	vertical-align:top;
}
.fo{
vertical-align:top;
padding-top:15px;
}

/**********************コンテンツ**********************/
#contents{      
          width:850px;
    height:100%;
    margin:0 auto; 
    /*background-image:url(img/mainback.jpg); */
    /*background-repeat:repeat-xy; */
    background-color:#ffffff;
      font-size:80%;
    box-shadow:5px 5px 3px #575757;
    -moz-box-shadow:5px 5px 3px #575757;
    -webkit-box-shadow:5px 5px 3px #575757;
    border-radius:20px 20px 0px 0px;
    -webkit-border-radius:20px 20px 0px 0px;
    -moz-border-radius:20px 20px 0px 0px;

}

#topimg{
	display:block;
	text-align:center;
}

/**********************ヘッダー部分の設定**********************/
#header{
    position:absolute;
    background-image:url(img/style/header.jpg); /*ヘーダー*/
    background-repeat:no-repeat;
    background-color:#666666;
    position:relative;
    width:100%;
    height:100px; /*ヘッダーの高さ*/
    border-radius:20px 20px 0px 0px;
    -webkit-border-radius:20px 20px 0px 0px;
    -moz-border-radius:20px 20px 0px 0px;
    
}

/* タイトルの位置 */
#header a{
    font-size: 25px;
    height:60px;
    width:276px;
        color:#ffffff;
    padding-bottom: 60px;
    padding-left: 276px;
    margin-left: 10px;
    background-image:url(img/logo.png); /*ヘーダー*/
    background-repeat:no-repeat;
}

#header text{
    height:60px;
    width:276px;
    text-align:right;
    color:#fff;
}

/**********************（左）メニューボタンの設定**********************/
#navbar{
    position:absolute;
    /* 背景画像を固定する */
    /*background-attachment:fixed; */
        width: 180px;
    height:auto;
    font-weight: bold;
    padding-left: 5px;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));/*IE10*/
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255,255,255,0)));/* Safari,Google Chrome用 */ 
    background: -moz-linear-gradient( left,#fff, rgba(255,255,255,0));　/* Firefox用 */  
    
}

#navbar ul{
          margin:0;
    padding-top: 15px;
    padding-left:0px;
      list-style-type:none;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height:53px;
      letter-spacing:2px; /* 文字同士の間隔 */
}

#navbar li{
    background-image:url(img/style/menuback_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar home li{
    background-image:url(img/style/home_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar contact li{
    background-image:url(img/style/contact_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar blog li{
    background-image:url(img/style/blog_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar profile li{
    background-image:url(img/style/profile_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:no-repeat;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar illust li{
    background-image:url(img/style/illust_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar pbbs li{
    background-image:url(img/style/pbbs_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:no-repeat;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:170px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
    padding-left:10px;
}

#navbar bbs li{
    background-image:url(img/style/bbs_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}

#navbar linkpage li{
    background-image:url(img/style/link_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
}
#navbar clap li{
    background-image:url(img/style/clap_click.png);  /*上部メニューのボタンの背景*/
    background-repeat:repeat-xy;
    float:bottom;/*メニューボタンが下に回り込む設定*/
    width:150px;  /*メニューボタンの幅*/
    height:71px;
    text-align:center;/*文字がボタンのセンターに来る設定*/
    padding:0;/*隙間を空けない指定*/
    text-indent:100%;
    overflow:hidden;
}


/*>>オンマウス<<*/
#navbar ul a:hover{
    background: none;

}

#navbar ul a{
    background-image:url(img/style/menuback.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}

#navbar ul home a{
    background-image:url(img/style/home.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul contact a{
    background-image:url(img/style/contact.png);    /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul profile a{
    background-image:url(img/style/profile.png);    /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul blog a{
    background-image:url(img/style/blog.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul illust a{
    background-image:url(img/style/illust.png); /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul pbbs a{
    background-image:url(img/style/pbbs.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:170px; 
    height:53px;
    margin-left:-10px;
    padding-left: 10px;
    background-repeat:no-repeat;
    background-color:rgba(255,255,255,1);
}
#navbar ul bbs a{
    background-image:url(img/style/bbs.png);    /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul linkpage a{
    background-image:url(img/style/link.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:180px;  /*メニューボタンの幅*/
    height:53px;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}
#navbar ul clap a{
    background-image:url(img/style/clap.png);   /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
    width:150px;  /*メニューボタンの幅*/
    height:71px;
    padding:0;
    background-color:rgba(255,255,255,1);
    background-repeat:no-repeat;
}

#navbar a{
      color:#ffffff;/*メニューボタンの文字の色*/
      display:block;
}

/*リンクがある文字でオンマウスした時の色*/
#navbar a:hover{
   color:#4fa5cc;
   }


/**********************TOP画像**********************/
#topimage{
    position:relative;
    margin-right: 0px;
    margin-left: 200px;
    margin-top: 10px;
    margin-bottom: -10px;
      font-size:80%;
}



/**********************メイン部分の設定**********************/
#main{
    position:relative;
    width:610px;
    height:auto;
    background-color:#ffffff;
    margin-top:0px;
    margin-bottom:5px;
    margin-left:200px;
    min-height:495px;
    padding-left:10px;
}

/**********************下部のフッター部分の設定**********************/
#address{
    position:relative;
    width:850px;
    height:auto;
      font-size:80%;
      font-style:normal;
      text-align:center;
    background-color:#666666;
      color:#ffffff;
      padding-bottom:10px;
    padding-top:5px;
      border:none;
}

#address a{
      color:#ff9999;
      }


/**********************ブロック要素**********************/

#table {
    display:table;
    border-collapse: separate;
}
/* tr要素 */
.row {
    display:table-row;
}
/* td要素 */
.row>le {
    display:table-cell;
    width:100px;
    margin:15px;
    padding:5px;
    border:2px #fff solid;
    background-color:#EFDBA9;
    color:#ffffff;/* フォントカラー */
    font-weight: bold;
}
.row>ri {
    display:table-cell;
    width:600px;
    margin:15px;
    padding:5px;
    border:2px #fff solid;
    background-color:#fff;
}
.row>td_left {
    display:table-cell;
    width:100px;
    margin:15px;
    padding:5px;
    color:#0066CC;
    font-weight: bold;
    border:1px #fff dotted;
    background-color:#fff;
}
.row>td_right{
    display:table-cell;
    width:600px;
    margin:15px;
    padding:5px;
    border:1px #fff solid;
    background-color:#fff;
}
.row>td_l {
    border-collapse: separate;
    display:table-cell;
    width:100px;
    height: 500px
    margin:8px;
    padding:2px;
    color:#0066CC;
    font-weight: bold;
    /*border-right:2px #808080 solid;
    border-top:1px #fff solid;
    border-bottom:3px #fff solid;
    border-left:1px #fff solid;*/
    background-color:#fff;
}

.row>td_c{
    border-collapse: separate;
    display:table-cell;
    width:500px;
    margin:15px;
    padding:5px;
    border:1px #fff solid;
    background-color:#fff;
}

.row>td_c line{
    display:table-cell;
    margin:15px;
    padding:5px;
    font-weight: bold;
    border-left:2px #808080 solid;
}
.row>td_r{
    display:table-cell;
    width:80px;
    height:80px;
    margin:15px;
    padding:5px;
    border:1px #fff solid;
    background-color:#fff;
}



/**********************ページの先頭へ戻る**********************/
#pagetop{
    font-weight:bold;
    position: fixed;
    bottom: 0px;
    right: 20px;
}

#pagetop a {

    background: #444;
    text-decoration: none;
    color: #fff;
    padding:15px;
    padding-left:60px;
    text-align: center;
    display: block;
    border-radius:20px 20px 0px 0px;
    -webkit-border-radius:20px 20px 0px 0px;
    -moz-border-radius:20px 20px 0px 0px;
    box-shadow:2px 2px 3px #888;
    -moz-box-shadow:2px 2px 3px #888;
    -webkit-box-shadow:2px 2px 3px #888;
    background-image:url(img/style/arrow.png);
    background-repeat:no-repeat;
    background-position:15% 50%;
}

#pagetop a:hover {
    text-decoration: none;
    background: #aaa;
    background-image:url(img/style/arrow_hover.png);
    background-repeat:no-repeat;
    background-position:15% 20%;
}

#img{
margin:0;
}

/*********************スクロールバーボックス**********************/
.scr{
    overflow: auto;   /* スクロール表示 */ 
    width: 600px;
    height: 150px;
}

.nav-unshown {
  display:none;
}





/* 850px以下 */
@media screen and  (max-width: 850px) {
	#contents{
		width:100%;
		padding:0px;
		margin:0px;
		box-shadow:none;
    	-moz-box-shadow:none;
    	-webkit-box-shadow:none;
	}
	#topimg img{
		width:100%;
		height:auto;
	}
	#main{
		width:100%;
	    margin:0;
	    padding-left:0;
	}
	#address{
	    width:100%;
	}
	.scr{
	    width:90%;
	}
	
	/*メニュー部分*/
	#navbar {
	    background-color: #fff;
	    box-sizing: border-box;
	    height: 100%;
	    padding: 10px 40px;
	    position: fixed;
	    left: -250px;
	    top: 0;
	    transition: transform 0.3s linear 0s;
	    width: 250px; /*メニュー横幅*/
	    z-index: 1000;
	}

	/*メニューアイコン部分は疑似要素で*/
	#navbar::before {
	    background-color: #fff; /*ボタン部分背景色*/
	    border-radius: 0 0px 10px 0px; /*左下角丸*/
	    color: #808080; /*アイコン（フォント）色*/
	    content: "≡";
	    display: block;
	    font-size: 50px; /*アイコン（フォント）サイズ*/
	    height: 50px;
	    line-height: 50px; /*縦位置中央化*/
	    position: absolute;
		left:100%;
	    text-align: center;
	    top: 0;
	    width: 50px;
	}

	/*透過背景部分*/
	#navbarbg {
	    background-color: #333; /*黒背景部分背景色*/
	    display: block;
	    height: 100%;
	    opacity: 0;
	    position: fixed;
	    right: 0;
	    top: 0;
	    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
	    width: 100%;
	    z-index: -1;
	}

	/*hover 時の処理*/
	#navbar:hover {
	    transform: translate(250px);
	}

	#navbar:hover + #navbarbg {
	    opacity: 0.5; /*黒背景部分透過度*/
	    z-index: 999;
	}

}