@charset "UTF-8";
/* Responsive: yes*/
@keyframes alertfadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes alertfadeout {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W0);
  font-weight: 100;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W1);
  font-weight: 200;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W2);
  font-weight: 300;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W3);
  font-weight: 400;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
  font-weight: 500;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
  font-weight: 600;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
  font-weight: 700;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
  font-weight: 800;
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W8);
  font-weight: 900;
}

@font-face {
  font-family: "Hiragino Sans W9";
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 100;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 300;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 900;
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format("opentype");
}

@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;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, meiryo, sans-serif;
  font-size: 15px;
  color: #222;
  margin: 0;
}

input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, meiryo, sans-serif;
}

input::placeholder, textarea::placeholder {
  color: #CCC;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
textarea {
  border-radius: 0;
  -webkit-appearance: none;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: none;
  box-sizing: border-box;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

h1, h2, h3, p, ul, ol, dl, dt, dd {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  color: #222;
  text-decoration: none;
}

a img {
  vertical-align: middle;
}

button {
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
}

hr {
  border: 1px solid #E0E0E0;
}

address {
  font-size: 14px;
}

.search-result-form {
  display: none;
}

.urllist-with-thumbnails li .urllist-image {
  margin: 0;
  float: none;
}

.page-archive .entry-thumb {
  width: initial;
  height: initial;
  margin-right: 0;
  float: none;
  background-position: center center;
}

.entry-content .hatena-id-icon, .entry-content .profile-icon, .entry-content .http-favicon {
  vertical-align: baseline;
}

.hatena-star-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.itunes-embed {
  margin: 40px 0;
  padding: 20px;
  border: 1px solid #E0E0E0;
  display: flex;
}

.itunes-embed > a {
  margin-right: 20px;
}

.itunes-embed .itunes-embed-image {
  float: none;
  margin-right: 0;
}

.itunes-embed .itunes-embed-title {
  margin-bottom: 10px !important;
}

.itunes-embed .itunes-embed-info ul {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.itunes-embed .itunes-embed-badge {
  margin-top: 10px;
}

.hatena-asin-detail {
  margin: 40px 0;
  padding: 20px;
  border: 1px solid #E0E0E0;
  display: flex;
  word-break: break-all;
}

.hatena-asin-detail > a {
  margin-right: 20px;
}

.hatena-asin-detail .hatena-asin-detail-image {
  max-width: initial;
  float: none;
  margin-right: 0;
}

.hatena-asin-detail .hatena-asin-detail-title {
  margin-bottom: 10px !important;
}

.hatena-asin-detail .hatena-asin-detail-info ul {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.hatena-image-right, .hatena-image-left {
  max-width: 50% !important;
}

#wrapper {
  width: 100%;
}

nav {
  width: calc(100vw - 160px);
  height: 80px;
  padding: 0 80px;
}

.page-index #main {
  width: calc(100vw - 160px);
  margin: 0 80px;
}

.page-archive #main {
  width: calc(100vw - 480px);
  margin: 0 80px;
}

#header-modules {
  margin: 0 80px;
}

#content {
  padding-top: 80px;
}

#box2 {
  width: 240px;
  margin-right: 80px;
}

.breadcrumb {
  font-size: 14px;
  line-height: 20px;
  width: calc(100vw - 160px);
  margin: 0 80px 40px;
}

.breadcrumb .breadcrumb-inner .breadcrumb-child {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 3px solid #222;
}

.entry-footer {
  margin-top: 40px;
  margin-bottom: 40px;
}

.urllist-title-link, .entry-title-link {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  line-height: 1.5;
  letter-spacing: 0.01em;
  word-wrap: break-word;
}

.urllist-date-link, .archive-date, .entry-date {
  font-size: 15px;
  line-height: 18px;
}

.urllist-date-link a, .archive-date a, .entry-date a {
  color: #999;
}

a > .urllist-image {
  border-radius: 4px;
  background-color: #FEFEFE;
  transition: 200ms opacity;
}

a > .urllist-image:hover {
  opacity: 0.8;
}

.entry-header-menu {
  font-size: 14px;
  font-weight: bold;
  order: 0;
}

.entry-header-menu a:hover {
  text-decoration: none !important;
}

.entry-header-menu:after {
  content: '';
  width: 6px;
  height: 6px;
  display: inline-block;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  transform: rotate(-45deg);
  margin-left: 6px;
  margin-right: 20px;
  margin-bottom: 1px;
}

.categories a {
  margin-right: 10px;
}

.categories .category-Pin {
  display: none;
}

.more {
  text-align: center;
}

.more a {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  display: inline-block;
  margin: 10px auto 60px;
  position: relative;
}

.more a:after {
  content: '';
  width: 6px;
  height: 6px;
  display: inline-block;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  transform: rotate(-45deg);
  margin-left: 10px;
  position: absolute;
  top: 8px;
  left: 100%;
}

.search-form {
  position: relative;
  border: 1px solid #E0E0E0;
  background-color: #FFF;
  box-sizing: border-box;
  border-radius: 4px;
}

.search-form input[type="text"] {
  border: none;
  outline: none;
  font-size: 13px;
  height: 26px;
  padding: 0 9px;
}

.search-form .search-module-button {
  width: 30px;
  height: 30px;
  background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=101ce7d…&env=production) no-repeat 50%;
  background-size: 20px 20px;
  border: none;
  outline: none;
  text-indent: -9999px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  opacity: 0.5;
  transition: 200ms opacity;
}

.search-form .search-module-button:hover {
  opacity: 1;
}

.banner-module {
  display: flex;
  flex-wrap: wrap;
}

.banner-module li {
  width: calc( ( 100% - 120px ) / 4);
  margin-right: 40px;
}

.banner-module li:nth-child(4) {
  margin-right: 0;
}

.banner-module a {
  display: block;
}

.banner-module img {
  width: 100%;
  transition: 200ms opacity;
}

.banner-module img:hover {
  opacity: 0.8;
}

#box2 {
  font-size: 13px;
}

#box2 .hatena-module {
  margin-bottom: 40px;
}

#box2 .hatena-module:last-child {
  margin-bottom: 0;
}

#box2 .hatena-module-category .hatena-urllist li:first-child {
  display: none;
}

#box2 .hatena-module-title {
  font-weight: bold;
  margin-bottom: 10px;
}

#box2 .hatena-module-body li {
  margin-bottom: 4px;
}

#box2 .hatena-module-body li > ul {
  margin-top: 4px;
  margin-bottom: 8px;
}

#box2 .hatena-module-body li:before {
  content: '-';
  margin-right: 5px;
}

#box2 .hatena-module-body .archive-module-show-button, #box2 .hatena-module-body .archive-module-hide-button {
  color: #999;
}

.entry-footer-time {
  margin-left: 10px;
}

.entry-footer-time a {
  color: #999;
}

.footer {
  margin-top: 60px;
  margin-bottom: 20px;
}

.footer address {
  font-size: 13px;
  font-style: normal;
  text-align: center;
}

.page-archive #content, .page-entry #content, .page-about #content, .page-static_page #content {
  padding-top: 140px;
}

.page-archive #top-box, .page-entry #top-box, .page-about #top-box, .page-static_page #top-box {
  padding-top: 140px;
}

.page-archive nav li.archive a, .page-entry nav li.archive a {
  color: #1EA0F0;
  font-weight: bold;
}

.page-archive nav li.archive a:after, .page-entry nav li.archive a:after {
  content: '';
  display: block;
  margin-top: -4px;
  border-bottom: 4px solid #1EA0F0;
  transition: 200ms border-color;
}

.page-archive nav li.archive a:hover, .page-entry nav li.archive a:hover {
  color: #0A82D2;
}

.page-archive nav li.archive a:hover:after, .page-entry nav li.archive a:hover:after {
  border-bottom: 4px solid #0A82D2;
}

.page-archive.category-News nav li.archive a {
  color: #222;
}

.page-archive.category-News nav li.archive a:after {
  border-bottom: none;
}

.page-archive.category-News nav li.news a {
  color: #1EA0F0;
  font-weight: bold;
}

.page-archive.category-News nav li.news a:after {
  content: '';
  display: block;
  margin-top: -4px;
  border-bottom: 4px solid #1EA0F0;
  transition: 200ms border-color;
}

.page-archive.category-News nav li.news a:hover {
  color: #0A82D2;
}

.page-archive.category-News nav li.news a:hover:after {
  border-bottom: 4px solid #0A82D2;
}

.static-page-works nav li.works a {
  color: #1EA0F0;
  font-weight: bold;
}

.static-page-works nav li.works a:after {
  content: '';
  display: block;
  margin-top: -4px;
  border-bottom: 4px solid #1EA0F0;
  transition: 200ms border-color;
}

.static-page-works nav li.works a:hover {
  color: #0A82D2;
}

.static-page-works nav li.works a:hover:after {
  border-bottom: 4px solid #0A82D2;
}

.static-page-recruit nav li.recruit a {
  color: #1EA0F0;
  font-weight: bold;
}

.static-page-recruit nav li.recruit a:after {
  content: '';
  display: block;
  margin-top: -4px;
  border-bottom: 4px solid #1EA0F0;
  transition: 200ms border-color;
}

.static-page-recruit nav li.recruit a:hover {
  color: #0A82D2;
}

.static-page-recruit nav li.recruit a:hover:after {
  border-bottom: 4px solid #0A82D2;
}

.page-index .categories, .page-archive .categories {
  display: none;
}

.related-entries-categories {
  display: none;
}

nav {
  background-color: #FFF;
  display: flex;
  position: fixed;
  z-index: 2;
}

nav a, nav a:hover {
  user-select: none;
}

nav h1.logo {
  width: 130px;
  height: 30px;
  margin: 25px auto 25px 0;
}

nav h1.logo a {
  width: 100%;
  height: 100%;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22130%22%20height%3D%2230%22%20viewBox%3D%220%200%20130%2030%22%3E%3Ctitle%3Elogo%3C%2Ftitle%3E%3Cpath%20d%3D%22M79%2C7.86A4.31%2C4.31%2C0%2C0%2C1%2C81.17%2C9.5a5.74%2C5.74%2C0%2C0%2C1%2C.92%2C2.09%2C9.73%2C9.73%2C0%2C0%2C1%2C.25%2C2.15%2C8.66%2C8.66%2C0%2C0%2C1-1%2C4.38A4.67%2C4.67%2C0%2C0%2C1%2C77%2C20.53H71.37V7.58H77A6.59%2C6.59%2C0%2C0%2C1%2C79%2C7.86Zm-5%2C2v8.45h2.5a2.69%2C2.69%2C0%2C0%2C0%2C2.67-1.89%2C6.55%2C6.55%2C0%2C0%2C0%2C.42-2.47%2C6.07%2C6.07%2C0%2C0%2C0-.62-3A2.62%2C2.62%2C0%2C0%2C0%2C76.5%2C9.83Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M90.41%2C11.15a4%2C4%2C0%2C0%2C1%2C1.66%2C1.41%2C4.79%2C4.79%2C0%2C0%2C1%2C.76%2C2%2C12.38%2C12.38%2C0%2C0%2C1%2C.08%2C1.91h-7a2.31%2C2.31%2C0%2C0%2C0%2C1%2C2%2C2.53%2C2.53%2C0%2C0%2C0%2C1.38.36%2C2.14%2C2.14%2C0%2C0%2C0%2C1.39-.44%2C2.07%2C2.07%2C0%2C0%2C0%2C.51-.66h2.56a3.16%2C3.16%2C0%2C0%2C1-.93%2C1.73%2C4.66%2C4.66%2C0%2C0%2C1-3.6%2C1.4%2C5.27%2C5.27%2C0%2C0%2C1-3.38-1.18%2C4.67%2C4.67%2C0%2C0%2C1-1.46-3.84A5.16%2C5.16%2C0%2C0%2C1%2C84.73%2C12a4.6%2C4.6%2C0%2C0%2C1%2C3.43-1.33A5.45%2C5.45%2C0%2C0%2C1%2C90.41%2C11.15Zm-3.75%2C2.16A2.6%2C2.6%2C0%2C0%2C0%2C86%2C14.79h4.31a2.06%2C2.06%2C0%2C0%2C0-.67-1.51%2C2.19%2C2.19%2C0%2C0%2C0-1.48-.52A2%2C2%2C0%2C0%2C0%2C86.66%2C13.31Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M96.12%2C17.47a1.59%2C1.59%2C0%2C0%2C0%2C.35%2C1%2C2.29%2C2.29%2C0%2C0%2C0%2C1.73.5%2C2.64%2C2.64%2C0%2C0%2C0%2C1.18-.22.69.69%2C0%2C0%2C0%2C.43-.66.7.7%2C0%2C0%2C0-.35-.64%2C14.43%2C14.43%2C0%2C0%2C0-2.62-.75%2C5.46%2C5.46%2C0%2C0%2C1-2.3-1%2C2.2%2C2.2%2C0%2C0%2C1-.67-1.73%2C3%2C3%2C0%2C0%2C1%2C1-2.28%2C4.2%2C4.2%2C0%2C0%2C1%2C2.93-1%2C5.37%2C5.37%2C0%2C0%2C1%2C2.93.72%2C3%2C3%2C0%2C0%2C1%2C1.3%2C2.47h-2.5a1.46%2C1.46%2C0%2C0%2C0-.28-.76%2C1.7%2C1.7%2C0%2C0%2C0-1.41-.51%2C2.07%2C2.07%2C0%2C0%2C0-1.17.25.73.73%2C0%2C0%2C0-.34.6.64.64%2C0%2C0%2C0%2C.37.62%2C15%2C15%2C0%2C0%2C0%2C2.61.7%2C4.82%2C4.82%2C0%2C0%2C1%2C2.25%2C1.06%2C2.41%2C2.41%2C0%2C0%2C1%2C.73%2C1.8A2.91%2C2.91%2C0%2C0%2C1%2C101.28%2C20a5%2C5%2C0%2C0%2C1-3.28.9%2C4.92%2C4.92%2C0%2C0%2C1-3.34-1%2C3.08%2C3.08%2C0%2C0%2C1-1.08-2.43Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M106.76%2C9.81h-2.54V7.5h2.54ZM104.22%2C11h2.54v9.58h-2.54Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M113.93%2C10.94a3%2C3%2C0%2C0%2C1%2C1.47%2C1.39V11h2.45V20a5%2C5%2C0%2C0%2C1-.63%2C2.79q-1.06%2C1.62-4.11%2C1.62a5.65%2C5.65%2C0%2C0%2C1-3-.72%2C2.66%2C2.66%2C0%2C0%2C1-1.28-2.15h2.72a1.19%2C1.19%2C0%2C0%2C0%2C.35.63%2C2.1%2C2.1%2C0%2C0%2C0%2C1.36.34%2C1.83%2C1.83%2C0%2C0%2C0%2C1.81-.9%2C4.59%2C4.59%2C0%2C0%2C0%2C.3-1.95v-.62a3%2C3%2C0%2C0%2C1-.77.92%2C3.08%2C3.08%2C0%2C0%2C1-1.95.58%2C3.67%2C3.67%2C0%2C0%2C1-2.94-1.3%2C5.2%2C5.2%2C0%2C0%2C1-1.11-3.51%2C6%2C6%2C0%2C0%2C1%2C1.06-3.59%2C3.52%2C3.52%2C0%2C0%2C1%2C3-1.46A3.46%2C3.46%2C0%2C0%2C1%2C113.93%2C10.94Zm.85%2C6.87a3%2C3%2C0%2C0%2C0%2C.61-2.11%2C3.22%2C3.22%2C0%2C0%2C0-.58-2.08%2C1.87%2C1.87%2C0%2C0%2C0-1.53-.71%2C1.81%2C1.81%2C0%2C0%2C0-1.81%2C1.24%2C4.31%2C4.31%2C0%2C0%2C0-.27%2C1.63%2C3.83%2C3.83%2C0%2C0%2C0%2C.28%2C1.48%2C1.83%2C1.83%2C0%2C0%2C0%2C1.82%2C1.22A1.93%2C1.93%2C0%2C0%2C0%2C114.78%2C17.81Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M127.91%2C11.5a3.17%2C3.17%2C0%2C0%2C1%2C.94%2C2.58v6.45h-2.56V14.71a2.6%2C2.6%2C0%2C0%2C0-.21-1.17%2C1.39%2C1.39%2C0%2C0%2C0-1.39-.73A1.73%2C1.73%2C0%2C0%2C0%2C123%2C13.89a3.77%2C3.77%2C0%2C0%2C0-.24%2C1.46v5.18H120.2V11h2.43v1.4a4.29%2C4.29%2C0%2C0%2C1%2C.91-1.07%2C3.18%2C3.18%2C0%2C0%2C1%2C1.95-.58A3.66%2C3.66%2C0%2C0%2C1%2C127.91%2C11.5Z%22%20fill%3D%22%23222%22%2F%3E%3Cpath%20d%3D%22M15.35%2C2.38l6.86%2C2.37%2C6.86-2.37L22.21%2C0Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M30.92%2C2.38l6.87%2C2.37%2C6.86-2.37L37.79%2C0Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M38.43%2C8.18l6.86%2C2.37%2C6.86-2.37L45.29%2C5.8Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M7.85%2C8.18l6.86%2C2.37%2C6.86-2.37L14.71%2C5.8Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M23.14%2C27.62%2C30%2C30l6.86-2.38L30%2C25.25Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M31%2C14l6.86%2C2.37L44.74%2C14c-1.28-.44-6.69-2.31-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cg%20opacity%3D%220.6%22%3E%3Cpath%20d%3D%22M23.17%2C8.18%2C30%2C10.55l6.86-2.37L30%2C5.8Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M22.92%2C20l6.86%2C2.37L36.64%2C20l-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M38.68%2C20l6.86%2C2.37L52.4%2C20l-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M7.6%2C20l6.86%2C2.37L21.32%2C20l-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M15.45%2C14l6.86%2C2.37L29.17%2C14c-1.28-.44-6.69-2.31-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M46.28%2C14l6.86%2C2.37L60%2C14c-1.27-.44-6.69-2.31-6.86-2.38Z%22%20fill%3D%22%230071c5%22%2F%3E%3Cpath%20d%3D%22M0%2C14l6.86%2C2.37L13.72%2C14C12.45%2C13.54%2C7%2C11.67%2C6.86%2C11.6S1.28%2C13.54%2C0%2C14Z%22%20fill%3D%22%230071c5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  outline: none;
  transition: 200ms opacity;
}

nav h1.logo a:hover {
  opacity: 0.8;
}

nav h1.logo span {
  display: none;
}

nav ul {
  display: flex;
}

nav li {
  margin: 0 20px;
}

nav li:last-child {
  margin-right: 0;
}

nav li > a {
  font-size: 16px;
  line-height: 80px;
}

nav li a {
  color: #222;
  font-weight: bold;
  display: block;
  transition: 200ms color;
}

nav li a:hover {
  color: #1EA0F0;
}

#content a:hover {
  text-decoration: underline;
}

.page-index #header-modules .hatena-module {
  text-align: center;
  margin: 0 auto 50px auto;
}

.page-index #header-modules .hatena-module-title {
  display: none;
}

.page-index #header-modules .urllist-item-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

.page-index #header-modules .urllist-image-link {
  width: 100%;
  margin-bottom: 50px;
  order: 0;
}

.page-index #header-modules .urllist-image {
  width: 100%;
}

.page-index #header-modules .urllist-title-link {
  font-size: 22px;
  padding: 0 60px;
  order: 1;
}

.page-index #header-modules .urllist-date-link {
  font-size: 18px;
  margin-left: 20px;
  margin-top: 8px;
  order: 2;
}

.page-index #main .hatena-module-title {
  display: none;
}

.page-index #main .hatena-urllist {
  display: flex;
  flex-wrap: wrap;
}

.page-index #main .hatena-urllist .urllist-image {
  width: 100%;
}

.page-index #main .urllist-image-link {
  margin-bottom: 16px;
  display: block;
}

.page-index #main .urllist-title-link {
  margin-bottom: 16px;
  padding: 0 10px;
  display: block;
  word-wrap: break-word;
  word-break: break-all;
}

.page-index #main .urllist-entry-body {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 0 10px;
  word-wrap: break-word;
  word-break: break-all;
}

.page-index #main .urllist-item {
  width: calc( ( 100% - 80px ) / 3);
  margin-right: 40px;
  margin-bottom: 40px;
}

.page-index #main .urllist-item:nth-child(3n) {
  margin-right: 0;
}

.page-index #main .category-News {
  margin: 30px auto 54px;
}

.page-index #main .category-News .urllist-item {
  width: 100%;
  margin: 0;
}

.page-index #main .category-News .urllist-item-inner {
  padding: 0 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

.page-index #main .category-News .urllist-title-link {
  font-size: 22px;
  text-align: center;
  padding: 0;
  order: 1;
  word-break: normal;
}

.page-index #main .category-News .urllist-date-link {
  font-size: 18px;
  margin-left: 20px;
  margin-top: 8px;
  order: 2;
}

.page-index #main .entries-access-ranking .urllist-item {
  width: calc( ( 100% - 120px ) / 4);
  margin-right: 40px;
  margin-bottom: 40px;
  padding-top: 20px;
  border-top: 8px solid #EFEFEF;
}

.page-index #main .entries-access-ranking .urllist-item:nth-child(3n) {
  margin-right: 40px;
}

.page-index #main .entries-access-ranking .urllist-item:nth-child(4) {
  margin-right: 0;
}

.page-index #main .entries-access-ranking .urllist-item.rank-1 {
  border-top-color: #FFC800;
}

.page-index #main .entries-access-ranking .urllist-item.rank-2 {
  border-top-color: #D2DCE6;
}

.page-index #main .entries-access-ranking .urllist-item.rank-3 {
  border-top-color: #DCA050;
}

.page-index #box2 {
  display: none;
}

.page-archive #content-inner {
  display: flex;
}

.page-archive #main .archive-heading {
  font-size: 20px;
  margin-bottom: 40px;
}

.page-archive #main .archive-entry {
  min-height: 160px;
  margin-bottom: 40px;
  padding-left: 180px;
  position: relative;
}

.page-archive #main .entry-thumb {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  transition: 200ms opacity;
}

.page-archive #main .entry-thumb:hover {
  opacity: 0.8;
}

.page-archive #main .entry-thumb-link {
  position: absolute;
  top: 0;
  left: 0;
}

.page-archive #main .entry-title-link {
  margin-bottom: 16px;
  display: block;
}

.page-archive #main .entry-description {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  word-wrap: break-word;
}

.page-archive #main .archive-date {
  margin-bottom: 6px;
}

.page-archive #main .social-buttons {
  margin-top: 10px;
  display: block;
}

.page-archive #main .bookmark-widget-counter {
  display: none;
}

.entry-footer-modules .hatena-module {
  margin-bottom: 40px;
}

.entry-footer-modules .hatena-module:last-child {
  margin-bottom: 80px;
}

.entry-footer-modules .hatena-module-title {
  font-size: 20px;
  font-weight: bold;
  padding-top: 40px;
  margin-bottom: 40px;
  border-top: 1px solid #EAEAEA;
}

.entry-footer-modules .urllist-item {
  min-height: 160px;
  margin-bottom: 40px;
  padding-left: 180px;
  position: relative;
}

.entry-footer-modules .urllist-image {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  transition: 200ms opacity;
}

.entry-footer-modules .urllist-image:hover {
  opacity: 0.8;
}

.entry-footer-modules .urllist-image-link {
  position: absolute;
  top: 0;
  left: 0;
}

.entry-footer-modules .urllist-title-link {
  margin-bottom: 16px;
  display: block;
}

.entry-footer-modules .urllist-entry-body {
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  word-wrap: break-word;
}

.entry-footer-modules .urllist-date-link {
  margin-bottom: 6px;
}

.entry-footer-modules .hatena-module-profile .hatena-module-body {
  min-height: 64px;
  padding-left: 80px;
  position: relative;
}

.entry-footer-modules .hatena-module-profile .profile-icon-link {
  position: absolute;
  top: 0;
  left: 0;
}

.entry-footer-modules .hatena-module-profile .hatena-id-link {
  color: #1EA0F0;
}

.entry-footer-modules .hatena-module-profile .profile-description {
  line-height: 1.6;
  margin-top: 4px;
}

.page-entry #main h1 .entry-title-link, .page-about #main h1 .entry-title-link, .page-static_page:not(.static-page-works) #main h1 .entry-title-link {
  font-size: 24px;
}

.page-entry article, .page-about article, .page-static_page:not(.static-page-works) article {
  width: 640px;
  margin: 0 auto;
}

.page-entry .pager .pager-prev a, .page-entry .pager .pager-next a, .page-about .pager .pager-prev a, .page-about .pager .pager-next a, .page-static_page:not(.static-page-works) .pager .pager-prev a, .page-static_page:not(.static-page-works) .pager .pager-next a {
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  position: fixed;
  top: calc( 50% - 15px);
  transform: rotate(-45deg);
  opacity: 0.2;
  transition: 200ms opacity;
}

.page-entry .pager .pager-prev a:hover, .page-entry .pager .pager-next a:hover, .page-about .pager .pager-prev a:hover, .page-about .pager .pager-next a:hover, .page-static_page:not(.static-page-works) .pager .pager-prev a:hover, .page-static_page:not(.static-page-works) .pager .pager-next a:hover {
  opacity: 1;
}

.page-entry .pager .pager-prev a span, .page-entry .pager .pager-next a span, .page-about .pager .pager-prev a span, .page-about .pager .pager-next a span, .page-static_page:not(.static-page-works) .pager .pager-prev a span, .page-static_page:not(.static-page-works) .pager .pager-next a span {
  display: none;
}

.page-entry .pager .pager-prev a, .page-about .pager .pager-prev a, .page-static_page:not(.static-page-works) .pager .pager-prev a {
  border-left: 4px solid #222;
  border-top: 4px solid #222;
  left: 80px;
}

.page-entry .pager .pager-next a, .page-about .pager .pager-next a, .page-static_page:not(.static-page-works) .pager .pager-next a {
  border-right: 4px solid #222;
  border-bottom: 4px solid #222;
  right: 80px;
}

.page-entry .entry-header, .page-about .entry-header, .page-static_page:not(.static-page-works) .entry-header {
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
}

.page-entry .entry-header .entry-date, .page-about .entry-header .entry-date, .page-static_page:not(.static-page-works) .entry-header .entry-date {
  margin-right: 20px;
  margin-bottom: 10px;
  order: 1;
}

.page-entry .entry-header .entry-categories, .page-about .entry-header .entry-categories, .page-static_page:not(.static-page-works) .entry-header .entry-categories {
  order: 2;
}

.page-entry .entry-header .entry-categories a, .page-about .entry-header .entry-categories a, .page-static_page:not(.static-page-works) .entry-header .entry-categories a {
  color: #999;
  font-size: 15px;
  line-height: 18px;
}

.page-entry .entry-header .entry-title, .page-about .entry-header .entry-title, .page-static_page:not(.static-page-works) .entry-header .entry-title {
  width: 100%;
  order: 3;
}

.page-entry .entry-content, .page-about .entry-content, .page-static_page:not(.static-page-works) .entry-content {
  color: #333;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.8;
}

.page-entry .entry-content a, .page-about .entry-content a, .page-static_page:not(.static-page-works) .entry-content a {
  color: #1EA0F0;
}

.page-entry .entry-content h1, .page-entry .entry-content h2, .page-entry .entry-content h3, .page-entry .entry-content h4, .page-about .entry-content h1, .page-about .entry-content h2, .page-about .entry-content h3, .page-about .entry-content h4, .page-static_page:not(.static-page-works) .entry-content h1, .page-static_page:not(.static-page-works) .entry-content h2, .page-static_page:not(.static-page-works) .entry-content h3, .page-static_page:not(.static-page-works) .entry-content h4 {
  margin: -80px 0 20px 0;
  padding: 120px 0 0;
  line-height: 1.6;
}

.page-entry .entry-content h1 a, .page-entry .entry-content h2 a, .page-entry .entry-content h3 a, .page-entry .entry-content h4 a, .page-about .entry-content h1 a, .page-about .entry-content h2 a, .page-about .entry-content h3 a, .page-about .entry-content h4 a, .page-static_page:not(.static-page-works) .entry-content h1 a, .page-static_page:not(.static-page-works) .entry-content h2 a, .page-static_page:not(.static-page-works) .entry-content h3 a, .page-static_page:not(.static-page-works) .entry-content h4 a {
  text-decoration: none;
}

.page-entry .entry-content h5, .page-about .entry-content h5, .page-static_page:not(.static-page-works) .entry-content h5 {
  margin: 30px 0 20px 0;
  line-height: 1.6;
}

.page-entry .entry-content h5 a, .page-about .entry-content h5 a, .page-static_page:not(.static-page-works) .entry-content h5 a {
  text-decoration: none;
}

.page-entry .entry-content p, .page-entry .entry-content ul, .page-entry .entry-content dl, .page-entry .entry-content ol, .page-about .entry-content p, .page-about .entry-content ul, .page-about .entry-content dl, .page-about .entry-content ol, .page-static_page:not(.static-page-works) .entry-content p, .page-static_page:not(.static-page-works) .entry-content ul, .page-static_page:not(.static-page-works) .entry-content dl, .page-static_page:not(.static-page-works) .entry-content ol {
  margin: 0 0 20px 0;
}

.page-entry .entry-content ul, .page-entry .entry-content ol, .page-about .entry-content ul, .page-about .entry-content ol, .page-static_page:not(.static-page-works) .entry-content ul, .page-static_page:not(.static-page-works) .entry-content ol {
  padding-left: 1.5em;
}

.page-entry .entry-content ul, .page-about .entry-content ul, .page-static_page:not(.static-page-works) .entry-content ul {
  list-style-type: disc;
}

.page-entry .entry-content li > ul, .page-entry .entry-content li > ol, .page-entry .entry-content li > dl, .page-entry .entry-content li > p:last-child, .page-about .entry-content li > ul, .page-about .entry-content li > ol, .page-about .entry-content li > dl, .page-about .entry-content li > p:last-child, .page-static_page:not(.static-page-works) .entry-content li > ul, .page-static_page:not(.static-page-works) .entry-content li > ol, .page-static_page:not(.static-page-works) .entry-content li > dl, .page-static_page:not(.static-page-works) .entry-content li > p:last-child {
  margin: 0;
}

.page-entry .entry-content h1, .page-about .entry-content h1, .page-static_page:not(.static-page-works) .entry-content h1 {
  font-size: 24px;
}

.page-entry .entry-content h2, .page-about .entry-content h2, .page-static_page:not(.static-page-works) .entry-content h2 {
  font-size: 22px;
}

.page-entry .entry-content h3, .page-about .entry-content h3, .page-static_page:not(.static-page-works) .entry-content h3 {
  font-size: 20px;
}

.page-entry .entry-content h4, .page-about .entry-content h4, .page-static_page:not(.static-page-works) .entry-content h4 {
  font-size: 18px;
}

.page-entry .entry-content h5, .page-about .entry-content h5, .page-static_page:not(.static-page-works) .entry-content h5 {
  font-size: 16px;
}

.page-entry .entry-content dt, .page-about .entry-content dt, .page-static_page:not(.static-page-works) .entry-content dt {
  font-weight: bold;
}

.page-entry .entry-content figcaption, .page-about .entry-content figcaption, .page-static_page:not(.static-page-works) .entry-content figcaption {
  margin-top: 10px;
  font-size: 14px;
}

.page-entry .entry-content blockquote, .page-about .entry-content blockquote, .page-static_page:not(.static-page-works) .entry-content blockquote {
  margin: 0 0 24px 0;
  padding: 15px 20px;
  background-color: #F0F0F0;
  border-radius: 6px;
}

.page-entry .entry-content blockquote p, .page-about .entry-content blockquote p, .page-static_page:not(.static-page-works) .entry-content blockquote p {
  margin-bottom: 10px;
}

.page-entry .entry-content blockquote > p:first-child, .page-about .entry-content blockquote > p:first-child, .page-static_page:not(.static-page-works) .entry-content blockquote > p:first-child {
  margin-top: 0;
}

.page-entry .entry-content blockquote > p:last-child, .page-about .entry-content blockquote > p:last-child, .page-static_page:not(.static-page-works) .entry-content blockquote > p:last-child {
  margin-bottom: 0;
}

.page-entry .entry-content blockquote > ul:last-child, .page-about .entry-content blockquote > ul:last-child, .page-static_page:not(.static-page-works) .entry-content blockquote > ul:last-child {
  margin-bottom: 0;
}

.page-entry .entry-content .images-row, .page-about .entry-content .images-row, .page-static_page:not(.static-page-works) .entry-content .images-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-entry .entry-content .images-row > span, .page-entry .entry-content .images-row .images-row-item, .page-about .entry-content .images-row > span, .page-about .entry-content .images-row .images-row-item, .page-static_page:not(.static-page-works) .entry-content .images-row > span, .page-static_page:not(.static-page-works) .entry-content .images-row .images-row-item {
  margin-right: 20px;
}

.page-entry .entry-content .itunes-embed-info p, .page-about .entry-content .itunes-embed-info p, .page-static_page:not(.static-page-works) .entry-content .itunes-embed-info p {
  margin: 0;
}

.page-entry .entry-content .itunes-embed-info ul, .page-about .entry-content .itunes-embed-info ul, .page-static_page:not(.static-page-works) .entry-content .itunes-embed-info ul {
  margin: 16px 0 0;
}

.page-entry .entry-content .itunes-embed-info .itunes-embed-title, .page-about .entry-content .itunes-embed-info .itunes-embed-title, .page-static_page:not(.static-page-works) .entry-content .itunes-embed-info .itunes-embed-title {
  line-height: 1.6;
}

.page-entry .entry-content pre.code, .page-about .entry-content pre.code, .page-static_page:not(.static-page-works) .entry-content pre.code {
  background: #f2f4f5;
  padding: 1em 1.5em;
  border-radius: 6px;
}

.page-entry #box2, .page-about #box2, .page-static_page:not(.static-page-works) #box2 {
  display: none;
}

.page-entry .social-buttons, .page-about .social-buttons, .page-static_page:not(.static-page-works) .social-buttons {
  margin-bottom: 20px;
}

.page-about .about-subscription-count {
  margin-bottom: 20px;
  display: block;
}

.button {
  color: #222 !important;
  font-weight: bold;
  border: 2px solid #222;
  padding: 13px 40px;
  display: inline-block;
  border-radius: 6px;
  margin-top: 30px;
  user-select: none;
  transition: 200ms color;
}

.button:hover {
  color: #666 !important;
  text-decoration: none !important;
}

@media (max-width: 1100px) {
  nav {
    width: calc(100vw - 120px);
    height: 80px;
    padding: 0 60px;
  }
  .page-index #main {
    width: calc(100vw - 120px);
    margin: 0 60px;
  }
  .page-index #main .urllist-item {
    width: calc( ( 100% - 60px ) / 3);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .breadcrumb {
    width: calc(100vw - 120px);
    margin: 0 60px 40px;
  }
  .page-archive #main {
    width: calc(100vw - 360px);
    margin: 0 60px;
  }
  #header-modules {
    margin: 0 60px;
  }
  #box2 {
    width: 240px;
    margin-right: 60px;
  }
  .banner-module li {
    width: calc( ( 100% - 90px ) / 4);
    margin-right: 30px;
  }
}

@media (max-width: 900px) {
  .page-index #main .urllist-item {
    width: calc( ( 100% - 30px ) / 2);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .page-index #main .urllist-item:nth-child(3n) {
    margin-right: 30px;
  }
  .page-index #main .urllist-item:nth-child(2n) {
    margin-right: 0;
  }
  .page-index #main .entries-access-ranking .urllist-item {
    width: calc( ( 100% - 30px ) / 2);
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .page-index #main .entries-access-ranking .urllist-item:nth-child(3n) {
    margin-right: 30px;
  }
  .page-index #main .entries-access-ranking .urllist-item:nth-child(2n) {
    margin-right: 0;
  }
  .page-entry article, .page-about article, .page-static_page:not(.static-page-works) article {
    width: calc(100vw - 120px);
    margin: 0 60px;
  }
  .page-entry .pager .pager-prev a, .page-about .pager .pager-prev a, .page-static_page:not(.static-page-works) .pager .pager-prev a {
    left: 26px;
  }
  .page-entry .pager .pager-next a, .page-about .pager .pager-next a, .page-static_page:not(.static-page-works) .pager .pager-prev a {
    right: 26px;
  }
  .page-archive #main .entry-thumb-link {
    position: static;
    float: right;
    margin: 0 0 0 20px;
  }
  .page-archive #main .entry-thumb {
    width: 120px;
    height: 120px;
  }
  .page-archive #main .archive-entry {
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .itunes-embed {
    margin: 24px 0 32px;
  }
  .hatena-asin-detail {
    margin: 24px 0 32px;
  }
  body {
    font-size: 14px;
  }
  nav {
    width: 100%;
    height: 54px;
    padding: 0;
  }
  nav h1.logo {
    width: 96px;
    height: 22px;
    margin: 0 auto 0 0;
    padding: 16px 0 16px 16px;
  }
  nav ul {
    margin-right: 16px;
    overflow: hidden;
  }
  nav li {
    margin: 0 9px;
  }
  nav li > a {
    font-size: 12px;
    line-height: 54px;
  }
  .search-form {
    padding: 0 8px 0 16px;
  }
  .search-form input[type="text"] {
    width: calc(100% - 40px);
    height: 42px;
    padding: 0;
  }
  .search-form .search-module-button {
    width: 40px;
    height: 40px;
  }
  .footer {
    margin-top: 16px;
    margin-bottom: 24px;
  }
  .more a {
    width: 100%;
    font-size: 14px;
    line-height: 44px;
    margin: 16px auto 48px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
  }
  .more a:after {
    display: none;
  }
  .entry-header .entry-date {
    margin-bottom: 8px;
  }
  .breadcrumb {
    display: none;
  }
  #content a:hover {
    text-decoration: none;
  }
  .urllist-title-link, .entry-title-link {
    font-size: 15px;
    line-height: 1.5;
  }
  #header-modules {
    margin: 0;
  }
  #content {
    padding-top: 54px;
  }
  .page-archive #content, .page-entry #content, .page-about #content, .page-static_page #content {
    padding-top: 96px;
  }
  .page-archive #top-box, .page-entry #top-box, .page-about #top-box, .page-static_page #top-box {
    padding-top: 96px;
  }
  .page-archive #top-box + #content #box2, .page-entry #top-box + #content #box2, .page-about #top-box + #content #box2, .page-static_page #top-box + #content #box2 {
    margin-top: 0;
  }
  .page-index #header-modules .hatena-module {
    margin: 0 0 40px;
  }
  .page-index #header-modules .urllist-title-link {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    padding: 0 10%;
  }
  .page-index #header-modules .urllist-image-link {
    margin-bottom: 16px;
  }
  .page-index #header-modules .urllist-image {
    border-radius: 0;
  }
  .page-index #header-modules .urllist-date-link {
    font-size: 16px;
    margin-left: 0;
  }
  .page-index #main {
    width: calc(100vw - 32px);
    margin: 0 16px;
  }
  .page-index #main .urllist-item {
    width: calc( ( 100% - 16px ) / 2);
    margin-right: 16px;
    margin-bottom: 32px;
  }
  .page-index #main .urllist-item:nth-child(3n) {
    margin-right: 16px;
  }
  .page-index #main .urllist-item:nth-child(2n) {
    margin-right: 0;
  }
  .page-index #main .urllist-image-link {
    margin-bottom: 10px;
  }
  .page-index #main .urllist-title-link {
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 0 4px;
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .page-index #main .urllist-entry-body {
    font-size: 13px;
    line-height: 1.6;
    padding: 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
  .page-index #main .category-News {
    margin: 8px auto 40px;
  }
  .page-index #main .category-News .urllist-item-inner {
    padding: 0 10%;
  }
  .page-index #main .category-News .urllist-title-link {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    padding: 0;
    margin-bottom: 0px;
    text-align: center;
    -webkit-line-clamp: initial;
  }
  .page-index #main .category-News .urllist-title-link:before {
    content: 'News';
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    margin-bottom: 8px;
    display: block;
  }
  .page-index #main .category-News .urllist-date-link {
    font-size: 16px;
    margin-left: 0;
    margin-top: 8px;
  }
  .page-index #main .entries-access-ranking .urllist-item {
    width: calc( ( 100% - 16px ) / 2);
    margin-right: 16px;
    margin-bottom: 32px;
    padding-top: 16px;
    border-top: 4px solid #EFEFEF;
  }
  .page-index #main .entries-access-ranking .urllist-item:nth-child(2) {
    margin-right: 0;
  }
  .page-index #main .entries-access-ranking .urllist-item:nth-child(3) {
    margin-right: 16px;
  }
  .page-index #main .entries-access-ranking .urllist-item:nth-child(4) {
    margin-right: 0;
  }
  .page-archive #content-inner {
    display: block;
  }
  .page-archive #main {
    width: calc(100vw - 48px);
    margin: 0 24px;
  }
  .page-archive #main .archive-entry {
    min-height: initial;
    margin-bottom: 32px;
    padding-left: 0;
  }
  .page-archive #main .entry-thumb {
    width: 100px;
    height: 100px;
  }
  .page-archive #main .entry-title-link {
    margin-bottom: 10px;
  }
  .page-archive #main .entry-description {
    font-size: 13px;
    line-height: 1.6;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }
  .page-archive #main .social-buttons {
    display: none;
  }
  .page-entry article, .page-about article, .page-static_page:not(.static-page-works) article {
    width: calc(100vw - 60px);
    margin: 0 30px;
  }
  .page-entry #main h1 .entry-title-link, .page-about #main h1 .entry-title-link, .page-static_page:not(.static-page-works) #main h1 .entry-title-link {
    font-size: 19px;
  }
  .page-entry .entry-header, .page-about .entry-header, .page-static_page:not(.static-page-works) .entry-header {
    margin-bottom: 24px;
  }
  .page-entry .entry-header .entry-title, .page-about .entry-header .entry-title, .page-static_page:not(.static-page-works) .entry-header .entry-title {
    word-wrap: break-word;
    word-break: break-all;
  }
  .page-entry .entry-header .entry-date, .page-about .entry-header .entry-date, .page-static_page:not(.static-page-works) .entry-header .entry-date {
    margin-bottom: 12px;
  }
  .page-entry .entry-content, .page-about .entry-content, .page-static_page:not(.static-page-works) .entry-content {
    font-size: 15px;
    letter-spacing: 0.04em;
    word-wrap: break-word;
    word-break: break-all;
  }
  .page-entry .entry-content h1, .page-entry .entry-content h2, .page-entry .entry-content h3, .page-entry .entry-content h4, .page-entry .entry-content h5, .page-about .entry-content h1, .page-about .entry-content h2, .page-about .entry-content h3, .page-about .entry-content h4, .page-about .entry-content h5, .page-static_page:not(.static-page-works) .entry-content h1, .page-static_page:not(.static-page-works) .entry-content h2, .page-static_page:not(.static-page-works) .entry-content h3, .page-static_page:not(.static-page-works) .entry-content h4, .page-static_page:not(.static-page-works) .entry-content h5 {
    margin: -54px 0 24px 0;
    padding: 54px 0 0;
  }
  .page-entry .entry-content p, .page-entry .entry-content ul, .page-entry .entry-content dl, .page-about .entry-content p, .page-about .entry-content ul, .page-about .entry-content dl, .page-static_page:not(.static-page-works) .entry-content p, .page-static_page:not(.static-page-works) .entry-content ul, .page-static_page:not(.static-page-works) .entry-content dl {
    margin: 0 0 24px 0;
  }
  .page-entry .entry-content ul, .page-entry .entry-content ol, .page-about .entry-content ul, .page-about .entry-content ol, .page-static_page:not(.static-page-works) .entry-content ul, .page-static_page:not(.static-page-works) .entry-content ol {
    padding-left: 1.5em;
  }
  .page-entry .entry-content h1, .page-about .entry-content h1, .page-static_page:not(.static-page-works) .entry-content h1 {
    font-size: 19px;
  }
  .page-entry .entry-content h2, .page-about .entry-content h2, .page-static_page:not(.static-page-works) .entry-content h2 {
    font-size: 18px;
  }
  .page-entry .entry-content h3, .page-about .entry-content h3, .page-static_page:not(.static-page-works) .entry-content h3 {
    font-size: 17px;
  }
  .page-entry .entry-content h4, .page-about .entry-content h4, .page-static_page:not(.static-page-works) .entry-content h4 {
    font-size: 16px;
  }
  .page-entry .entry-content h5, .page-about .entry-content h5, .page-static_page:not(.static-page-works) .entry-content h5 {
    font-size: 15px;
  }
  .page-entry .entry-content figure, .page-about .entry-content figure, .page-static_page:not(.static-page-works) .entry-content figure {
    margin: 0;
  }
  .page-entry .entry-content figure[style="text-align: center;"] img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-about .entry-content figure[style="text-align: center;"] img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-static_page:not(.static-page-works) .entry-content figure[style="text-align: center;"] img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image) {
    width: auto !important;
    margin: 0 auto;
  }
  .page-entry .entry-content img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-about .entry-content img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-static_page:not(.static-page-works) .entry-content img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image) {
    width: 100vw !important;
    height: auto;
    max-width: initial !important;
    display: block;
    margin-left: -30px;
    float: none;
  }
  .page-entry .entry-content .itunes-embed-badge img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-about .entry-content .itunes-embed-badge img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-static_page:not(.static-page-works) .entry-content .itunes-embed-badge img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image) {
    width: 60px !important;
    height: 15px !important;
    margin-left: 0;
  }
  .page-entry .entry-content blockquote img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-about .entry-content blockquote img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-static_page:not(.static-page-works) .entry-content blockquote img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image) {
    width: 100% !important;
    margin-left: 0;
  }
  .page-entry .entry-content table img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-about .entry-content table img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image), .page-static_page:not(.static-page-works) .entry-content table img:not(.profile-icon):not(.hatena-id-icon):not(.hatena-star-user):not(.hatena-star-star):not(.http-bookmark):not(.itunes-embed-image):not(.hatena-asin-detail-image) {
    width: auto !important;
    margin-left: 0;
  }
  .page-entry .entry-content .images-row, .page-about .entry-content .images-row, .page-static_page:not(.static-page-works) .entry-content .images-row {
    display: block !important;
    margin: 0 0 24px 0;
  }
  .page-entry .entry-footer-modules .urllist-item, .page-about .entry-footer-modules .urllist-item, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-item {
    min-height: 100px;
    margin-bottom: 32px;
    padding-left: 0;
    padding-right: 108px;
    position: relative;
  }
  .page-entry .entry-footer-modules .urllist-image, .page-about .entry-footer-modules .urllist-image, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-image {
    width: 92px;
    height: 92px;
  }
  .page-entry .entry-footer-modules .urllist-image-link, .page-about .entry-footer-modules .urllist-image-link, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-image-link {
    position: absolute;
    top: 0;
    right: 0;
    left: initial;
  }
  .page-entry .entry-footer-modules .urllist-title-link, .page-about .entry-footer-modules .urllist-title-link, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-title-link {
    margin-bottom: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .page-entry .entry-footer-modules .urllist-entry-body, .page-about .entry-footer-modules .urllist-entry-body, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-entry-body {
    display: none;
  }
  .page-entry .entry-footer-modules .urllist-date-link, .page-about .entry-footer-modules .urllist-date-link, .page-static_page:not(.static-page-works) .entry-footer-modules .urllist-date-link {
    margin-bottom: 6px;
  }
  .page-entry .entry-footer-modules .hatena-module, .page-about .entry-footer-modules .hatena-module, .page-static_page:not(.static-page-works) .entry-footer-modules .hatena-module {
    margin-bottom: 24px;
  }
  .page-entry .entry-footer-modules .hatena-module:last-child, .page-about .entry-footer-modules .hatena-module:last-child, .page-static_page:not(.static-page-works) .entry-footer-modules .hatena-module:last-child {
    margin-bottom: 48px;
  }
  .page-entry .entry-footer-modules .hatena-module-title, .page-about .entry-footer-modules .hatena-module-title, .page-static_page:not(.static-page-works) .entry-footer-modules .hatena-module-title {
    font-size: 18px;
    padding-top: 32px;
    margin-bottom: 32px;
  }
  .page-entry .pager, .page-about .pager, .page-static_page:not(.static-page-works) .pager {
    height: 44px;
    margin-bottom: 32px;
  }
  .page-entry .pager:after, .page-about .pager:after, .page-static_page:not(.static-page-works) .pager:after {
    content: '';
    display: table;
    clear: both;
  }
  .page-entry .pager .pager-prev a, .page-entry .pager .pager-next a, .page-about .pager .pager-prev a, .page-about .pager .pager-next a, .page-static_page:not(.static-page-works) .pager .pager-prev a, .page-static_page:not(.static-page-works) .pager .pager-next a {
    width: 88px;
    height: 44px;
    transform: initial;
    opacity: 1;
    text-indent: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 44px;
    position: relative;
  }
  .page-entry .pager .pager-prev, .page-about .pager .pager-prev, .page-static_page:not(.static-page-works) .pager .pager-prev {
    float: left;
  }
  .page-entry .pager .pager-prev a, .page-about .pager .pager-prev a, .page-static_page:not(.static-page-works) .pager .pager-prev a {
    border-left: initial;
    border-top: initial;
    left: initial;
    margin-left: 32px;
    padding-left: 16px;
    text-align: left;
  }
  .page-entry .pager .pager-prev a:before, .page-about .pager .pager-prev a:before, .page-static_page:not(.static-page-works) .pager .pager-prev a:before {
    content: '前のページ';
    width: 44px;
  }
  .page-entry .pager .pager-prev a:after, .page-about .pager .pager-prev a:after, .page-static_page:not(.static-page-works) .pager .pager-prev a:after {
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    border-left: 2px solid #222;
    border-top: 2px solid #222;
    transform: rotate(-45deg);
    position: absolute;
    top: 19px;
    left: 2px;
  }
  .page-entry .pager .pager-next, .page-about .pager .pager-next, .page-static_page:not(.static-page-works) .pager .pager-next {
    float: right;
  }
  .page-entry .pager .pager-next a, .page-about .pager .pager-next a, .page-static_page:not(.static-page-works) .pager .pager-next a {
    border-right: initial;
    border-bottom: initial;
    right: initial;
    margin-right: 32px;
    padding-right: 16px;
    text-align: right;
  }
  .page-entry .pager .pager-next a:before, .page-about .pager .pager-next a:before, .page-static_page:not(.static-page-works) .pager .pager-next a:before {
    content: '次のページ';
    width: 44px;
  }
  .page-entry .pager .pager-next a:after, .page-about .pager .pager-next a:after, .page-static_page:not(.static-page-works) .pager .pager-next a:after {
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    transform: rotate(-45deg);
    position: absolute;
    top: 19px;
    right: 2px;
  }
  .banner-module {
    display: flex;
    flex-wrap: wrap;
  }
  .banner-module li {
    width: calc( ( 100% - 16px ) / 2);
    margin-right: 16px;
    margin-bottom: 16px;
  }
  .banner-module li:nth-child(4) {
    margin-right: 0;
  }
  .banner-module li:nth-child(2n) {
    margin-right: 0;
  }
  #box2 {
    font-size: 14px;
    width: calc(100vw - 80px);
    margin: 0 24px;
    padding: 16px;
    background-color: #EFEFEF;
    border-radius: 4px;
  }
  #box2 .hatena-module {
    margin-bottom: 24px;
  }
  #box2 .hatena-module-title {
    font-size: 15px;
  }
}

@media (max-width: 320px) {
  nav h1.logo {
    margin-right: auto;
  }
  nav li {
    margin: 0 0 0 16px;
  }
  nav li:nth-child(4) {
    display: none;
  }
}

.static-page-works .entry-header {
  display: none;
}

.works-wrapper {
  padding: 20px;
}

.works-wrapper a {
  color: #1EA0F0;
}

.works-wrapper a:hover {
  text-decoration: underline;
}

.works-list {
  font-size: 13px;
  padding: 0;
  width: 940px;
  max-width: 100%;
  margin: 0 auto;
}

.works-list > li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  .works-list > li {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-bottom: 56px;
  }
}

.works-list > li:not(:first-child) {
  padding-top: 90px;
}

@media screen and (max-width: 600px) {
  .works-list > li:not(:first-child) {
    padding-top: 64px;
  }
}

@media screen and (min-width: 600px) {
  .works-list .data-wrapper {
    position: -webkit-sticky;
    position: sticky;
    width: calc(33% - 20px);
    min-width: calc(33% - 20px);
    border-left: 5px solid #ccc;
    padding: 0 0 40px 20px;
    margin-right: 40px;
    box-sizing: border-box;
    top: 90px;
  }
}

@media screen and (max-width: 600px) {
  .works-list .data-wrapper {
    text-align: center;
    margin-top: 15px;
  }
}

.works-list .data-wrapper h2,
.works-list .data-wrapper p {
  font-size: 15px;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.works-list .link,
.works-list .credit {
  padding: 0;
}

.works-list .link {
  line-height: 1.5;
  margin: 0;
}

@media screen and (max-width: 600px) {
  .works-list .link {
    margin: 0 auto;
    max-width: 80%;
  }
}

.works-list .link dt {
  font-size: 10px;
  margin-top: 40px;
}

@media screen and (max-width: 600px) {
  .works-list .link dt {
    margin-top: 10px;
  }
}

.works-list .link dd {
  font-size: 11px;
  margin: 0;
  line-height: 1.3;
}

.works-list .credit {
  align-items: flex-end;
  font-size: 10px;
  margin: 40px 0 0;
  list-style-type: none;
}

@media screen and (max-width: 600px) {
  .works-list .credit {
    margin-top: 10px;
  }
}

.works-list .thumb-wrapper {
  flex-grow: 1;
  line-height: 0;
}

.works-list .thumb-wrapper img {
  width: 100%;
  height: auto;
  background: #ccc;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.works-list .thumb-wrapper img:not(:first-child) {
  margin-top: 10px;
}