@charset "UTF-8";

/* 共通 */
body {
	text-decoration:none;
	background-color:#262626;
	font-family: 'M PLUS 1p', sans-serif;
	overflow: scroll;
	color:#F2F2F2;
	font-weight:400;
	margin:0;
}

div{
	transform:rotate(0.03deg);
}


a:link, a:visited,  a:hover, a:active{
	color:#FDFDFD ;
	text-decoration: none;
	text-shadow:none;
}


/* 上部ナビゲーションバー */
#navigation{
	background-color:#cc2623;
	width:100%;
	height:60px;
	left:0px;
	top:0px;
	position:fixed;
	z-index:100;
}

#navigation_inner{
	height:60px;
	text-decoration:none;
	margin: 0px auto;
	text-align:left;
	font-weight:700;
	font-size:20px;
	line-height:60px;
	width:100%;
	max-width:900px;
	color:#F2F2F2;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
	display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
}

#site-title{
	padding-left:10px;
}


/* 右寄せ */
#navigation_inner label:nth-of-type(1) {
    	margin-left: auto;
}

/* タブ機能 */
input[name="tab-item"] {
	display: none;
}

#icons{
	height:60px;
	right:0px;
	display:inline;
	text-align:right;
}

#menu-btn span, #content-btn span, #thumbs-btn span{
	opacity:1;
	transition: all 0.2s;
}

#menu-btn-chk:checked ~ div #menu-btn span, #content-btn-chk:checked ~ div #content-btn span, #thumbs-btn-chk:checked ~ div #thumbs-btn span{
	opacity:0.5;
	transition: all 0.2s;
}

#content,#thumbs{
	display:none;
	transition: opacity 0.2s;
}

#menu-btn-chk:checked ~ div #menu, #content-btn-chk:checked ~ div #content, #thumbs-btn-chk:checked ~ div #thumbs{
	animation: show 0.2s linear 0s;
	display:block;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;

  }
}

@keyframes hide {
  0% {
    opacity: 1;
	transform:translateY(0);
  }
  99% {
    opacity:0;
	transform:translateY(0)
  }
  100% {
	opacity: 0;
	transform:translateY(-100%);
  }
}

/* プルダウンメニュー */
#menu{
	width:100%;
	position: fixed;
	z-index:20;
	opacity: 0;
	animation: hide 0.1s linear 0s;
	animation-fill-mode:forwards;
	overflow:hidden;
}

#menu-btn-chk:checked ~ div #menu{
	display:block;
	top:60px;
	animation: show 0.1s linear 0s;
	animation-fill-mode:forwards;
}

.menu-list{
	background-color:#801716;
	opacity:1;
	text-align:right;
	line-height:30px;
	color:#f2f2f2;
	width:100%;
	max-width:900px;
	height:0px;
	font-size:15px;
	margin: 0px auto;
	padding:0px 10px;
	display:block;
	position:relative;
	animation-fill-mode:forwards;
	border-top:2px solid #803d3c;
	box-sizing: border-box;
	transition: all 0.2s;
}

#menu-btn-chk:checked ~ div .menu-list{
	height:30px;

}

/* 本編 */

#content a, #content a:link,#content a:visited,#content a:active{
	color: #FDFDFD;
	text-decoration: none;
	text-shadow: #FC0 0 0 5px;
}

#content a:hover{
	color: #FDFDFD;
	text-decoration: underline;
	text-shadow: #FC0 0 0 5px;
}

#maincontents{
	position:relative;
	top:60px;
	margin:0px auto;
	width:100%;
	max-width:900px;
	z-index:10;
}

#content{
	margin:0 auto;
	padding:20px;
	max-width:720px;
}

#content #title{
	margin:10px 0px;
	font-size:24px;
	font-weight:700;
	width:100%;
}

#content #date{
	font-size:12px;
	text-align:right;
	width:100%;
}

#content #note{
	margin:10px 0;
	font-size:16px;
	max-width:720px;
	word-break : break-word;
}

#content #tag{
	color:#aaa;
	font-size:12px;
	width:100%;
}

/* markdown */

#content #note h1,h2{
	font-size:18px;
	background-color:#801716;
	color:#F2F2F2;
	margin:20px 0 4px 0px;
	padding:2px 10px 2px 10px;
	width:max-content;
	max-width:100%;
}

#content #note h3{
	font-size:16px;
	background-color:#444;
	color:#F2F2F2;
	margin:20px 0 4px 0px;
	padding:2px 10px 2px 10px;
	width:max-content;
	max-width:100%;
}

#content #note p{
	margin:10px 0px;
	font-size:16px;
	max-width:720px;
	word-break : break-word;
}

#content #note ul{
	margin:0;
}

#content #note hr{

}

#content code{
	transform:rotate(-0.03deg);
	background-color: #111;
	font-family: 'M PLUS 1p', sans-serif;
}

#content img{
	width:100%;

}

/* サムネイルタブ */
#thumbs {
	margin: 0 auto 0 auto;
}

#thumbs .item{
	box-sizing: border-box;
	text-align:center;
	vertical-align:middle;
	overflow:hidden;
	width:160px;
	margin:10px 10px 10px;
	border:1px solid #333;
	border-radius:5px;
	height:auto;
	display:grid;
}

#thumbs .item p{
	margin:10px;
	position:absolute;
	bottom: 0;
	left:0;
	right:0;
	word-break : break-all;
}

#thumbs .item img{
	width:160px;
}

/* loading */
#loading{
	background:#262626;
	position:absolute;
	left:0%;
	top:0%;
	width:100%;
	height:100%;
	z-index:1000;
	overflow: hidden; 
}
#loading img{
	position:fixed;
	left:50%;
	margin-left:-100px;
	top:50%;
	margin-top:-100px;
}
#pleaseTrunOnJS{
	position:fixed;
	top:50%;
	width:100%;
	height:100%;
	margin-left:auto;
	margin-top:-200px;
	text-align:center;
	color: #000000;
	z-index:1000;
}

blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
　width: 100%;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}