/* <system section="background" selected="default"> */
/* default */
/* </system> */
@charset "utf-8";
/*
  Theme: boilerplate
  Author: Hatena Blog Team
  Description:
    はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。
    このテーマをもとにしてCSSを書くと比較的楽にカスタマイズできます。
    特定の部分（例えば記事本文の書式やコメント欄のスタイルなど）だけをコピーして使ってもかまいません。
    もちろんそのままの状態でも、シンプルなテーマとして使うことができます。
    このCSSおよびLESSファイルは自由に複製・再配布できます。
    このテーマをもとにしたデザインテーマの配布も自由です。
  Licensed under the MIT license.
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clearfix{display:block;*zoom:1}.clearfix:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.inline-block{display:inline-block;*display:inline;*zoom:1}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body,html{font-family:Helvetica Neue,Helvetica,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif;color:#454545;background-color:#fff}a{color:#1487bd}a:hover{color:#0f5373}a:visited{color:#789dae}h1 a,h1 a:hover,h1 a:visited,h2 a,h2 a:hover,h2 a:visited,h3 a,h3 a:hover,h3 a:visited,h4 a,h4 a:hover,h4 a:visited,h5 a,h5 a:hover,h5 a:visited,h6 a,h6 a:hover,h6 a:visited{color:#333;text-decoration:none}a.keyword{border-bottom:1px dotted #ddd}.btn,a.keyword{text-decoration:none;color:#454545}.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 10px;margin-bottom:0;line-height:18px;background-color:#fff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:9pt;font-weight:700;border:1px solid rgba(0,0,0,.2)}.btn,.btn:hover{text-decoration:none!important}.btn:hover{background-color:#f5f5f5}.btn-small{padding:2px 10px!important;font-size:11px!important}.btn-large{padding:13px 19px;font-size:17px;line-height:normal;font-weight:700}#globalheader-container{background-color:#333;color:#fff;position:fixed;top:0;left:0;width:100%}#container{width:940px;margin-left:auto;margin-right:auto;margin-bottom:30px;padding-top:37px}#container #content{display:block;*zoom:1}#container #content:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.globalheader-off #container{padding-top:0}#main{width:600px;float:left}#box2{width:300px;float:right}#blog-title{margin:30px 0;padding:20px 0}#title{margin:0}#title a{color:#454545}#blog-description{font-weight:400;font-size:80%;margin:5px 0 0}.header-image-enable #title{padding-top:70px}.header-image-enable #blog-description,.header-image-enable #title{padding-left:20px}#top-box{margin:10px auto 20px;font-size:90%}#top-box .breadcrumb{border:1px solid #ddd;padding:10px}.entry{position:relative;margin-bottom:75pt}.entry-header{padding:0 0 10px;margin-bottom:20px;border-bottom:1px solid #ddd;position:relative}.entry-title{margin:0;line-height:1.3;font-size:160%}.date{font-weight:700;margin-bottom:10px}.date a{color:#1487bd;text-decoration:none;font-size:90%}.categories{margin-top:10px;font-size:80%}.categories a{color:#999}.categories.no-categories{margin:0}.entry-header-menu{position:absolute;bottom:0;left:-60px}.entry-header-menu a{display:inline-block;*display:inline;*zoom:1;padding:4px 10px;margin-bottom:0;line-height:18px;color:#454545;background-color:#fff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:9pt;text-decoration:none;font-weight:700;border:1px solid rgba(0,0,0,.2);text-decoration:none!important}.entry-header-menu a:hover{background-color:#f5f5f5;text-decoration:none!important}.entry-content{font-size:95%;line-height:1.7;padding-bottom:10px;border-bottom:1px solid #ddd}.entry-content p{margin:0 0 1em}.entry-content img{max-width:100%}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1.3em 0 .8em;line-height:1.5}.entry-content h1{font-size:160%}.entry-content h2{font-size:150%}.entry-content h3{font-size:140%}.entry-content h4{font-size:130%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content table{border-collapse:collapse;border-spacing:0;margin-bottom:1em}.entry-content table img{max-width:none}.entry-content table td,.entry-content table th{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#f5f5f5}.entry-content blockquote{border:1px solid #ddd;margin:0 0 10px;padding:20px}.entry-content blockquote p{margin-top:0;margin-bottom:0}.entry-content pre{border:1px solid #ddd;margin:0 0 10px;padding:20px;white-space:pre}.entry-content pre>code{margin:0;padding:0;white-space:pre;border:0;background:transparent;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content code{font-size:90%;margin:0 2px;padding:0 5px;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content .hatena-asin-detail li{line-height:1.4}.entry-footer{margin-top:10px}.entry-footer-section{font-size:80%;color:#999}.entry-footer-section a{color:#999}.entry-footer-html,.social-buttons{margin:10px 0}.comment-box ul{list-style:none;margin:0 0 15px;padding:0;font-size:95%;line-height:1.7}.comment-box li{padding:10px 0 10px 60px;border-bottom:1px solid #ddd;position:relative}.comment-box li:first-child{border-top:1px solid #ddd}.comment-box .read-more-comments{padding-left:0}.comment-box .hatena-id-icon{position:absolute;top:10px;left:0;width:50px!important;height:50px!important;border-top-right-radius:3px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:3px;background-clip:padding-box}.comment-user-name{margin:0 0 10px;font-weight:700}.comment-content{font-size:90%;margin:0 0 10px;word-wrap:break-word}.comment-content p{margin:0 0 10px}.comment-metadata{font-size:80%;color:#999;margin:0}.comment-metadata a{color:#999}.leave-comment-title{display:inline-block;*display:inline;*zoom:1;padding:4px 10px;margin-bottom:0;line-height:18px;color:#454545;background-color:#fff;text-align:center;vertical-align:middle;border-top-right-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;background-clip:padding-box;cursor:pointer;font-size:9pt;text-decoration:none;font-weight:700;border:1px solid rgba(0,0,0,.2);text-decoration:none!important}.leave-comment-title:hover{background-color:#f5f5f5;text-decoration:none!important}#box2{font-size:85%;line-height:1.5}.hatena-module{margin-bottom:60px}.hatena-module-title{font-weight:700;margin-bottom:15px;font-size:120%}.hatena-module-title a{color:#454545;text-decoration:none}.hatena-module-title a:hover{text-decoration:underline}.hatena-module-profile .profile-icon{float:left;margin:0 10px 10px 0;border-top-right-radius:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:5px;background-clip:padding-box}.hatena-module-profile .id{display:block;font-weight:700;font-size:110%;margin-bottom:5px}.hatena-module-profile .profile-description{font-size:90%}.hatena-module-profile .profile-description p{margin-top:0}.hatena-urllist{list-style:none;margin:0;padding:0}.hatena-urllist li{padding:8px 0;border-bottom:1px solid #ddd;line-height:1.5}.hatena-urllist li a{text-decoration:none}.hatena-module-search-box .search-form{border:1px solid #ddd;border-top-right-radius:3px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:3px;background-clip:padding-box;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;position:relative}.hatena-module-search-box .search-module-input{padding:5px;color:#454545;background:0 0;border:0 0;outline:0;height:20px;width:90%}.hatena-module-search-box .search-module-button{width:20px;height:20px;background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png?version=263e782f4058acf5109a8ca03f06e0)no-repeat right center;border:0 0;outline:0;text-indent:-9999px;position:absolute;top:5px;right:5px;opacity:.5}.hatena-module-search-box .search-module-button:hover{opacity:.85}.pager{margin:1em 0;display:block;*zoom:1}.pager:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.pager .pager-prev{float:left;text-align:left;width:45%}.pager .pager-next{float:right;text-align:right;width:45%}#footer{padding:30px 0;text-align:center;color:#999;line-height:1.5;font-size:80%}#footer p{margin:0}#footer a{color:#999}.page-about dt{font-size:1pc;font-weight:700;border-bottom:1px solid #dfdfdf;margin-bottom:5px}.page-about dd{margin-left:0;margin-bottom:30px}.page-archive .archive-entries .archive-entry{margin-bottom:3em}.page-archive .archive-entries .entry-title{font-size:130%;margin:0 0 .5em}.page-archive .archive-entries .categories{margin:0 0 .5em}.page-archive .archive-entries .entry-description{margin:0 0 1em;line-height:1.7em;font-size:95%}.page-archive .categories a{color:#fff;font-size:70%;background:#aaa;padding:3px 5px;border-radius:3px;text-decoration:none;display:inline-block;*display:inline;*zoom:1;margin-right:2px}@media (-webkit-min-device-pixel-ratio:2){.hatena-module-search-box .search-module-button{background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=263e782f4058acf5109a8ca03f06e0)no-repeat right center;background-size:20px 20px}}@media (min-width:768px) and (max-width:1024px){#container{width:724px}#main{width:460px}#box2{width:245px}}@media (max-width:767px){#globalheader-container{position:static}#container{width:93.75%;word-wrap:break-word;overflow:hidden;padding-top:0}#box2-inner{width:100%}#box2,#main,.hatena-module{width:100%;float:none}.entry-header-menu{top:-30px;left:0}}



body * {
    box-sizing: border-box;
	transition: all 0.3s;
}
/*
body::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}
body::-webkit-scrollbar-thumb {
    background: #333;
}
*/
body {
    font-family: 'arial' ,游ゴシック, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    border-top: 4px solid #333;
}
a, a:visited {
	color: #333;
}
a:active, a:hover {
	color: #789dae;
}
.entry-content a {
    text-decoration: none;
}
#bottom-editarea {
    border-top: 3px double #dfdfdf;
    padding: 30px 0 40px 0;
}
#blog-title {
    text-align: center;
}
#blog-title h1 {
    font-size: 2.5rem;
    font-weight: bold;
    /*text-shadow: 0 0 12px #dfdfdf;*/
}
#container {
    width: 100%;
    margin-bottom: 0;
    padding: 0;
}
#content-inner {
	width: 1100px;
	margin: 0 auto;
    position: relative;
}
#content-inner::after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
@media screen and (max-width: 1200px) {
#content-inner {
    width: 100%;
}
}
#wrapper {
    width: 728px;
}
@media screen and (max-width: 1200px) {
#wrapper {
    width: 90%;
    margin: 0 auto;
}
}
#main {
    width: 100%;
}
@media screen and (max-width: 1200px) {
#main {
    float: none;
}
}
#box2 {
    width: 336px;
	font-size: 95%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
#box2-inner {
    width: 100%;
}
@media screen and (max-width: 1200px) {
#box2 {
    width: 90%;
    float: none;
    margin: 0 auto;
}
}
.date a:active,
.date a:visited {
	color: #1487bd;
}
.entry {
	margin-bottom: 22px;
}
.entry-title a {
    font-size: 18px;
}
.entry-inner {
    width: 100%;
}
.entry-content {
	font-size: 102%;
}
.entry-content > p {
    margin: 0 0 0.6em 0;
}
.entry-content > p > a {
    padding-bottom: 4px;
    border-bottom: 1px solid #9aa5ab;
}
.entry-content > ul {
    padding-left: 20px;
}
.hatena-module {
	margin-bottom: 40px;
    flex: 0 0 100%;
}


.entry .categories {
  margin: 16px 0;
  font-size: 80%;
}
.entry .categories a {
  display: inline-block;
  padding: 2px 4px;
  margin-bottom: 4px;
  color: #111;
  background-color: #f0f0f0;
  text-decoration: none;
}

.page-entry #box2 .hatena-module:nth-child(4),
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(4),
.page-about #box2 .hatena-module:nth-child(4),
.page-entry #box2 .hatena-module:nth-child(5),
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(5),
.page-about #box2 .hatena-module:nth-child(5),
.page-entry #box2 .hatena-module:nth-child(6),
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(6),
.page-about #box2 .hatena-module:nth-child(6),
.page-entry #box2 .hatena-module:nth-child(7),
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(7),
.page-about #box2 .hatena-module:nth-child(7),
.page-entry #box2 .hatena-module:nth-child(3) .hatena-module-title,
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(3) .hatena-module-title,
.page-about #box2 .hatena-module:nth-child(3) .hatena-module-title,
.page-entry #box2 .hatena-module:nth-child(5) .hatena-module-title,
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(5) .hatena-module-title,
.page-about #box2 .hatena-module:nth-child(5) .hatena-module-title,
.page-entry #box2 .hatena-module:nth-child(6) .hatena-module-title,
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(6) .hatena-module-title,
.page-about #box2 .hatena-module:nth-child(6) .hatena-module-title,
.page-entry #box2 .hatena-module:nth-child(7) .hatena-module-title,
.page-archive:not(.page-index) #box2 .hatena-module:nth-child(7) .hatena-module-title,
.page-about #box2 .hatena-module:nth-child(7) .hatena-module-title {
    display: none;
}

.page-entry #box2 .hatena-module:nth-child(2),
.page-archive #box2 .hatena-module:nth-child(2),
.page-about #box2 .hatena-module:nth-child(2) {
    margin-bottom: 7px;
}


/** for toppage */
.page-index #content {
    margin-bottom: 30px;
}
.page-index #box2 .hatena-module:nth-child(2),
.page-index #box2 .hatena-module:nth-child(3),
.page-index #box2 .hatena-module:nth-child(5),
.page-index #box2 .hatena-module:nth-child(7),
.page-index #box2 .hatena-module:nth-child(8) {
    display: none;
}

.page-index #content-inner {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /*flex-direction: row-reverse;*/
    padding: 0 10px;
}
@media screen and (max-width: 860px) {
.page-index #content-inner {
    flex-wrap: wrap;
}
}
.page-index #wrapper {
    /*width: 100%; */
    flex: 0 0 49%;
}
@media screen and (max-width: 860px) {
.page-index #wrapper {
    flex: 0 0 100%;
}
}
.page-index #main {
    width: 100%;
    position: relative;
    padding-top: 67px;
}
.page-index #main::before {
    position: absolute;
    top: 0;
    right: 0;
    content: 'あたらしい記事';
    margin-left: -3.5em;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    border-top: 4px double #dfdfdf;
    padding-top: 7px;
    border-bottom: 4px double #dfdfdf;
    padding-bottom: 7px;
    display: block;
    width: 100%;
}
.page-index #box2 {
    flex: 0 0 49%;
}
@media screen and (max-width: 860px) {
.page-index #box2 {
    flex: 0 0 100%;
}
}
.page-index #main-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}






/* 最新の部分 */
.page-index .archive-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page-index .archive-entry {
    flex: 0 0 49%;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 480px) {
.page-index .archive-entry {
    flex: 1 0 100%;
}
}
.page-index .archive-entry:hover {
    background-color: #f7f7f7;
}
.page-index .archive-entry:first-child {
    flex: 1 0 100%;
}
.page-index .archive-entry-header {
    order: 3;
    position: relative;
}
.page-index .date {
    position: absolute;
    bottom: 110%;
}
.page-index .date::before {
    margin-right: 3px;
    padding-left: 2px;
    font-family: blogicon;
    content: '\f043';
	color: #1487bd;
}
.page-index #main-inner .entry-title {
    padding: 0 0 0.7em 0;
    line-height: 1.2;
    font-size: 1rem;
}
.page-archive #main-inner .entry-title:hover,
.page-index #main-inner .entry-title a:hover,
.page-index #main-inner .entry-title a:active {
    text-decoration: none;
}
.page-archive .entry-title {
    border: none;
    color: #333;
}
.page-index .archive-entries .categories {
    order: 2;
    text-align: right;
    margin: 0.7rem 0 0.7rem 0;
}
.page-index .archive-entries .categories a {
	margin-right: 0;
	border-radius: 0px
}
@media screen and (min-width:861px) and ( max-width:1024px) {
.page-index .archive-entries .categories {
    opacity: 0;
}
}


/** for thumbnail animation **/
.page-index .entry-thumb-link {
    order: 1;
    overflow: hidden;
    border: 1px solid #dfdfdf;
    background-color: #333;
    display: block;
    position: relative;
}
.page-index .entry-thumb-link::before,
.page-index .entry-thumb-link::after {
    position: absolute;
    display: block;
    max-height: 280px;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    content: '';
    transition: all .5s;
}
.page-index .entry-thumb-link::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: scale(0, 1);

    padding-top: 105px;
    content: 'Read More';
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    font-family: quicksand;
}
.page-index .entry-thumb-link::after {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: scale(1, 0);
}
.page-index .archive-entry:hover .entry-thumb-link::before {
    box-sizing: border-box;
	transform: scale(1);
}
.page-index .archive-entry:hover .entry-thumb-link::after {
    box-sizing: border-box;
	transform: scale(1);
}
.page-index .entry-thumb {
    width: 100%;
    height: 250px;
    max-height: 280px;
    position: relative;
    z-index: 0;
    background-repeat: no-repeat;
	background-size: cover;
}
.page-index .entry-thumb:not(.img-loaded) {
	filter: brightness(80%) contrast(120%) blur(10px);
}
.page-index .archive-entry:hover .entry-thumb {
    opacity: .5;
	filter: brightness(80%) contrast(120%) blur(6px);
    background-color: rgba(0,0,0,0.95);
}



.page-index .archive-entry-body {
    order: 3;
    display: none;
}


/* サイドバーの調整 */
.page-index .hatena-module {
    margin-bottom: 20px;
}
.page-index .hatena-module-title {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    border-top: 4px double #dfdfdf;
    padding-top: 7px;
    border-bottom: 4px double #dfdfdf;
    padding-bottom: 7px;
}
.page-index .hatena-module-title a:hover,
.page-index .hatena-module-title a:active {
	text-decoration: none;
}


/* 人気記事 */
.page-index .hatena-module-entries-access-ranking ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page-index .hatena-module-entries-access-ranking li {
    position: relative;
    margin: 0 0 32px 0;
	padding: 0;
    flex: 0 0 49%;
}
@media screen and (max-width: 480px) {
.page-index .hatena-module-entries-access-ranking li {
    flex: 1 0 100%;
}
}
.page-index .hatena-module-entries-access-ranking li:hover {
    background-color: #f7f7f7;
}
.page-index .hatena-module-entries-access-ranking .urllist-image-link {
    display: block;
    overflow: hidden;
    border: 1px solid #dfdfdf;
    position: relative;
}
.page-index .hatena-module-entries-access-ranking .urllist-image-link::before {
	position: absolute;
    display: block;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    content: '';
    opacity: 1;
	transition: all .3s;
    border: 1px solid #fff;
    transform: scale(1.5);
}
.page-index .hatena-module-entries-access-ranking .urllist-item:hover .urllist-image-link {
    background-color: rgba(0,0,0,0.95);
}
.page-index .hatena-module-entries-access-ranking .urllist-item:hover .urllist-image-link::before {
    transform: scale(1);
}
.page-index .hatena-module-entries-access-ranking .urllist-image-link::after {
	transition: all .5s;
}
.page-index .hatena-module-entries-access-ranking .urllist-item:hover .urllist-image-link::after {
    position: absolute;
    display: block;
    max-height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -.5em;
    margin-left: -2.5em;
    content: 'Read More';
    font-family: quicksand;
    letter-spacing: 0.1em;
    z-index: 10;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
}

.page-index .hatena-module-entries-access-ranking li img {
	transform: scale(1.1);
}
.page-index .hatena-module-entries-access-ranking li:hover img {
	transform: scale(1.2);
    opacity: .85;
    filter: blur(4px);
}
.page-index .hatena-module-entries-access-ranking .urllist-date-link a {
    color: #1487bd;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 8px 5px 1px 5px;
}
.page-index .hatena-module-entries-access-ranking .urllist-date-link a::before {
    margin-right: 3px;
    padding-left: 2px;
    /*
    font-family: FontAwesome;
    content: '\f017';
    */
    font-family: blogicon;
    content: '\f043';
}
.page-index .hatena-module-entries-access-ranking .urllist-title-link {
    font-size: 1rem;
    font-weight: bold;
    padding: 1px 5px 8px 5px;
	display: inline-block;
}





.entry-header {
    position: relative;
}
.entry-header .entry-categories {
    position: absolute;
    top: 3px;
    right: 6px;
    margin: 0;
}
.page-entry .entry-header .entry-date {
    margin: 0 0 20px 0;
}



/* カテゴリ */
.hatena-module-category .hatena-urllist {
	padding-top: 10px;
}
.hatena-module-category .hatena-urllist::after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
.hatena-module-category .hatena-urllist li {
	float: left;
    padding: 0;
    border: none;
}
.hatena-module-category .hatena-urllist a {
    display: block;
	padding: 6px 8px;
	margin-bottom: 8px;
	margin-right: 8px;
	border: 1px dotted #dfdfdf;
    position: relative;
}

.page-index .hatena-module-category .hatena-urllist a::before,
.page-index .hatena-module-category .hatena-urllist a::after {
	position: absolute;
    display: block;
    width: 0;
    height: 0;
    z-index: 3;
    content: '';
	transition: all .5s;
    border: 1px solid transparent;
}
.page-index .hatena-module-category .hatena-urllist a::before {
    top: -1px;
    left: -1px;
}
.page-index .hatena-module-category .hatena-urllist a::after {
    bottom: -1px;
    right: -1px;
}
.page-index .hatena-module-category .hatena-urllist li:hover a::before,
.page-index .hatena-module-category .hatena-urllist li:hover a::after {
    width: 100%;
    height: 100%;
}
.page-index .hatena-module-category .hatena-urllist li:hover a::before {
    border-top-color: #789dae;
    border-right-color: #789dae;
    transition: width .2s, height .2s .2s;
}
.page-index .hatena-module-category .hatena-urllist li:hover a::after {
    border-bottom-color: #789dae;
    border-left-color: #789dae;
    transition: width .2s .4s, height .2s .6s;
}

.page-index .custom-about {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	margin: 0 0 12px 0;
}
@media screen and (max-width: 1200px) {
.custom-about {
    margin: 12px 0 12px 0;
}
}

@media screen and (max-width: 480px) {
.page-index .custom-about {
    flex-wrap: wrap;
}
}
.page-index .custom-profile {
    flex: 0 0 49%;
}
@media screen and (max-width: 480px) {
.page-index .custom-profile {
    flex: 0 0 100%;
}
}
.search-form {
    border: 1px solid #dddddd;
    background-clip: padding-box;
    width: 100%;
    position: relative;
    margin: 12px 0 0 0;
}
.page-index .search-form {
    margin: 0;
}
.search-form .search-module-input {
    padding: 10px;
    color: #454545;
    background: none;
    border: none;
    outline: none;
    font-size: 1.2rem;
    width: 80%;
}

.page-index .search-form .search-module-input {
    padding: 15px;
    font-size: 1.4rem;
    width: 90%;
}
.search-form .search-module-button {
    width: 20%;
    height: 100%;
    background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png?version=263e782f4058acf5109a8ca03f06e0) no-repeat center center;
    border: none;
    border-left: 1px solid #888;
    outline: none;
    text-indent: -9999px;
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0.6;
}
.page-index .search-form .search-module-button {
    width: 10%;
}
.search-form .search-module-button:hover {
    opacity: 0.95;
}

/* follow btn */
.follow-btn-area {
    flex: 0 0 49%;
    position: relative;
}
@media screen and (max-width: 480px) {
.follow-btn-area {
    flex: 0 0 100%;
}
}
.follow-btn-area ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
    align-items: center;
}
.follow-btn-area li {
    flex: 0 0 33.33%;
}
.follow-btn-area a {
	width: 64px;
	height: 64px;
    margin: 0 auto;
    display: block;
	font-size: 12px;
    font-weight: bold;
	line-height: 80px;
	text-decoration: none;
	text-align: center;
	color: #626969;
    border: 2px solid #626969;
    border-radius: 50%;
    position: relative;
    transition: all .85s;
}
.follow-btn-area a:hover,
.follow-btn-area a:active,
.follow-btn-area a:hover .follow-btn-icon,
.follow-btn-area a:active .follow-btn-icon {
    color: #fff;
    transform: rotateY(360deg);
}
.follow-btn-area a.follow-hatena:hover,
.follow-btn-area a.follow-hatena:active {
	background-color: #38393C;
	border-color: #38393C;
}
.follow-btn-area a .tooltip {
    display: inline;
    opacity: 0;
	position: absolute;
    width: 8em;
    top: -45px;
    left: 50%;
    border-radius: 4px;
    font-size: 13px;
    line-height: 13px;
    margin-left: -4em;
    z-index: 5;
    padding: 10px;
    color: #fff;
	transition: all .3s .4s;
}
.follow-btn-area a .tooltip::after {
    content: '';
    position: absolute;
    top: 99.5%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
}
.follow-btn-area a:hover .tooltip {
    opacity: 1;
}
.follow-btn-area a.follow-hatena .tooltip {
    background-color: #38393C;
}
.follow-btn-area a.follow-hatena .tooltip::after {
    border-top-color: #38393C;
}

.follow-btn-area a.follow-twitter:hover,
.follow-btn-area a.follow-twitter:active {
	background-color: #55acee;
    border-color: #55acee;
}
.follow-btn-area a.follow-twitter .tooltip {
    background-color: #55acee;
}
.follow-btn-area a.follow-twitter .tooltip::after {
    border-top-color: #55acee;
}

.follow-btn-area a.follow-feedly:hover,
.follow-btn-area a.follow-feedly:active {
	background-color: #6cc655;
    border-color: #6cc655;
}
.follow-btn-area a.follow-feedly .tooltip {
    background-color: #6cc655;
}
.follow-btn-area a.follow-feedly .tooltip::after {
    border-top-color: #6cc655;
}
.follow-btn-icon  {
    position: absolute;
    top: -20px;
    left: 20px;
    left: center;
	display: inline-block;
	font-family: blogicon;
    color: #626969;
    font-size: 180%;
}
.follow-btn-area .btn-icon-hatena:before{
	content: "\f000";
}
.follow-btn-area .btn-icon-twitter:before{
	content: "\f035";
}
.follow-btn-area .btn-icon-feedly:before{
	content: "\f04e";
}




.side-tab {
    display: inline-block;
    width: 24%;
    text-align: center;
    padding: 10px 0px 5px 0px;
    font-size: 13px;
    cursor: pointer;
}
.side-tab:hover {
    background-color: #dfdfdf;
}
.side-tab.active {
	border-left: 1px solid #dfdfdf;
	border-top: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
}
.hatena-module-tab-title {
    border-bottom: 3px double #dfdfdf;
}

.module-contents .hatena-module-title {
    padding: 6px 6px 6px 16px;
    border-left: 7px solid #111;
    font-weight: bold;
}

.page-entry #box2 .urllist-image-link,
.page-archive #box2 .urllist-image-link,
.page-about #box2 .urllist-image-link {
    display: block;
    overflow: hidden;
    float: left;
    margin: 0 .6em 0 0;
}
.page-entry #box2 .urllist-image,
.page-archive #box2 .urllist-image,
.page-about #box2 .urllist-image {
    margin: 0;
    float: none;
	transform: scale(1.1);
}
.page-entry #box2 .urllist-image-link img:hover,
.page-archive #box2 .urllist-image-link img:hover,
.page-about #box2 .urllist-image-link img:hover {
	transform: scale(1.2);
    opacity: .85;
}
.page-entry #box2 .urllist-title-linke,
.page-archive #box2 .urllist-title-link,
.page-about #box2 .urllist-title-link {
    font-size: 100%;
}


/* 記事中見出し */
.entry-content h2,
.entry-content h3 {
    margin: 36px 0px 20px 0px;
}
.entry-content h2 {
    position: relative;
    padding: 0 0 .3em 0;
    font-size: 22px;
}

.entry-content h2::before,
.entry-content h2::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    height: 4px;
}
.entry-content h2::before {
    z-index: 2;
    width: 15%;
    background-color: #444;
}
.entry-content h2::after {
    width: 100%;
    background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

.entry-content h3 {
	position: relative;
	padding: 0 0 .3em 0;
	border-bottom: 1px solid #ccc;
	font-size: 20px;
}
.entry-content h3::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 3px;
	background-color: #333;
}

/* 手動関連記事エリア */
.entry-content h2.related-entry {
    position: relative;
    padding: .25em 0 .5em .75em !important;
    border-left: 6px solid #ccc;
}
.entry-content h2.related-entry::before {
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    content: '';
    width: 6px;
    height: 50%;
    background-color: #333;
}
.entry-content h2.related-entry::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
}
.entry-content p.related-entry a {
    position: relative;
    display: inline-block;
    border-bottom: none;
}
.entry-content p.related-entry a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #333;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.entry-content p.related-entry a:hover::after {
    width: 100%;
}




/* 目次のデザイン */
ul.table-of-contents {
    padding: 20px 10px 20px 40px;
    margin: 0;
    position: relative;
}
.entry-content ul.table-of-contents::before {
    content: '目次';
    font-weight: bold;
    display: inline-block;
    padding: 0 0 10px 5px;
}
.entry-content ul.table-of-contents::after {
/*
    font-family: FontAwesome;
    content: "\f0ca";
    */
    font-family: blogicon;
    content: "\f039";
    position: absolute;
    top: 18px;
    left: 20px;
}
ul.table-of-contents a {
	text-decoration: none;
}
.table-of-contents li,
.table-of-contents ul{
    list-style-type: decimal;
}
.table-of-contents{
    padding: 20px 10px 20px 40px;
    border: 3px double #dfdfdf;
}
.table-of-contents ul{
    font-size: 95%;
    margin-left: 25px;
    padding-left: 0;
}

/* 追従型モジュール */
#box2-inner ul.side-table-of-contents {
	padding: 0;
    font-size: 100%;
    line-height: 170%;
    border: none;
}
#box2-inner ul.side-table-of-contents ul {
    padding: 0 0 0 15px;
}
#box2-inner ul.side-table-of-contents li {
    list-style-type: none;
}
#box2-inner ul.side-table-of-contents a {
    display: block;
    padding: 2px 5px 2px 5px;
    width: 100%;
    box-sizing: border-box;
    color: #333;
    text-decoration: none;
}
#box2-inner ul.side-table-of-contents a.active {
    background-color: #e4e4e4;
}
#box2-inner .module-fixed {
    position: sticky;
    top: 1rem;
}

/* 更新日の取得 */
.lastmod {
	color: #1487bd;
    padding: 5px 6px;
    text-decoration: none;
    font-size: 90%;
    display: inline;
    margin-left: 3px;
}
.lastmod::before {
    margin-right: 5px;
    padding-left: 3px;
    /*
    font-family: FontAwesome;
    content: '\f021';
    */
    font-family: blogicon;
    content: '\f02b';
}
.entry-date a {
    padding: 5px 6px;
}
.entry-date a::before {
    margin-right: 3px;
    padding-left: 2px;
    /*
    font-family: FontAwesome;
    content: '\f017';
    */
    font-family: blogicon;
    content: '\f043';
}
.pubdate {
    display: inline-block;
}


/* シェアボタン */
.share-button {
    text-align: center;
    margin: 20px 0 20px 0;
}
@media screen and (max-width: 1200px) {
.share-button {
    margin: 0 0 20px 0;
}
}
.share-button a {
	display: inline-block;
	width: 52px;
	height: 52px;
	padding: 5px 0;
	line-height: 16px;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	vertical-align: bottom;
	border: 3px double #dfdfdf;
	color: #565656;
}
.share-button a:hover {
	opacity: 0.6;
}
.share-button .hatena-bookmark-button {
	padding-top: 1px;
}
.share-button .hatena-bookmark-button .lg {
	font-size: 32px;
}
.share-button .facebook-button .lg  {
	font-size: 28px;
}
.share-button .twitter-button .lg {
	font-size: 27px;
}
.share-button .googleplus-button .lg  {
	font-size: 23px;
}
.share-button .pocket-button .lg {
	font-size: 24px;
}

.share-button .hatena-bookmark-button:hover {
	color: #00A4DE;
	border-color: #00A4DE;
}
.share-button .facebook-button:hover {
	color: #405BA7;
	border-color: #405BA7;
}
.share-button .twitter-button:hover {
	color: #55ACEE;
	border-color: #55ACEE;
}
.share-button .googleplus-button:hover {
	color: #C53727;
	border-color: #C53727;
}
.share-button .pocket-button:hover {
	color: #EE4256;
	border-color: #EE4256;
}


/* コンテンツ下関連記事 */
#box2 .hatena-module-related-entries {
    display: none;
}
#content > .hatena-module-related-entries {
    clear: both;
    margin: 0 auto;
    border-top: 3px double #dfdfdf;
    padding: 16px 40px;
}
#content > .hatena-module-related-entries .hatena-module-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
}
#content > .hatena-module-related-entries ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#content > .hatena-module-related-entries .hatena-module-body li {
    position: relative;
    margin: 0 0 20px 0;
	padding: 0;
	width: 25%;
	overflow: hidden;
    flex: 0 0 24%;
}
@media screen and (max-width: 860px) {
#content > .hatena-module-related-entries .hatena-module-body li {
	width: 33%;
    flex: 0 0 32%;
}
}
@media screen and (max-width: 620px) {
#content > .hatena-module-related-entries .hatena-module-body li {
	width: 50%;
    flex: 0 0 48%;
}
}
@media screen and (max-width: 480px) {
#content > .hatena-module-related-entries .hatena-module-body li {
	width: 100%;
    flex: 0 0 100%;
}
}
#content > .hatena-module-related-entries .hatena-module-body li:hover {
    background-color: #f7f7f7;
}
#content > .hatena-module-related-entries .hatena-module-body .urllist-image-link {
    display: inline-block;
    overflow: hidden;
	max-height: 180px;
    border: 1px solid #dfdfdf;
}
#content > .hatena-module-related-entries .hatena-module-body li img {
	transform: scale(1.1);
}
#content > .hatena-module-related-entries .hatena-module-body li:hover img {
	transform: scale(1.2);
    opacity: .85;
}
#content > .hatena-module-related-entries .urllist-date-link a {
    color: #1487bd;
    display: inline-block;
    padding-bottom: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 8px 5px 1px 5px;
}
#content > .hatena-module-related-entries .urllist-title-link {
    font-size: 1rem;
    font-weight: bold;
    padding: 1px 5px 8px 5px;
	display: inline-block;
}

/* pager */
.page-index .pager {
    width: 100%;
}
.page-index .pager .pager-next {
    float: none;
    text-align: center;
}
.page-index .pager a {
    display: block;
    width: 100%;
    padding: 12px;
	text-decoration: none;
    border: 1px solid #dfdfdf;
}
.page-index .pager a:hover,
.page-index .pager a:active {
	border: 1px solid #999999;
	color: #222;
}

/* ページトップへ戻るボタン */
#page-top-area {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}
#page-top-button {
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    display: block;
    cursor: pointer;
}
#page-top-button:hover{
    color: rgba(0,0,0,0.95);
}




/** reset **/
#wrapper {
    float: none;
}

.date {
    border: none;
}
.date a {
    font-size: .95rem;
}
.lastmod {
    font-size: .95rem;
}
.page-entry .entry-header .entry-date {
    margin: 0 0 8px 0;
}
.entry-header .entry-categories {
    top: 0;
    right: 0;
}
.page-index .entry-header {
    max-height: 120px;
}
#blog-description {
    display: block;
}
.page-index .pager .pager-next {
    width: 100%;
    max-width: 100%;
}
.entry-footer-section {
    font-size: 95%;
}
.pager-permalink a {
    display: inline-block;
    padding: 7px;
	text-decoration: none;
    border: 1px solid #dfdfdf;
}
.pager-permalink a:hover,
.pager-permalink a:active {
	border: 1px solid #999999;
	color: #222;
}

.pager-permalink .pager-prev,
.pager-permalink .pager-next {
    max-width: none;
}
.entry-header-menu {
    display: none !important;
}

.hatena-module-body li {
    margin: 0;
}

.page-archive .date {
    margin: 0;
}

.leave-comment-title {
    margin: 0;
    margin-bottom: 8px;
}
.comment-content {
    font-size: 14px;
}
.page-archive .categories a {
    font-size: 100%;
    background-color: #f0f0f0;
    color: #111;
    border-radius: 0;
}


#breadcrumb ol {
    margin: 0;
    padding: 0;
}
#breadcrumb li {
    display: inline-block;
    font-size: .9rem;
}
#breadcrumb li:not(:last-child)::after {
    content: '\00bb';
    display: inline;
    margin: 0.35rem;
}
#breadcrumb {
    margin-bottom: 10px;
}
.guest-footer-content {
    display:none;
}