@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

@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; }
/* vertical rhythm font-size */
html { font-size: 93.75%; line-height: 1.6em; }

/* content */
body:before { content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); }

body { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; min-width: 100%; min-height: 100%; color: #333333; background-color: #f8f8f8; font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Yu Gothic", YuGothic, "Noto Sans Japanese", "Noto Sans CJK JP", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif; font-weight: 500; font-feature-settings: "palt" 1; -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 0 100px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 100px inset; box-shadow: rgba(0, 0, 0, 0.15) 0 0 100px inset; }

strong { font-weight: bold; }

.page-wrap { margin: 0; padding: 0; text-align: center; word-wrap: break-word; }

div.header, h1 { font-size: 2em; line-height: 1.6em; margin-top: 0em; margin-bottom: 0em; padding: 6px; text-align: center; background-color: #222; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background-image: -moz-linear-gradient(#3c3c3c, #222222); background-image: -webkit-linear-gradient(#3c3c3c, #222222); background-image: linear-gradient(#3c3c3c, #222222); -moz-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; color: #f8f8f8; font-weight: 600; text-shadow: -1px -1px rgba(0, 0, 0, 0.7); }

a.header { display: block; text-decoration: none; width: 100%; height: 100%; color: #f8f8f8; }

/* article body */
.article-body h2 { font-size: 1.6em; line-height: 2em; margin-top: 1em; margin-bottom: 1em; background-color: #222; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background-image: -moz-linear-gradient(#3c3c3c, #222222); background-image: -webkit-linear-gradient(#3c3c3c, #222222); background-image: linear-gradient(#3c3c3c, #222222); -moz-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; color: #f8f8f8; font-weight: 600; text-shadow: -1px -1px rgba(0, 0, 0, 0.7); padding-left: 1em; }

.article-body h3 { font-size: 1.06667em; line-height: 3em; margin-top: 1.5em; margin-bottom: 1.5em; background-color: #222; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background-image: -moz-linear-gradient(#3c3c3c, #222222); background-image: -webkit-linear-gradient(#3c3c3c, #222222); background-image: linear-gradient(#3c3c3c, #222222); -moz-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; color: #f8f8f8; font-weight: 600; text-shadow: -1px -1px rgba(0, 0, 0, 0.7); margin-left: 2em; padding-left: 2em; }

.article-body h4 { font-size: 1.06667em; line-height: 3em; margin-top: 1.5em; margin-bottom: 1.5em; }

.article-body h5 { font-size: 1.06667em; line-height: 3em; margin-top: 1.5em; margin-bottom: 1.5em; }

.article-body p, ul, ol, dl, blockquote { font-size: 1em; line-height: 1.6em; margin-top: 1.6em; margin-bottom: 1.6em; margin-left: 15px; margin-right: 15px; }

.article-body li { list-style-type: disc; margin-left: 15px; }

.article-body li > p, li > ul { margin-left: 0; margin-top: 0.32em; margin-bottom: 0.32em; }

.article-body img { max-width: 100%; height: auto; width: auto; /* for IE 9 */ }

/* common */
.social-button-container { font-size: 1em; line-height: 1.6em; margin-top: 1.6em; margin-left: 15px; margin-right: 15px; width: auto; height: 30px; display: inline-block; overflow: hidden; text-align: left; vertical-align: bottom; }
.social-button-container .twitter { float: left; width: 100px; height: 30px; margin-right: 20px; overflow: hidden; }
.social-button-container .hatena { float: left; width: 120px; height: 30px; margin-right: 10px; overflow: hidden; }
.social-button-container .fb-like { float: left; height: 25px; line-height: 20px; }

a { color: #333; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; }

a:hover { color: #fcfcfc; background-color: #333; text-decoration: none; }

h1 { margin-top: 0.4em; }

div.ascii-art { font-size: 12pt; line-height: 18px; font-family: "Mona", "IPA MONAPGOTHIC", "MS PGothic", "ＭＳ Ｐゴシック", "MS Pｺﾞｼｯｸ", "MS Pゴシック", sans-serif; }

pre, code { margin: 0 auto; font-size: 9pt; font-family: Monaco, Consolas, "Courier New", monospace; overflow-x: scroll; }

hr { border-bottom: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0; -webkit-box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0; }

/* google code prettify */
/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333; }

pre .nocode { background-color: none; color: #000; }

pre .str { color: #ffa0a0; }

/* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold; }

pre .com { color: #87ceeb; }

/* comment - skyblue */
pre .typ { color: #98fb98; }

/* type    - lightgreen */
pre .lit { color: #cd5c5c; }

/* literal - darkred */
pre .pun { color: #fff; }

/* punctuation */
pre .pln { color: #fff; }

/* plaintext */
pre .tag { color: #f0e68c; font-weight: bold; }

/* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold; }

/* attribute name  - khaki */
pre .atv { color: #ffa0a0; }

/* attribute value - pink */
pre .dec { color: #98fb98; }

/* decimal         - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; }

/* IE indents via margin-left */
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: none; }

/* Alternate shading for lines */
@media print { pre.prettyprint { background-color: none; }
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; } }
ol li { list-style-type: decimal; }

ol.linenums { padding-left: 40px; font-family: Monaco, Consolas, "Courier New", monospace; }

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 { list-style-type: decimal; }

/* responsible: column drop */
.main { text-align: left; }

@media screen and (min-width: 980px) { .main { width: 650px; padding: 1px; display: inline-block; vertical-align: top; }
  .right-bar { width: 300px; padding: 1px; display: inline-block; vertical-align: top; } }
/* right bar */
.right-bar { font-size: 0.8em; line-height: 2em; margin-top: 1em; margin-bottom: 1em; }

.right-bar ul { text-align: left; }

.right-bar h2 { font-size: 1.06667em; line-height: 1.5em; margin-top: 0em; margin-bottom: 1.5em; background-color: #222; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background-image: -moz-linear-gradient(#3c3c3c, #222222); background-image: -webkit-linear-gradient(#3c3c3c, #222222); background-image: linear-gradient(#3c3c3c, #222222); -moz-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; box-shadow: rgba(255, 255, 255, 0.25) 0 0 60px inset; color: #f8f8f8; font-weight: 600; }

.right-bar h3 { font-size: 0.93333em; line-height: 0em; font-weight: 600; }

.right-bar li { list-style-type: disc; list-style-position: inside; }

blockquote { margin: 1em; padding: 1em; border: .4em solid #000000; -moz-border-radius: 1em / 1em; -webkit-border-radius: 1em 1em; border-radius: 1em / 1em; background: white; }

/* amazon */
div.hatena-asin-detail { margin: 1em; padding: 1em; border: .4em solid #ff9900; -moz-border-radius: 1em / 1em; -webkit-border-radius: 1em 1em; border-radius: 1em / 1em; background: white; }
div.hatena-asin-detail img.hatena-asin-detail-image { float: left; border: 0; margin: 0 10px 0 0; }
div.hatena-asin-detail div.hatena-asin-detail-info { margin: 0 0 0 140px; word-break: break-all; }
div.hatena-asin-detail div.hatena-asin-detail-info p.hatena-asin-detail-title { font-weight: bold; font-size: 14px; width: 100%; margin: 0; }
div.hatena-asin-detail div.hatena-asin-detail-info ul { list-style-type: none; font-size: 11px; margin: 5px 0 0 0; padding: 0; }
div.hatena-asin-detail div.hatena-asin-detail-info ul li { margin: 0; padding: 0; }
div.hatena-asin-detail div.hatena-asin-detail-foot { background-image: url(/assets/images/Amazon.co.jp_Logo.png); background-position: right bottom; background-repeat: no-repeat; -moz-background-size: 20%; -o-background-size: 20%; -webkit-background-size: 20%; background-size: 20%; height: 24.6px; clear: both; }
div.hatena-asin-detail p a { border: 0; }

/* rakuten */
div.rakuten-detail { margin: 1em; padding: 1em; border: 0.4em solid #bf0000; -moz-border-radius: 1em / 1em; -webkit-border-radius: 1em 1em; border-radius: 1em / 1em; background: white; }
div.rakuten-detail img.rakuten-detail-image { float: left; border: 0; margin: 0 10px 0 0; }
div.rakuten-detail div.rakuten-detail-info { margin: 0 0 0 140px; word-break: break-all; }
div.rakuten-detail div.rakuten-detail-info p.rakuten-detail-title { font-weight: bold; font-size: 14px; width: 100%; margin: 0; }
div.rakuten-detail div.rakuten-detail-info p.rakuten-detail-desc { font-size: 11px; width: 100%; margin: 0; }
div.rakuten-detail div.rakuten-detail-foot { background-image: url(/assets/images/Rakuten_logo.svg); background-position: right bottom; background-repeat: no-repeat; height: 25px; clear: both; }
div.rakuten-detail p a { border: 0; }

@media screen and (min-width: 800px) { .table-row { display: table; width: 100%; }
  .table-column { display: table-cell; vertical-align: top; }
  .table-column:first-child { width: 20%; }
  .sidebar-fixed { position: fixed; top: 20px; } }
.iframe-responsive-wrapper { position: relative; width: 100%; }

.iframe-responsive-wrapper-16-9 { padding-top: 56.25%; }

.iframe-responsive-wrapper-4-3 { padding-top: 75%; }

.iframe-responsive-wrapper iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }