@charset "UTF-8";
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(//fonts.googleapis.com/css?family=Lobster+Two);

html{overflow-y: scroll; background: url(../images/bg_common.png) fixed #f3f1ef;}

body{
	 font-family: "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",メイリオ, Meiryo,'ＭＳ Ｐゴシック',  Verdana, "ＭＳ Ｐゴシック", "MS PGothic", "VL Pゴシック", "Takao Pゴシック", "IPA Pゴシック", sans-serif;
	 -webkit-text-size-adjust: none;
	font-size: 100%;
	color:#3d454d;
	padding: 0 120px 0 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*{margin:0;padding:0;list-style:none;}

::-moz-selection {
  background: #000;
  color: #ffffff;
  text-shadow: none;
}
::selection {
  background: #000;
  color: #ffffff;
  text-shadow: none;
}

a{text-decoration: none;}
/*==============================================
post list	
==============================================*/
.wrapper{width:980px; margin: auto;}

#container{
	padding:35px 6px 45px 6px;
	margin-bottom: 40px;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	/*opacity:0;
	-webkit-animation:initContainer 2s 2s linear forwards;
	-moz-animation:initContainer 2s 2s linear forwards;*/
	/*-ms-animation:initContainer 2s 4s linear forwards;*/
}

#container ul{width: auto; margin: auto; text-align: center;}
#container li{height:auto; display: block; text-align: left; float: none; width: 800px; margin:0 auto 50px auto; box-shadow: 2px 3px 4px #ccc;   /* border: 1px solid #ccc; */ background:#fff;
-webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
       font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}





#container li p{font-size: 130%; color: #010101; font-weight: bold; display: block; height: 480px; max-width: 450px;  width: 450px; max-height:480px; overflow-x: auto; padding: 55px; float: right;
  -webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
  line-height: 1.2em;
  background: #f6f6f6;
}


#container li a:hover p{background: #333; color: #fff;}


#container li table{float: right; height: 580px; width: 100px; max-width:100px;}
#container li table td{background:none; width:50px; max-width: 50px; vertical-align: top; white-space: nowrap; word-break:break-all;}

.poststatus{padding: 55px 20px; float: right;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.poststatus cite{color:#666; font-size:70%; display: block; font-style:normal; letter-spacing: -1px; display: block; max-width: 100%; word-break: break-all;}
.poststatus time{font-size: 75%; color:#666; letter-spacing: -1px; display: block;  -webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;}
.poststatus cite a:hover{text-decoration: underline; color:#000;}

.poststatus cite span,.poststatus time span{display: inline-block; height: 56px;}

div.likearea-cover{float: right; height: 400px; padding: 45px 10px;  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
font-family:'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

div.likearea{margin:10px 0 ; clear: both; display: block;
/*  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;*/
}
div.likearea.after{display: none;}
div.likearea.before{display: block;}
div.likearea a,
div.likearea b{letter-spacing:0; font-size: 65%; font-weight: bold;  padding:8px 7px 10px 7px; border-radius: 3px;
-webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
}

div.likearea i{display:inline-block; margin-bottom:5px; font-size: 130%; font-weight: normal!important; width: 1em;}
div.likearea span{display:inline-block; letter-spacing: -1px; font-weight: bold; padding:6px 8px; border:1px solid #f0f0f0; margin:6px 0 0 0; background: #f0f0f0; border-radius: 6px; text-align: center; min-width: 2em; font-size: 75%;  position: relative; z-index: 0;
  -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode:horizontal-tb;
font-family:'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
div.likearea span:before{
	content: "";
	position: absolute;
	top: -11px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #f0f0f0 transparent;

}



#container li time{font-size: 80%; color:#666; letter-spacing: -1px;}

@media screen and (max-width: 980px){
.wrapper{width:100%; margin: auto;}
#container li{width:100%;}
#container{width:auto;}
}
@media screen and (max-width: 769px){
#container li{width: 97%; box-sizing:border-box; margin: 8px auto;  max-width: auto; }
#container li p{float:none; width:100%;}
.poststatus{float: none;}
}


a.blike{color: #fff; border: 0px solid #02bd9c; background: #02bd9c;}
a.bhate{color: #fff; border: 0px solid #e62931; background: #e62931;}

b.blike{color: #fff; border: 0px solid #a9cecd; background: #a9cecd;}
b.bhate{color: #fff; border: 0px solid #e59095; background: #e59095;}

a.blike:hover{background:#035b4d;}
a.bhate:hover{background: #770b11;}
/*
.post5{font-size:200%!important;}
.post4{font-size:180%!important;}
.post3{font-size:130%!important;}
.post2{font-size:110%!important;}
.post1{font-size:80%!important;}

.rank2{min-width:650px!important;}
.rank3{min-width:750px!important;}
.rank4{min-width:850px!important;}
.rank5{min-width:950px!important;}

#item100em{min-width:600px;}
#item200em{min-width:700px;}
#item300em{min-width:800px;}
*/

#said{max-width: 780px; margin:80px auto 20px auto; box-shadow: 2px 3px 4px #ccc;    background:#fff;}
#said h1{ font-size: 145%; width: 455px; height: 500px; color: #010101; display: block; background: #f9f9f9; line-height: 1.35em; float:right; padding: 30px; font-weight:bold; font-family:"HiraMinProN-W3", "@ＭＳ 明朝", serif, sans-serif; 
 -webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; writing-mode: tb-rl;  direction:ltr;
  overflow-x: auto;
}

#container li p::-webkit-scrollbar,
#said h1::-webkit-scrollbar{ /* スクロールバー本体 */
	width: 5px;
	background: #666666;
}
#container li p::-webkit-scrollbar:horizontal,
#said h1::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
	width: 5px;
	background: #666666;
}
#container li p::-webkit-scrollbar-thumb,
#said h1::-webkit-scrollbar-thumb{ /* スクロールバーの動く部分 */
	background: #666666;
	border-radius: 2px;
}
#container li p::-webkit-scrollbar-thumb:horizontal,
#said h1::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
	background: #666666;
	border-radius: 2px;
}
#container li p::-webkit-scrollbar-track-piece:start,
#said h1::-webkit-scrollbar-track-piece:start{ /* スクロールバーの動く部分の前 */
	background: #cccccc;
}
#container li p::-webkit-scrollbar-track-piece:end,
#said h1::-webkit-scrollbar-track-piece:end{ /* スクロールバーの動く部分の後ろ */
	background: #cccccc;
}
#container li p::-webkit-scrollbar-corner,
#said h1::-webkit-scrollbar-corner{ /* スクロールバー角 */
	background: transparent;
}


#said table{float: right; height: auto; width: 190px; max-width: 190px; min-width: 190px;}
#said table td{background:none; width:63px; max-width: 63px; min-width: 63px; padding: 0 ; margin: 0; vertical-align: top; white-space: nowrap; word-break:break-all; 
}


.socialshare{padding:50px 0 50px 10px; float: left; -webkit-text-orientation: upright; -moz-text-orientation: upright; text-orientation: upright;
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
.socialshare a{display:inline-block; cursor: pointer; position: relative; text-align: center; margin:2px; padding:13px 12px;  line-height:auto; font-size:88%; color:#fff; border-radius:100%; text-align:center; background:#ccc; color: #fff;}

.socialshare .twitter:hover{background:#55acee;}
.socialshare .facebook:hover{background:#3b5998;}
.socialshare .tumblr:hover{background:#35465c;}
.socialshare .linkedin:hover{background:#0077b5;}
.socialshare .gplus:hover{background:#dc4e41;}
.socialshare .pocket:hover{background:#d3505a;}
.socialshare .slack:hover{background:#36b490;}
.socialshare .hatena:hover{background:#008fde;} .socialshare .hatenab span{font-family:"Arial Black"!important;}

@media screen and (max-width: 769px){
#said{max-width: 95%; box-sizing:border-box;}
}

/*paging*/
#page-nav{display: block; text-align: center; padding: 30px 0; width: 100%;}
#page-nav a[rel="next"]{display: block; padding: 30px; background: #000; color: #fff;}
#page-nav a[rel="next"]:hover{background: #555;}
#loading{padding: 30px; height: 1em; text-align: center;}

b.finished{display: block; padding: 40px 0 ; background: #fff; width: 100%; font-size: 140%; text-align: center; bottom: 0; position: fixed; z-index: 782364;}

/*header*/
#site-header{position: fixed; top: 0; right:0; background: #000; color: #fff; width: 54px; height: 100%; text-align: center; z-index: 9468;
 font-family:"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 box-shadow: 0 0px 10px #999;
}

#logo{text-align: center;}
#logo a{display: block; background: #ccc; color: #000; height: 48px; font-size: 17px; padding: 10px; font-family: 'Lobster Two', cursive; position: relative;}
#logo a em{display: block; font-style: normal;}
#logo a:hover{background: #000; color: #fff;}
#logo a:after{display: none;  position: absolute;  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#logo a:hover:after{background: #000; padding:10px; height: 100px; font-size: 12px; display: block; content: "トップに戻る"; left: -65px;}

nav#menu{text-align: center;}
nav#menu li{display: block; text-align: center;}
nav#menu li a{color:#fff; display: block; padding: 10px 20px; width: 14px;  margin:auto; font-size: 13px; font-weight: bold;
  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: center;}
nav#menu li a:hover{background: #303030;}
nav#menu li a i.fa{display: inline-block; margin-bottom: 5px; height: 1em;}

a#postbutton{display: inline-block; float: left; padding: 10px 15px; font-weight: bold; background: #f3f1ef; color: #000!important;}
a#postbutton:hover{color: #fff!important;}



/*ishiki form*/
#postarea{display:block; padding: 10px; max-width: 100%; text-align: center; }
#postarea .notes{font-size: 70%; text-align: left;}

#postarea textarea{width: 99%; height: 180px; margin: 0px auto; resize:none; font-size: 110%; font-weight: bold; 
font-family:"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
 -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#postarea input[type="text"]{width: 99%;}


#postarea .button{background: #006341; color: #fff; padding: 8px 20px; border: none; font-size: 100%; margin-top: 10px;}

#done{text-align: left; padding: 25px; font-family:"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 700px; height: 550px; display: block;
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
}
#done b{ font-size: 160%; display: block;}
#done p.notes{font-size: 80%; display: block; padding: 30px; background: #efefef; margin:0 25px;}

textarea{
	padding:3px;
	border:1px solid #ccc;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius:2px;
	border:1px solid #ccc;
background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgb(247,247,247) 1%, rgb(255,255,255) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(247,247,247)), color-stop(100%,rgb(255,255,255)));
background: -webkit-linear-gradient(top, rgb(247,247,247) 1%,rgb(255,255,255) 100%);
background: -o-linear-gradient(top, rgb(247,247,247) 1%,rgb(255,255,255) 100%);
background: -ms-linear-gradient(top, rgb(247,247,247) 1%,rgb(255,255,255) 100%);
background: linear-gradient(to bottom, rgb(247,247,247) 1%,rgb(255,255,255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 );
	border-radius:3px;        
	-webkit-border-radius:3px;  
	-moz-border-radius:3px;
	color:#000000;
	font-family: "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", "MS PGothic", "VL Pゴシック", "Takao Pゴシック", "IPA Pゴシック", sans-serif !important; 
	resize:vertical;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


textarea:focus,
input[type=password]:focus,
input[type=text]:focus{
	background:#FFFFFF!important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
	outline:none;
	border-color:rgba(102, 102, 102, 0.6);
	-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.4);
	-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.4);
	box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(102, 102, 102, 0.4);
}


/*form style*/
input[type=text],input[type=password],input[type=email]{
	padding:5px 0;
	line-height: 1.2em;
	border:1px solid #ccc;
background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgb(247,247,247) 0%, rgb(255,255,255) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(247,247,247)), color-stop(100%,rgb(255,255,255)));
background: -webkit-linear-gradient(top, rgb(247,247,247) 0%,rgb(255,255,255) 100%);
background: -o-linear-gradient(top, rgb(247,247,247) 0%,rgb(255,255,255) 100%);
background: -ms-linear-gradient(top, rgb(247,247,247) 0%,rgb(255,255,255) 100%);
background: linear-gradient(to bottom, rgb(247,247,247) 0%,rgb(255,255,255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 );
	box-shadow:0 1px 2px #efefef inset;
	border-radius:3px;        
	-webkit-border-radius:3px;  
	-moz-border-radius:3px;
	color:#000000;
	font-family: "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", "MS PGothic", "VL Pゴシック", "Takao Pゴシック", "IPA Pゴシック", sans-serif !important; 
}


button,input[type="button"],input[type="reset"],input[type="submit"] {cursor: pointer;}



input[type=text]:focus,input[type=password]:focus,input[type=email]:focus{
	background:#FFFFFF!important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
	outline:none;
	border-color:#666666!important;
	-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.4);
	-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.4);
	box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(102, 102, 102, 0.4);
}





/*footer*/
#site-footer{height: 50px;  display: block; margin: 100px auto 0 auto; color: #3d3935; width: 100%; text-align: center;}
#site-footer small{font-size: 90%;}
#site-footer small a{color: #010101; font-weight: bold;}

/*common*/

.center{text-align: center;}
.clear{clear:both; height:0px; font-size: 0px; float:none;}