html {
  line-height: 1.15 /* 1 */;
  -webkit-text-size-adjust: 100% /* 2 */;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box /* 1 */;
  height: 0 /* 1 */;
  overflow: visible /* 2 */;
}
pre {
  font-family: monospace, monospace /* 1 */;
  font-size: 1em /* 2 */;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none /* 1 */;
  text-decoration: underline /* 2 */;
  text-decoration: underline dotted /* 2 */;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace /* 1 */;
  font-size: 1em /* 2 */;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit /* 1 */;
  font-size: 100% /* 1 */;
  line-height: 1.15 /* 1 */;
  margin: 0 /* 2 */;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box /* 1 */;
  color: inherit /* 2 */;
  display: table /* 1 */;
  max-width: 100% /* 1 */;
  padding: 0 /* 3 */;
  white-space: normal /* 1 */;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box /* 1 */;
  padding: 0 /* 2 */;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield /* 1 */;
  outline-offset: -2px /* 2 */;
}
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button /* 1 */;
  font: inherit /* 2 */;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
.icon-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.icon-comments {
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy40LjQgKDE3MjQ5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5idWJibGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0iSWNvbnMiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjAuMDAwMDAwLCAwLjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTI4Ljk5OTY1NCwxNy4zNTA2NDA0IEMxMjQuMDIzNTM4LDE3LjM1MDY0MDQgMTIwLDEzLjQ5OTQ4MDggMTIwLDguNjk3MTI3MDMgQzEyMCwzLjg5NDc3MzI4IDEyNC4wMjQyMywwIDEyOC45OTk2NTQsMCBDMTMzLjk3NTA3OCwwIDEzNy45OTkzMDgsMy44OTQwODEgMTM3Ljk5OTMwOCw4LjY5NzEyNzAzIEMxMzcuOTk5MzA4LDEwLjQyNzgyOTcgMTM3LjQ4MDA5NywxMi4wMjkwNzU4IDEzNi41NzExMzIsMTMuMzcwMDI0MiBDMTM2LjUyNzUxOCwxMy40MTM2Mzc5IDEzNi40ODQ1OTcsMTMuNTAwMTczMSAxMzYuNDQwOTgzLDEzLjU0MzA5NDUgQzEzNi4zNTQ0NDgsMTMuNzE2MTY0OCAxMzYuMjY3OTEzLDEzLjk3NTc3MDIgMTM2LjI2NzkxMywxNC4xOTI0NTQxIEwxMzcuMjE5Nzk5LDE4IEwxMzMuNTg1MzI0LDE2LjY1ODM1OTMgQzEzMy40MTIyNTMsMTYuNTcxODI0MiAxMzMuMjM5MTgzLDE2LjU3MTgyNDIgMTMzLjA2NjExMywxNi41NzE4MjQyIEMxMzIuODkzMDQzLDE2LjU3MTgyNDIgMTMyLjc2Mjg5NCwxNi42MTU0Mzc5IDEzMi41ODk4MjMsMTYuNjU4MzU5MyBDMTMyLjU0NjIxLDE2LjY1ODM1OTMgMTMyLjU0NjIxLDE2LjcwMTk3MyAxMzIuNTAzMjg4LDE2LjcwMTk3MyBDMTMxLjQyMTI1MywxNy4xMzQ2NDg3IDEzMC4yNTMzNzUsMTcuMzUxMzMyNiAxMjguOTk4MjY5LDE3LjM1MTMzMjYgTDEyOC45OTk2NTQsMTcuMzUwNjQwNCBaIE0xMjksMTYuNDIzMzg0NiBDMTI0LjU3NjYxNSwxNi40MjMzODQ2IDEyMSwxMyAxMjEsOC43MzEwNzY5MiBDMTIxLDQuNDYyMTUzODUgMTI0LjU3NzIzMSwxIDEyOSwxIEMxMzMuNDIyNzY5LDEgMTM3LDQuNDYxNTM4NDYgMTM3LDguNzMxMDc2OTIgQzEzNywxMC4yNjk1Mzg1IDEzNi41Mzg0NjIsMTEuNjkyOTIzMSAxMzUuNzMwNDYyLDEyLjg4NDkyMzEgQzEzNS42OTE2OTIsMTIuOTIzNjkyMyAxMzUuNjUzNTM4LDEzLjAwMDYxNTQgMTM1LjYxNDc2OSwxMy4wMzg3NjkyIEMxMzUuNTM3ODQ2LDEzLjE5MjYxNTQgMTM1LjQ2MDkyMywxMy40MjMzODQ2IDEzNS40NjA5MjMsMTMuNjE2IEwxMzYuMzA3MDc3LDE3LjAwMDYxNTQgTDEzMy4wNzYzMDgsMTUuODA4IEMxMzIuOTIyNDYyLDE1LjczMTA3NjkgMTMyLjc2ODYxNSwxNS43MzEwNzY5IDEzMi42MTQ3NjksMTUuNzMxMDc2OSBDMTMyLjQ2MDkyMywxNS43MzEwNzY5IDEzMi4zNDUyMzEsMTUuNzY5ODQ2MiAxMzIuMTkxMzg1LDE1LjgwOCBDMTMyLjE1MjYxNSwxNS44MDggMTMyLjE1MjYxNSwxNS44NDY3NjkyIDEzMi4xMTQ0NjIsMTUuODQ2NzY5MiBDMTMxLjE1MjYxNSwxNi4yMzEzODQ2IDEzMC4xMTQ0NjIsMTYuNDI0IDEyOC45OTg3NjksMTYuNDI0IEwxMjksMTYuNDIzMzg0NiBaIiBpZD0iYnViYmxlIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=") center top no-repeat;
  background-size: 18px 18px;
}
.icon-tags {
  display: inline-block;
  width: 19px;
  height: 16px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE5cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE5IDE2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy40LjQgKDE3MjQ5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZSArIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AtSEQiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzAuMDAwMDAwLCAtNzk2LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0iQXJ0aWNsZS0yIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzAuMDAwMDAwLCA1NTYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0idGFncyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIzNC4wMDAwMDApIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2hhcGUtKy1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS41LDUgQzE0LjY3Myw1IDE0LDQuMzI3IDE0LDMuNSBDMTQsMi42NzMgMTQuNjczLDIgMTUuNSwyIEMxNi4zMjcsMiAxNywyLjY3MyAxNywzLjUgQzE3LDQuMzI3IDE2LjMyNyw1IDE1LjUsNSBMMTUuNSw1IFogTTE1LjUsMyBDMTUuMjI0LDMgMTUsMy4yMjQgMTUsMy41IEMxNSwzLjc3NiAxNS4yMjQsNCAxNS41LDQgQzE1Ljc3Niw0IDE2LDMuNzc2IDE2LDMuNSBDMTYsMy4yMjQgMTUuNzc2LDMgMTUuNSwzIEwxNS41LDMgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNy41LDAgTDE0LDAgQzEzLjMxMiwwIDEyLjQyNiwwLjM2NyAxMS45MzksMC44NTQgTDQuMzUzLDguNDQgQzQuMDcsOC43MjMgMy45MTUsOS4wOTkgMy45MTUsOS41MDEgQzMuOTE1LDkuOTAzIDQuMDcxLDEwLjI3OSA0LjM1MywxMC41NjIgTDYuOTU1LDEzLjE2NCBMNS44NiwxMy43OTYgQzUuNzQ1LDEzLjg2MiA1LjYxMSwxMy44NzkgNS40ODEsMTMuODQ1IEM1LjM1MSwxMy44MTEgNS4yNDMsMTMuNzI4IDUuMTc3LDEzLjYxMyBMMS41ODEsNy4zODQgQzEuNDQzLDcuMTQ1IDEuNTI1LDYuODM5IDEuNzY0LDYuNzAxIEw5Ljc1LDIuMDkgQzkuOTg5LDEuOTUyIDEwLjA3MSwxLjY0NiA5LjkzMywxLjQwNyBDOS43OTUsMS4xNjggOS40ODksMS4wODYgOS4yNSwxLjIyNCBMMS4yNjQsNS44MzUgQzAuOTE4LDYuMDM1IDAuNjcsNi4zNTggMC41NjYsNi43NDYgQzAuNDYyLDcuMTM0IDAuNTE1LDcuNTM4IDAuNzE1LDcuODg0IEw0LjMxMSwxNC4xMTMgQzQuNTExLDE0LjQ1OSA0LjgzNCwxNC43MDcgNS4yMjIsMTQuODExIEM1LjM1MiwxNC44NDYgNS40ODQsMTQuODYzIDUuNjE0LDE0Ljg2MyBDNS44NzQsMTQuODYzIDYuMTI5LDE0Ljc5NSA2LjM2LDE0LjY2MiBMNy42ODcsMTMuODk2IEw4LjQzOSwxNC42NDggQzguNzIyLDE0LjkzMSA5LjA5OCwxNS4wODYgOS41LDE1LjA4NiBDOS45MDIsMTUuMDg2IDEwLjI3OCwxNC45MyAxMC41NjEsMTQuNjQ4IEwxOC4xNDcsNy4wNjIgQzE4LjYzNCw2LjU3NSAxOSw1LjY5IDE5LDUuMDAxIEwxOSwxLjUwMSBDMTksMC42NzQgMTguMzI3LDAuMDAxIDE3LjUsMC4wMDEgTDE3LjUsMCBaIE0xOCw1IEMxOCw1LjQxNSAxNy43MzMsNi4wNiAxNy40MzksNi4zNTQgTDkuODUzLDEzLjk0IEM5Ljc1OSwxNC4wMzQgOS42MzQsMTQuMDg1IDkuNDk5LDE0LjA4NSBDOS4zNjQsMTQuMDg1IDkuMjM5LDE0LjAzMyA5LjE0NSwxMy45NCBMNS4wNTksOS44NTQgQzQuOTY1LDkuNzYgNC45MTQsOS42MzUgNC45MTQsOS41MDEgQzQuOTE0LDkuMzY3IDQuOTY2LDkuMjQxIDUuMDU5LDkuMTQ3IEwxMi42NDUsMS41NjEgQzEyLjkzOCwxLjI2OCAxMy41ODQsMSAxMy45OTgsMSBMMTcuNDk4LDEgQzE3Ljc3NCwxIDE3Ljk5OCwxLjIyNCAxNy45OTgsMS41IEwxNy45OTgsNSBMMTgsNSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") center center no-repeat;
  background-size: 19px 16px;
}
.icon-categories {
  display: inline-block;
  width: 19px;
  height: 16px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iMTlweCIgdmlld0JveD0iMCAwIDEzIDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy40LjQgKDE3MjQ5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5ib29rbWFyayBmaWxsPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ikljb25zIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOS4wMDAwMDAsIC0zMS4wMDAwMDApIiBmaWxsPSIjNzU3NTc1Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTIxLjUsNTAgQzIxLjM1Nyw1MCAyMS4yMTcsNDkuOTM4IDIxLjEyLDQ5LjgyNSBMMTUuNSw0My4yNjggTDkuODgsNDkuODI1IEM5Ljc0NCw0OS45ODQgOS41MjMsNTAuMDQxIDkuMzI3LDQ5Ljk2OSBDOS4xMzEsNDkuODk3IDksNDkuNzA5IDksNDkuNSBMOSwzMS41IEM5LDMxLjIyNCA5LjIyNCwzMSA5LjUsMzEgTDIxLjUsMzEgQzIxLjc3NiwzMSAyMiwzMS4yMjQgMjIsMzEuNSBMMjIsNDkuNSBDMjIsNDkuNzA5IDIxLjg3LDQ5Ljg5NiAyMS42NzMsNDkuOTY5IEMyMS42MTYsNDkuOTkgMjEuNTU4LDUwIDIxLjUsNTAgTDIxLjUsNTAgWiIgaWQ9ImJvb2ttYXJrLWZpbGwiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") center center no-repeat;
  icon-categories: 19px 16px;
}
.overflow-ellipsis,
.line-title,
.tag-post-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'YakuHanJPs', '游ゴシック', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  margin: auto;
  background: #f5f7f9;
}
body.with-bg {
  background-image: url("../imgs/main_vsl01_pressed.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 0px -110px;
}
nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  color: #000;
  padding: 30px 180px 0;
}
a {
  text-decoration: none;
  color: inherit;
}
main {
  flex: 1;
}
main::before {
  display: block;
  width: 100%;
  height: 100%;
  content: ' ';
  max-width: 1080px;
  position: absolute;
  z-index: -1;
}
.logo {
  flex: 0.7;
}
.logo .btn {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-width: 150px;
  padding: 5px;
}
.logo .btn span {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  top: 0;
  left: 0;
  padding: 15px 20px;
  transition: 0.3s;
  width: 100%;
  color: #fff;
  background-color: #363837;
  box-sizing: border-box;
}
.logo .btn::before,
.logo .btn::after {
  background: transparent;
  z-index: 2;
  position: absolute;
  content: "";
}
.btn.btn-hover::after,
.btn.btn-hover::before {
  width: 10%;
  height: 25%;
  transition: 0.35s;
}
.btn.btn-hover::before {
  bottom: 0;
  left: 0;
  border-left: 1px solid #1c1f1e;
  border-bottom: 1px solid #1c1f1e;
}
.btn.btn-hover::after {
  top: 0;
  right: 0;
  border-right: 1px solid #1c1f1e;
  border-top: 1px solid #1c1f1e;
}
.btn.btn-hover:hover::before,
.btn.btn-hover:hover::after {
  width: 99%;
  height: 99%;
}
.nav-item {
  font-size: 18px;
  font-weight: 700;
}
.nav-item:last-child {
  margin-right: 0;
}
.nav-item:not(.logo) > a:after {
  content: ' ';
  height: 2px;
  width: 0;
  background: #000;
  display: block;
  transition: all 0.3s;
  margin: auto;
}
.nav-item > a:hover:after {
  width: 100%;
}
.wrapper {
  flex: 1;
  padding: 50px 150px;
}
.footer {
  text-align: center;
  padding: 25px 0;
  color: #999;
}
.footer a {
  color: #000;
}
.footer a.active {
  color: #ffc166;
}
.footer .hexo {
  margin-top: 5px;
}
article {
  margin-top: 50px;
  line-height: 24px;
}
article img {
  max-width: 100%;
}
article.post-article img {
  transition: 0.3s ease;
  filter: grayscale(95%);
}
article.post-article img:hover {
  filter: grayscale(0);
}
.article-title,
article .article-title-detail {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  transition: opacity 1s ease-out;
  margin-top: 15px;
  margin-bottom: 20px;
}
article .article-title-detail {
  text-align: center;
}
article .article-title:hover {
  opacity: 0.8;
}
article .article-top-meta .post-tag {
  display: inline-block;
  margin-right: 3%;
  border: 0.15em #094c9e solid;
  border-radius: 0.3em;
  font-weight: bold;
  font-size: 1em;
  color: #094c9e;
  padding: 5px 5px;
}
article .article-content {
  margin-top: 35px;
}
article .article-footer {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.article-footer .pull-left {
  flex-grow: 1;
}
.read-more {
  margin-top: 8px;
}
article .read-more a {
  text-decoration: underline;
}
article .read-more a:hover {
  color: #ffc166;
}
.posted-on,
.posted-on-detail {
  font-weight: 700;
  margin-left: -6px;
}
.posted-on-detail {
  text-align: center;
}
.driver {
  height: 2px;
  width: 50%;
  background: #f7f7f7;
  margin: 50px auto;
}
nav.pagination {
  display: flex;
  margin: auto;
  flex-direction: row;
  justify-content: center;
}
nav.pagination .pagination-item {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  margin-right: 15px;
  border-radius: 50%;
}
.pagination-prev,
.pagination-item:last-child {
  margin-right: 0;
}
nav.pagination .active {
  background: #000;
  color: #fff;
  margin: 0 15px;
}
.pagination-prev,
.pagination-next {
  color: #000;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 30px;
}
.pagination-prev {
  margin-right: 25px;
}
.pagination-next {
  margin-left: 25px;
}
.post {
  max-width: 770px;
  margin: auto;
}
.timeline-title {
  text-align: center;
  color: #999;
}
.timeline-box {
  padding-left: calc(50% - 79px);
}
.timeline {
  display: flex;
  flex-direction: row;
}
.line-date {
  font-weight: 500;
  min-width: 70px;
  flex-basis: 70px;
}
.line-dot {
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: #000;
  border-radius: 50%;
  flex-basis: 18px;
  position: relative;
}
.line-dot-sm {
  width: 13px;
  height: 13px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
}
.line-title {
  padding-left: 40px;
  transition: color 0.24s ease;
  font-size: 16px;
}
.line-title:hover {
  color: #ffc166;
}
.line-h {
  height: 50px;
  width: 100%;
  border-left: 4px solid #000;
  position: relative;
  transform: translate3d(77px, 0, 0);
}
.current-year {
  font-size: 25px;
  font-weight: 700;
}
.current-dot {
  background: #000;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  min-width: 32px;
  margin-left: -7px;
}
.current-dot-sm {
  width: 24px;
  height: 24px;
}
.about-title {
  text-align: center;
  color: #999;
}
.intro {
  text-align: center;
  color: #000;
  font-size: 20px;
}
.paused .left {
  width: 50% !important;
}
.paused .right {
  width: 50% !important;
}
.paused .trangle-1 {
  transform: translate(0, -50%) !important;
}
.paused .trangle-2 {
  transform: translate(0, 50%) !important;
}
.article-tag-list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}
.article-tag-list li {
  color: #00f;
}
.tag-box {
  min-height: 450px;
  padding: 20px 40px;
}
.tag-title {
  text-align: center;
  color: #999;
}
.tag-list li {
  font-size: 18px;
  font-weight: 600;
  transition: color 0.24s ease;
  border-bottom: 1px dashed #414141;
  margin-bottom: 20px;
  padding-bottom: 5px;
  list-style-type: none;
}
.tag-list li:hover {
  color: #ffc166;
}
.tag-list li a {
  display: flex;
  flex-direction: row;
}
.tag-post-title {
  flex: 1;
  margin-right: 30px;
}
.card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  padding: 20px 30px;
}
#gitalk-container {
  margin-top: 3px;
}
blockquote {
  margin: 0;
  padding: 0 15px;
  color: #666;
  border-left: 4px solid #ddd;
}
blockquote cite::before {
  content: "-";
  padding: 0 5px;
}
table th {
  border-top: 1px solid #414141;
  border-left: 1px solid #414141;
}
table {
  border-spacing: 0px;
  border-right: 1px solid #414141;
  border-bottom: 1px solid #414141;
}
td {
  border-top: 1px solid #414141;
  border-left: 1px solid #414141;
}
@media screen and (min-width: 300px) and (max-width: 768px) {
  .logo {
    flex: 1 100%;
    margin-right: 0;
    text-align: center;
    margin-bottom: 50px;
  }
  nav {
    padding: 30px 18px;
  }
  .wrapper {
    padding: 0px 12px;
  }
  .timeline-box {
    padding-left: 0;
  }
  .tag-box {
    padding: 10px 20px;
  }
  .tag-box ul {
    padding: 0;
  }
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}