/* =========================================================
   HATENA BLOG CUSTOM CSS
   ---------------------------------------------------------
   Concept
   - 完全白黒
   - 記事本文だけ時計回りに90度回転
   - 本文内部をCSSだけでスクロール可能
   - メニュー類は本文と絶対に重ねない
   - タイポグラフィは端正、配置だけ少し異常
   ========================================================= */


/* =========================================================
   0. GLOBAL
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  background: #fff !important;
  color: #000 !important;
}

html {
  font-size: 16px;
}

body {
  min-width: 0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 16px;
  line-height: 1.95;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


/* =========================================================
   1. RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;

  box-shadow: none !important;
  text-shadow: none !important;
}

body,
#container,
#content,
#content-inner,
#main,
#wrapper,
#box2,
.entry,
.hatena-module {
  background: #fff !important;
  color: #000 !important;
}


/* =========================================================
   2. LINKS
   ========================================================= */

a,
a:visited {
  color: #000 !important;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  color: #fff !important;
  background: #000 !important;

  text-decoration: none;
}

a img,
a:hover img {
  background: transparent !important;
}


/* =========================================================
   3. SELECTION
   ========================================================= */

::selection {
  background: #000;
  color: #fff;
}

::-moz-selection {
  background: #000;
  color: #fff;
}


/* =========================================================
   4. BASIC TYPOGRAPHY
   ========================================================= */

p {
  margin: 0 0 1.8em;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

hr {
  margin: 4em 0;

  border: 0;
  border-top: 1px solid #000;
}


/* =========================================================
   5. BLOCKQUOTE
   ========================================================= */

blockquote {
  margin:
    3em
    0
    3em
    3.5em;

  padding:
    0
    0
    0
    1.5em;

  border-left: 1px solid #000;

  font-size: 0.95em;
}


/* =========================================================
   6. CODE
   ========================================================= */

pre,
code {
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  color: #000;
  background: #fff;
}

code {
  padding:
    0.08em
    0.3em;

  border: 1px solid #000;
}

pre {
  padding: 1.3em;

  border: 1px solid #000;

  overflow-x: auto;

  line-height: 1.6;
}

pre code {
  padding: 0;

  border: 0;
}


/* =========================================================
   7. TABLE
   ========================================================= */

table {
  width: 100%;

  margin: 2.5em 0;

  border-collapse: collapse;
}

th,
td {
  padding:
    0.7em
    0.9em;

  border: 1px solid #000;

  vertical-align: top;
}

th {
  font-weight: normal;
  text-align: left;
}


/* =========================================================
   8. PAGE
   ========================================================= */

#container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

#content {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/*
   サイドバーを横に並べない。
   wrapper → box2 の順で縦方向に並べる。
*/

#content-inner {
  display: block;

  position: relative;

  width: min(1500px, calc(100vw - 64px));

  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   9. BLOG HEADER
   ========================================================= */

#blog-title {
  position: relative;

  width: min(760px, 56vw);

  margin:
    75px
    0
    130px
    7vw;

  padding: 0;

  text-align: right;
}

#blog-title-inner {
  margin: 0;
  padding: 0;
}

#title {
  margin: 0;

  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size: clamp(29px, 3vw, 52px);

  font-weight: 400;
  line-height: 1;

  letter-spacing: -0.04em;
}

#title a {
  text-decoration: none;
}

#title a:hover {
  color: #fff !important;
  background: #000 !important;
}


/* =========================================================
   10. BLOG DESCRIPTION
   ========================================================= */

#blog-description {
  position: relative;

  width: 290px;

  margin:
    34px
    0
    0
    calc(100% + 80px);

  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size: 11px;
  line-height: 1.65;

  text-align: left;
}


/* =========================================================
   11. TOP MENU
   ========================================================= */

/*
   トップメニューは本文領域から完全に離す。
*/

#top-box {
  width: 100%;

  margin:
    0
    0
    120px;

  padding: 0;
}

#top-box-inner {
  width: min(1050px, calc(100% - 64px));

  margin: 0 auto;

  padding:
    17px
    0;

  border-top: 1px solid #000;
  border-bottom: 1px solid #000;

  text-align: right;
}

#top-box a {
  display: inline-block;

  margin:
    0
    0
    0
    28px;

  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    sans-serif;

  font-size: 10px;

  text-transform: uppercase;

  text-decoration: none;
}


/* =========================================================
   12. HATENA GLOBAL HEADER
   ========================================================= */

#globalheader-container,
#globalheader {
  background: #fff !important;
  color: #000 !important;
}


/* =========================================================
   13. MAIN WRAPPER
   ========================================================= */

#wrapper {
  display: block;

  width: min(1180px, 100%);

  margin:
    0
    auto;

  padding: 0;

  float: none !important;
}

#main {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  float: none !important;
}


/* =========================================================
   14. ARTICLE
   ========================================================= */

.entry {
  position: relative;

  width: 100%;

  /*
     90度回転した本文のための専用領域。
     UIや次の記事をここに侵入させない。
  */

  min-height: 980px;

  margin:
    0
    0
    260px;

  padding:
    0
    0
    80px;

  clear: both;
}


/* =========================================================
   15. DATE
   ========================================================= */

/*
   日付はabsoluteをやめる。
   本文と物理的に衝突しない。
*/

.date {
  position: static;

  width: 120px;

  margin:
    0
    0
    36px
    3%;

  padding: 0;

  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    sans-serif;

  font-size: 10px;
  line-height: 1.3;

  text-align: right;
}

.date a {
  text-decoration: none;
}


/* =========================================================
   16. ENTRY HEADER
   ========================================================= */

.entry-header {
  position: relative;

  width: min(850px, 78%);

  margin:
    0
    0
    60px
    7%;

  padding:
    0
    0
    28px;

  border: 0;

  transform: none !important;
}

.entry-header::after {
  content: "";

  position: absolute;

  left: 14%;
  bottom: 0;

  width: 108%;
  height: 1px;

  background: #000;
}

.entry-title {
  margin: 0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: clamp(27px, 3vw, 43px);

  font-weight: 400;
  line-height: 1.35;

  letter-spacing: -0.025em;
}

.entry-title a {
  text-decoration: none;
}


/* =========================================================
   17. ENTRY META
   ========================================================= */

.entry-header-menu,
.entry-footer,
.entry-footer-section,
.comment-box,
.entry-categories,
.entry-tags {
  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
}


/* =========================================================
   18. CATEGORIES
   ========================================================= */

/*
   カテゴリーも本文横に置かない。
*/

.entry-categories {
  position: static;

  display: flex;

  flex-wrap: wrap;

  gap:
    6px
    18px;

  width: min(650px, 70%);

  margin:
    -30px
    0
    55px
    19%;

  padding: 0;

  font-size: 9px;
  line-height: 1.8;

  text-transform: uppercase;
}

.entry-categories a {
  display: inline-block;

  margin: 0;

  text-decoration: none;
}


/* =========================================================
   19. ROTATED ARTICLE STAGE
   ========================================================= */

/*
   ここが「回転本文の専用ステージ」。

   はてなブログのHTMLを変更できないため、
   entry-content自体を回転させる。

   周囲の要素はこの領域に入らないよう、
   entry全体に十分な高さを持たせる。
*/


/* =========================================================
   ROTATED ARTICLE BODY — CENTERED
   ========================================================= */

.entry-content {
  position: relative;

  /*
     回転後の高さになる
  */
  width: min(690px, 68vh);

  /*
     回転後の横幅になる
  */
  height: min(78vw, 1050px);

  max-width: 690px;

  /*
     回転後の本文領域がページ中央に来るよう補正。
     height の半分を中央位置から右へずらしてから回転する。
  */
  margin-top: 70px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: calc(50% + min(39vw, 525px));

  padding:
    34px
    42px;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 16px;
  line-height: 2;

  color: #000;
  background: #fff !important;

  border: 1px solid #000;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #000 #fff;

  transform-origin: top left;
  transform: rotate(90deg);

  word-break: normal;
  overflow-wrap: break-word;
}


/* =========================================================
   21. ROTATED BODY SCROLLBAR
   ========================================================= */

.entry-content::-webkit-scrollbar {
  width: 10px;
}

.entry-content::-webkit-scrollbar-track {
  background: #fff;
}

.entry-content::-webkit-scrollbar-thumb {
  background: #000;

  border:
    2px
    solid
    #fff;
}


/* =========================================================
   22. FIRST PARAGRAPH
   ========================================================= */

.entry-content > p:first-child {
  margin-left: 32px;
}


/* =========================================================
   23. HEADINGS
   ========================================================= */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: #000;
  background: transparent;

  border: 0;

  font-weight: 400;

  padding: 0;
}

.entry-content h1 {
  position: relative;

  left: -58px;

  width: calc(100% + 80px);

  margin:
    4.5em
    0
    1.8em;

  font-size: 2rem;
  line-height: 1.4;
}

.entry-content h2 {
  position: relative;

  left: 34px;

  width: calc(100% - 20px);

  margin:
    4em
    0
    1.5em;

  font-size: 1.65rem;
  line-height: 1.45;
}

.entry-content h3 {
  position: relative;

  left: -20px;

  margin:
    3.5em
    0
    1.3em;

  font-size: 1.3rem;
  line-height: 1.5;
}

.entry-content h4 {
  margin:
    3em
    0
    1.3em;

  font-size: 1.1rem;
}

.entry-content h2::after {
  content: "";

  display: block;

  width: 42%;
  height: 1px;

  margin:
    18px
    0
    0
    -60px;

  background: #000;
}


/* =========================================================
   24. LISTS
   ========================================================= */

.entry-content ul,
.entry-content ol {
  margin:
    2em
    0
    2em
    2.5em;

  padding: 0;
}

.entry-content li {
  margin-bottom: 0.65em;
}


/* =========================================================
   25. IMAGES
   ========================================================= */

.entry-content img {
  display: block;

  max-width: 100%;
  height: auto;

  margin:
    3.5em
    auto;

  filter: grayscale(1);

  border: 0;
}

.entry-content a:has(img):hover {
  background: transparent !important;
}


/* =========================================================
   26. FIGURES
   ========================================================= */

figure {
  margin:
    3.5em
    0;
}

figcaption,
.hatena-fotolife {
  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    sans-serif;

  font-size: 9px;
  line-height: 1.7;
}


/* =========================================================
   27. FOOTNOTES
   ========================================================= */

.footnote {
  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 0.72em;
}

.footnote a {
  text-decoration: none;
}


/* =========================================================
   28. ENTRY FOOTER
   ========================================================= */

/*
   回転本文より後ろ。
   十分な距離を取る。
*/

.entry-footer {
  position: static;

  width: min(690px, 67%);

  margin:
    160px
    0
    0
    26%;

  padding:
    20px
    0
    0;

  border-top: 1px solid #000;

  font-size: 9px;
  line-height: 1.7;

  transform: none !important;
}

.entry-footer-section {
  margin: 0;
}


/* =========================================================
   29. SOCIAL BUTTONS
   ========================================================= */

.social-buttons,
.entry-social-buttons {
  filter: grayscale(1);
}

.entry-social-buttons {
  margin-top: 40px;
}


/* =========================================================
   30. COMMENTS
   ========================================================= */

.comment-box {
  position: static;

  width: min(700px, 72%);

  margin:
    110px
    0
    0
    8%;

  font-size: 11px;

  transform: none !important;
}

.comment-box ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.comment-box li {
  padding:
    22px
    0;

  border-top: 1px solid #000;
}


/* =========================================================
   31. SIDEBAR / MENU AREA
   ========================================================= */

/*
   最大の変更点。

   #box2 は記事の右側に置かない。
   全記事領域の下へ移動。

   そのため回転本文とは絶対に重ならない。
*/

#box2 {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap: 24px;
  row-gap: 100px;

  width: min(1180px, 100%);

  margin:
    180px
    auto
    220px;

  padding:
    70px
    0
    0;

  border-top: 1px solid #000;

  float: none !important;
  clear: both;
}


/* =========================================================
   32. SIDEBAR MODULES
   ========================================================= */

.hatena-module {
  position: static !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0;

  border: 0;

  font-family:
    Arial,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size: 10px;
  line-height: 1.65;
}

.hatena-module-title {
  margin:
    0
    0
    20px;

  padding: 0;

  border: 0;

  font-size: 9px;
  font-weight: 400;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


/* =========================================================
   33. MODULE PLACEMENT
   ========================================================= */

/*
   モジュール同士は少し妙な位置に置くが、
   grid内なので互いには重ならない。
*/

#box2 .hatena-module:nth-child(1) {
  grid-column:
    1
    /
    span 3;
}

#box2 .hatena-module:nth-child(2) {
  grid-column:
    5
    /
    span 4;

  margin-top: 80px !important;
}

#box2 .hatena-module:nth-child(3) {
  grid-column:
    10
    /
    span 3;

  margin-top: 10px !important;
}

#box2 .hatena-module:nth-child(4) {
  grid-column:
    2
    /
    span 4;

  margin-top: 50px !important;
}

#box2 .hatena-module:nth-child(5) {
  grid-column:
    7
    /
    span 3;

  margin-top: 130px !important;
}

#box2 .hatena-module:nth-child(6) {
  grid-column:
    10
    /
    span 3;

  margin-top: 30px !important;
}

#box2 .hatena-module:nth-child(7) {
  grid-column:
    1
    /
    span 4;

  margin-top: 90px !important;
}

#box2 .hatena-module:nth-child(8) {
  grid-column:
    6
    /
    span 5;

  margin-top: 20px !important;
}

#box2 .hatena-module:nth-child(n+9) {
  grid-column:
    3
    /
    span 6;

  margin-top: 40px !important;
}


/* =========================================================
   34. PROFILE
   ========================================================= */

.hatena-module-profile .profile-icon {
  filter: grayscale(1);

  border-radius: 0 !important;
}

.hatena-module-profile .id {
  font-size: 9px;
}


/* =========================================================
   35. SEARCH
   ========================================================= */

.search-module-input {
  width: 100%;

  padding:
    7px
    0;

  border: 0 !important;
  border-bottom: 1px solid #000 !important;

  background: #fff !important;
  color: #000 !important;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 10px;

  border-radius: 0 !important;
}

.search-module-button {
  background: #fff !important;
  color: #000 !important;

  border: 1px solid #000 !important;

  border-radius: 0 !important;
}

.search-module-button:hover {
  background: #000 !important;
  color: #fff !important;
}


/* =========================================================
   36. ARCHIVE / RECENT / CATEGORY
   ========================================================= */

.hatena-module-archive ul,
.hatena-module-recent-entries ul,
.hatena-module-category ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.hatena-module-archive li,
.hatena-module-recent-entries li,
.hatena-module-category li {
  margin:
    0
    0
    10px;

  padding: 0;
}


/* =========================================================
   37. ARCHIVE PAGE
   ========================================================= */

/*
   記事本文ページ以外では本文回転の影響を受けず、
   普通の一覧として読む。
*/

.archive-header-category {
  position: relative;

  left: -45px;

  margin:
    0
    0
    100px;

  font-size: 2rem;
  font-weight: 400;
}

.archive-entry {
  position: relative;

  width: min(780px, 76%);

  margin:
    0
    0
    125px;

  padding:
    0
    0
    38px;

  border-bottom: 1px solid #000;
}

.archive-entry:nth-child(4n + 1) {
  margin-left: 4%;
}

.archive-entry:nth-child(4n + 2) {
  margin-left: 15%;
}

.archive-entry:nth-child(4n + 3) {
  margin-left: 8%;
}

.archive-entry:nth-child(4n) {
  margin-left: 20%;
}

.archive-entry-header {
  margin-bottom: 30px;
}

.archive-entry-title {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 1.8rem;

  font-weight: 400;
  line-height: 1.35;
}

.archive-entry-title a {
  text-decoration: none;
}

.archive-entry-date,
.archive-entry-tags {
  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 9px;
}


/* =========================================================
   38. BREADCRUMB
   ========================================================= */

#breadcrumb {
  width: min(760px, calc(100% - 40px));

  margin:
    0
    auto
    100px;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 9px;
}

#breadcrumb a {
  text-decoration: none;
}


/* =========================================================
   39. PAGER
   ========================================================= */

.pager {
  position: static;

  width: min(760px, 75%);

  margin:
    150px
    0
    180px
    11%;

  padding:
    25px
    0
    0;

  border-top: 1px solid #000;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 10px;
}

.pager-prev {
  text-align: left;
}

.pager-next {
  margin-top: 25px;

  text-align: right;
}


/* =========================================================
   40. FOOTER
   ========================================================= */

#footer {
  position: static;

  width: min(440px, 64%);

  margin:
    0
    8vw
    100px
    auto;

  padding:
    20px
    0
    0;

  border-top: 1px solid #000;

  background: #fff !important;
  color: #000 !important;

  text-align: left;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 8px;
  line-height: 1.6;
}

#footer a {
  text-decoration: none;
}


/* =========================================================
   41. FORM ELEMENTS
   ========================================================= */

button,
input,
textarea,
select {
  border-radius: 0 !important;

  background: #fff !important;
  color: #000 !important;

  border: 1px solid #000;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;
}

button:hover,
input[type="submit"]:hover {
  background: #000 !important;
  color: #fff !important;
}


/* =========================================================
   42. PAGE SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #000;

  border:
    2px
    solid
    #fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1100px) {

  #content-inner {
    width: calc(100% - 48px);
  }

  #wrapper {
    width: 100%;
  }

  .entry {
    min-height: 880px;
  }

  .entry-header {
    width: 80%;

    margin-left: 6%;
  }

  .entry-content {
    width: min(630px, 65vh);

    height: calc(100vw - 100px);

    max-width: 630px;

    margin-left: 10%;
  }

  .entry-footer {
    margin-left: 21%;
  }

  #box2 {
    width: 94%;

    grid-template-columns:
      repeat(8, minmax(0, 1fr));

    column-gap: 22px;
    row-gap: 90px;
  }

  #box2 .hatena-module:nth-child(1) {
    grid-column: 1 / span 3;
  }

  #box2 .hatena-module:nth-child(2) {
    grid-column: 5 / span 4;
  }

  #box2 .hatena-module:nth-child(3) {
    grid-column: 2 / span 3;
  }

  #box2 .hatena-module:nth-child(4) {
    grid-column: 6 / span 3;
  }

  #box2 .hatena-module:nth-child(5) {
    grid-column: 1 / span 4;
  }

  #box2 .hatena-module:nth-child(6) {
    grid-column: 5 / span 3;
  }

  #box2 .hatena-module:nth-child(n+7) {
    grid-column: 2 / span 5;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

  html {
    font-size: 15px;
  }

  #content-inner {
    width: calc(100% - 32px);
  }


  /* -------------------------------------------------------
     BLOG HEADER
     ------------------------------------------------------- */

  #blog-title {
    width: 80vw;

    margin:
      45px
      0
      80px
      7vw;
  }

  #title {
    font-size: 29px;
  }

  #blog-description {
    width: 58vw;

    margin:
      25px
      0
      0
      20vw;

    font-size: 9px;
  }


  /* -------------------------------------------------------
     TOP MENU
     ------------------------------------------------------- */

  #top-box {
    margin-bottom: 80px;
  }

  #top-box-inner {
    width: calc(100% - 32px);

    text-align: left;
  }

  #top-box a {
    margin:
      0
      18px
      7px
      0;
  }


  /* -------------------------------------------------------
     ARTICLE
     ------------------------------------------------------- */

  .entry {
    min-height: 76vh;

    margin-bottom: 150px;

    padding-bottom: 30px;
  }


  /* -------------------------------------------------------
     DATE
     ------------------------------------------------------- */

  .date {
    width: auto;

    margin:
      0
      0
      26px
      0;

    text-align: left;

    font-size: 8px;
  }


  /* -------------------------------------------------------
     TITLE
     ------------------------------------------------------- */

  .entry-header {
    width: calc(100% - 12px);

    margin:
      0
      0
      48px
      -8px;

    padding-bottom: 22px;
  }

  .entry-header::after {
    left: 42px;

    width: calc(100% + 20px);
  }

  .entry-title {
    font-size: 24px;
    line-height: 1.4;
  }


  /* -------------------------------------------------------
     CATEGORY
     ------------------------------------------------------- */

  .entry-categories {
    width: 100%;

    margin:
      -24px
      0
      40px;

    gap:
      5px
      12px;

    font-size: 8px;
  }


  /* -------------------------------------------------------
     ROTATED BODY
     ------------------------------------------------------- */

  .entry-content {
    width: 62vh;

    height: calc(100vw - 38px);

    max-width: none;

    margin:
      40px
      0
      0
      18px;

    padding:
      24px
      26px;

    font-size: 14px;
    line-height: 1.9;

    overflow-y: auto;
    overflow-x: hidden;

    transform-origin: top left;

    transform:
      translateX(100%)
      rotate(90deg);
  }

  .entry-content > p:first-child {
    margin-left: 10px;
  }


  /* -------------------------------------------------------
     BODY HEADINGS
     ------------------------------------------------------- */

  .entry-content h1 {
    left: -18px;

    width: calc(100% + 25px);

    font-size: 1.7rem;
  }

  .entry-content h2 {
    left: 14px;

    width: calc(100% - 14px);

    font-size: 1.45rem;
  }

  .entry-content h3 {
    left: -8px;

    font-size: 1.2rem;
  }

  .entry-content h2::after {
    width: 57%;

    margin-left: -35px;
  }


  /* -------------------------------------------------------
     BLOCKQUOTE
     ------------------------------------------------------- */

  blockquote {
    margin-left: 20px;
  }


  /* -------------------------------------------------------
     ENTRY FOOTER
     ------------------------------------------------------- */

  .entry-footer {
    width: 88%;

    margin:
      100px
      0
      0
      12%;
  }


  /* -------------------------------------------------------
     COMMENTS
     ------------------------------------------------------- */

  .comment-box {
    width: 92%;

    margin:
      90px
      0
      0;
  }


  /* -------------------------------------------------------
     MENU AREA
     ------------------------------------------------------- */

  #box2 {
    display: block;

    width: 100%;

    margin:
      130px
      0
      170px;

    padding-top: 55px;
  }

  #box2 .hatena-module,
  #box2 .hatena-module:nth-child(1),
  #box2 .hatena-module:nth-child(2),
  #box2 .hatena-module:nth-child(3),
  #box2 .hatena-module:nth-child(4),
  #box2 .hatena-module:nth-child(5),
  #box2 .hatena-module:nth-child(6),
  #box2 .hatena-module:nth-child(7),
  #box2 .hatena-module:nth-child(8),
  #box2 .hatena-module:nth-child(n+9) {
    width: 72% !important;

    margin:
      0
      0
      90px !important;
  }

  #box2 .hatena-module:nth-child(3n + 1) {
    margin-left: 0 !important;
  }

  #box2 .hatena-module:nth-child(3n + 2) {
    margin-left: 22% !important;
  }

  #box2 .hatena-module:nth-child(3n) {
    margin-left: 9% !important;
  }


  /* -------------------------------------------------------
     ARCHIVE
     ------------------------------------------------------- */

  .archive-header-category {
    left: 0;

    margin-bottom: 70px;
  }

  .archive-entry,
  .archive-entry:nth-child(4n + 1),
  .archive-entry:nth-child(4n + 2),
  .archive-entry:nth-child(4n + 3),
  .archive-entry:nth-child(4n) {
    width: 93%;

    margin:
      0
      0
      90px;
  }

  .archive-entry:nth-child(4n + 2) {
    margin-left: 7%;
  }

  .archive-entry:nth-child(4n) {
    margin-left: 4%;
  }


  /* -------------------------------------------------------
     PAGER
     ------------------------------------------------------- */

  .pager {
    width: 92%;

    margin:
      100px
      0
      120px;
  }


  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */

  #footer {
    width: 65vw;

    margin:
      60px
      7vw
      60px
      auto;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

  #content-inner {
    width: calc(100% - 26px);
  }

  #blog-title {
    width: 84vw;

    margin-left: 5vw;
  }

  #blog-description {
    width: 66vw;

    margin-left: 16vw;
  }

  .entry-title {
    font-size: 22px;
  }

  .entry {
    min-height: 73vh;
  }

  .entry-content {
    width: 58vh;

    height: calc(100vw - 28px);

    margin-left: 14px;

    padding:
      20px
      21px;

    font-size: 13px;
    line-height: 1.85;
  }

  .entry-footer {
    width: 92%;

    margin-left: 8%;
  }

  #box2 .hatena-module,
  #box2 .hatena-module:nth-child(1),
  #box2 .hatena-module:nth-child(2),
  #box2 .hatena-module:nth-child(3),
  #box2 .hatena-module:nth-child(4),
  #box2 .hatena-module:nth-child(5),
  #box2 .hatena-module:nth-child(6),
  #box2 .hatena-module:nth-child(7),
  #box2 .hatena-module:nth-child(8),
  #box2 .hatena-module:nth-child(n+9) {
    width: 80% !important;
  }

}