@charset "utf-8";
/* Version 17.0.20180526 */
/* Responsive: yes */

/*
	配色計画
	color1 is forcus & active color.
	color2 is selected color.

	color:	#00B294;
	color1:	#007D68;
	color2:	#006B59
*/

/* 2020年まで使えるfont-familyのベストプラクティス - Qiita http://qiita.com/RinoTsuka/items/4181efd43d072e246519 */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}


/* 2-3 standard.css */
*{padding:0;margin:0}
body {
	background-color: #CCCCCC;
	background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/m/morokoshidog/20180526/20180526143558_original.jpg?1527313007');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}
a img{
	border: 0; vertical-align: middle
}
li, dd {
	margin-left: 20px;
}

a{
	color: #00B294;
}
a:active, a:hover{
	color: #007D68
}



/* 2-4 base design.css */
#blog-title-inner{
	display: none;
}


.active-button{
	background-color: #00B294
}
.active-button:active{
	background-color: #007D68
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .archive-heading h2{
	color: #00B294;
}
.entry-categories{
	background-color: transparent
}
#header-body, .entry-footer, .archive-entry-header, .entry-header-menu{
	background-color: #F0F0F0
}
#container{
	background-color: rgba(255,255,255,0.8); !important
}

.entry-categories a, .categories a,{
	font-size: x-small;
}

.leave-comment-title, .entry-categories a, .entry-header-menu a, .entry-see-more, .pager-prev a, .pager-next a, .categories a, .breadcrumb-link{
	border: 1px #CCCCCC solid;
	background: white;
	font-family: 'Yu Gothic UI', 'Segoe UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo', 'Arial', 'MS PGothic', sans-serif;
}
.entry-see-more{
	margin-top: 15px
}

.leave-comment-title:active, .leave-comment-title:focus, .leave-comment-title:hover,
.entry-categories a:active, .entry-categories a:focus, .entry-categories a:hover, 
.entry-header-menu a:active, .entry-header-menu a:focus, .entry-header-menu a:hover,
.entry-see-more:active, .entry-see-more:focus, .entry-see-more:hover,
.pager-prev a:active, .pager-prev a:focus, .pager-prev a:hover,
.pager-next a:active, .pager-next a:focus, .pager-next a:hover,
.categories a:active, .categories a:focus, .categories a:hover, 
.breadcrumb-link:active, .breadcrumb-link:focus, .breadcrumb-link:hover
{
	border-color: #007D68;
	background-color: #007D68;
	color: white;
}


#title{
	text-align: center;
	margin: auto;
	display: none;
}
#title a{
	text-decoration: none;
}
.keyword {
	color: black;
	text-decoration: none;
	border-bottom: 1px silver dashed;
}

#header{
	background-color: #535353
}



/* 2-5 navigation.css */
/* NavigationBar */
#Navigation{
	display: table-cell;
	position: fixed;
	/*padding-top: 20px*/
}

#Navigation li{
	list-style:none;
	margin: 0;
}
#Navigation a{
	text-decoration: none;
	display: block;
	color: black;
	padding: 10px 0
}
#Navigation a:hover, #Navigation a:active, #Navigation a:focus{
	background-color: #DADADA;
}
#Navigation .Selected{
	background: white;
}
#SearchNavigaton a{
	display: inline-block;
}
#Navigation svg{
	border-left: 4px transparent solid;
	vertical-align: middle;
	padding-left: 8px;
	width: 32px;
	height: 24px;
}
#Navigation .Selected svg{
	border-color: #007D68;
	
}
#Navigation span{
	display: inline-block;
	vertical-align: middle;
}

/* Search module */
#Navigation .search-form {
	background-color: white;
	border: 2px #CCCCCC solid;
	margin: 10px
}
#Navigation .search-module-input {
  padding: 5px;
  color: #454545;
  background: none;
  border: none;
  width: 180px;
  display: inline-block
}
#Navigation .search-module-button {
  width: 30px;
  background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png?version=3d50a683c86fed692c38a9e0bb3242) no-repeat center center;
  border: none;
  outline: none;
  text-indent: -9999px;
  display: inline-block;
}
#Navigation .search-module-button:hover {
  opacity: 0.85;
  filter: alpha(opacity=85);
}



/* 2-6 entry.css */
/* 記事 */
.entry-title h1, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
	line-height: 90%
}

.entry-content h3{
	font-size: 1.5em;
	background-color: #EAFFFC;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
}
.entry-content h4{
	font-size: 1.2em;
	border-bottom: 1px #00B294 solid;
}
.entry-content h4, .entry-content h5{
	margin-top: 10px;
	margin-bottom: 10px;
}


.entry-title, .entry-title a, .hatena-module-title, .hatena-module-title a{
	text-decoration: none;
	font-size: x-large !important;
	color: black;
	text-decoration: none;
}

.entry-date, .date {
	display: none;
}

.entry-header {
	margin: 5px 0 0 0;
}
.entry-content, .archive-heading{
	margin: 0 0 0 0;
	padding: 10px 0;
	word-wrap: break-word;
}
#top-box{
	margin: 5px 0;
	padding: 5px 20px
}
.entry-footer, .google-afc-text blog_archive{
	margin: 0 0 5px 0;
	padding: 10px 0 20px 0;
}
.hatena-module, .search-result{
	background-color: white;
	margin: 10px 0;
	padding: 5px 20px;
}
.archive-entry, .search-result {
	margin-right: 0;
	background-color: white;
	margin: 10px 0;
}
.entry-title{
	padding: 5px 0 0 0;
	/*font-family: 'Yu Gothic UI Light', 'Segoe UI Light', 'Yu Gothic UI', 'Segoe UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo', 'Arial', 'MS PGothic', sans-serif;*/
	font-weight: lighter
}
.categories, .entry-header-menu{
	padding: 0 0 5px 0;
}
.archive-entry-body{
	padding: 0 0 5px 0;
}

.entry-content{
	background-color: white;
}
.leave-comment-title, .entry-categories a, .entry-header-menu a, .entry-see-more, .pager-prev a, .pager-next a, .categories a, .breadcrumb-link{
	padding: 2px 10px;
	margin: 5px 0;
	display: inline-block;
	text-decoration: none;
}

.entry-content img {
	display: block;
	margin: 0 auto;
	/*width: 100%;
	height: 100%;*/
	max-width: 400px;
	border: 1px #CCCCCC solid;
	background-color: white;
	box-shadow: 1px 1px 3px black;
	padding: 4px;
	margin: 5px !important;
}
.entry-comment{
	list-style: none;
	background: white;
	padding: 5px 0;
	margin: 5px;
}
.entry-footer-section, .entry-footer-section a, .comment-user-name a, .google-afc-text blog_archive, comment-metadata{
	color: gray;
}
.pager{
	margin: 10px;
	text-align: center;
	
}
#footer{
	display: none;
}

#container{
	display: table;
	table-layout: fixed;
	width: 100%
}
#content{
	width: 100%
}
.breadcrumb-gt{
	color: gray;
	padding: 0 5px;
}
.entry-content table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1em;
}
.entry-content table img {
  max-width: none;
}
.entry-content table th,
.entry-content table td {
  border: 2px solid #E6E6E6;
  padding: 5px 10px;
}
.entry-content table th {
  background: #F2F2F2;
}
.entry-content blockquote {
  margin: 10px;
  padding: 10px;
}
.entry-content blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content pre {
  border: 2px solid #E6E6E6;
  margin: 0 0 10px;
  padding: 20px;
  white-space: pre;
}
.entry-content pre > code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: 0;
  background: transparent;
}
.entry-content code {
  font-size: 90%;
  margin: 0 2px;
  padding: 0 5px;
  border: 2px solid #E6E6E6;
  background-color: #f8f8f8;
  border-radius: 3px;
}
pre.code {
  font-family: "Monaco", "Consolas", 'Yu Gothic UI', "Courier New", Courier, monospace, sans-serif !important;
  margin: 15px
}

.entry-content .hatena-asin-detail li {
  line-height: 1.4;
}

.embed-card, .embed-webcard{
	margin:0 !important;
}


/* 2-7 flexible.css */
@media (max-width: 400px) {
	body{

	}
	#Navigation{
		display: none;
	}
	#top-box, #main{
		margin: 5px 0 0 0 !important;
	}

}
@media (min-width: 401px) {
	body{

	}

}

@media (max-width: 799px) {
	#Navigation{
		width: 45px
	}	
	#Navigation span, #Navigation .search-form{
		display: none;
	}
	#top-box, #main{
		margin: 5px 0 0 50px;
	}
	.entry-content h4, .entry-content h5, .entry-content h6, .entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote {
		margin-left: 5px;
		margin-right: 5px;
	}
}
@media (min-width: 800px) {
	html, body {

	}
	.entry-content h4 {
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}
	.entry-content h5, .entry-content h6, .entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content pre {
		margin-left: 30px !important;
		margin-right: 30px !important;
	}
	.entry-footer, .google-afc-text blog_archive{
		padding: 10px 20px 20px 20px;
	}
	.entry-content, .archive-heading{
		padding: 10px 20px;
	}
	.entry-title{
		padding: 5px 20px 0 20px;
	}
	.categories, .entry-header-menu{
		padding: 0 20px 0 20px;
	}
	.archive-entry-body{
		padding: 0 20px 5px 20px;
	}

	.entry-content h3{
		margin: 25px 0 15px 0;
	}
	.entry-see-more{
		margin: 20px 0 0 auto;
		text-align: right;
	}

	#SearchNavigaton svg, #SearchNavigaton a{
		display: none
	}
	#Navigation{
		width: 240px
	}
	#top-box, #main{
		margin: 5px 0 0 245px !important;
	}
/*	.entry-header {
		margin: 0 0 0 0;
	}
	.entry-content, .archive-heading{
		margin: 0 0 0 0;
	}
	.entry-footer, .google-afc-text{
		margin: 0 0 0 0;
	}
	.hatena-module, .archive-entry, .search-result {
		margin: 10px 0;
	}
	#Navigation svg{
		margin-right: 0;
	}
*/
}

@media (min-width: 1000px) {
	body {
		background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/m/morokoshidog/20180526/20180526143603_original.jpg?1527313202');
	}
/*	#top-box{
		margin: 10px 20px;
	}
	#Navigation{
		padding-top: 10px
	}

	#top-box, #main{
		margin: 5px 0 0 255px !important;
	}

	.entry-header {
		margin: 10px 0 0 0;
		padding: 5px 20px 5px 20px;
	}
	.entry-content, .archive-heading{
		margin: 0 0 0 0;
		padding: 10px 20px;
	}
	.no-entry{
		margin: 10px 0 0 0;
	}
	.entry-footer, .google-afc-text{
		margin: 0 0 0 0;
		padding: 10px 20px 20px 20px;
	}
	.hatena-module, .archive-entry, .search-result {
		margin: 10px 0;
		padding: 17px 20px;
	}
	.archive-entry, .search-result {
		margin-right: 0
	}
	#box2{
		display: none;
	}*/
}



/* 2-8 printable.css */
@media print{
	#Navigation, #globalheader-container, .entry-footer{
		display: none;
	}
	#top-box, #main{
		margin-left: 0 !important;
	}

}