/* =========================================================
   Elegan_TIV｜Complete CSS
   Dark / Academic / Sophisticated
   ========================================================= */


/* =========================================================
   1. ボックスモデル・リンク初期化
   ========================================================= */

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

a,
a:hover,
a:visited,
a:active {
  text-decoration: none !important;
}


/* =========================================================
   2. 基本レイアウト
   ========================================================= */

body {
  width: 100%;
  margin: 0;
  background: #0d101c;
}

/* メインコンテナを中央寄せ */
#container,
#main {
  width: 100%;
  max-width: 1375px;
  margin: 0 auto;
}


/* =========================================================
   3. プロフィール
   ========================================================= */

#box2 {
  display: block;
  width: 300px;
  max-width: 100%;
  margin: 60px 0 0;
  padding: 0;

  float: none;
  clear: both;

  text-align: left;
}

#box2 .hatena-module:not(.hatena-module-profile) {
  display: none;
}

#box2 .hatena-module-profile {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;

  text-align: left;
}

#box2 .hatena-module-profile a {
  text-decoration: none !important;
}

#box2 .hatena-module-profile .profile-icon,
#box2 .hatena-module-profile img {
  display: block;
}


/* =========================================================
   4. 本文
   ========================================================= */

.entry-content {
  padding: clamp(20px, 8vw, 150px);
  padding-bottom: 30px;

  color: #bcc4ef;

  font-family:
    "Times New Roman",
    "Zen Old Mincho",
    "Noto Serif JP",
    "Shippori Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.01em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   5. 本文・アフィリエイトリンク
   ========================================================= */

.entry-content a,
.entry-content .hatena-asin-detail a {
  color: #0088ff;
  font-weight: 600;
  text-decoration: none !important;

  transition: color 0.3s ease;
}

.entry-content a:hover,
.entry-content .hatena-asin-detail a:hover {
  color: #e0ebff;
  text-decoration: none !important;
}


/* =========================================================
   6. ドロップキャップ
   ---------------------------------------------------------
   :nth-child(1 of ...) は高度なCSS構文のため、
   より一般的な :first-of-type を使用。
   ========================================================= */

.entry-content > p:first-of-type:not(.hatena-asin-detail-title)::first-letter {
  float: left;

  padding-top: 6px;
  padding-right: 10px;

  color: #b8bfec;

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

  font-size: 2.5em;
  font-weight: 400;
  line-height: 1;
}


/* =========================================================
   7. 日付・カテゴリー
   ========================================================= */

.date {
  margin: 0 0 4px;
  padding: 0;
}

.entry-categories {
  margin: 4px 0 8px;
  padding: 0;
}


/* =========================================================
   8. エントリータイトル
   ========================================================= */

.entry-title {
  margin: 0;
  padding: 0;

  text-align: left;
}

.entry-title a {
  display: inline-block;
  position: relative;

  padding: 8px 0 8px 20px;

  color: #e6e6fa;

  font-family:
    "Klee One",
    "Shippori Mincho",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 37px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.05em;

  text-decoration: none !important;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.entry-title a:hover {
  color: #e6e6fa;
  text-shadow: 0 0 7px rgba(184, 191, 236, 0.6);
}


/* =========================================================
   9. 記事・フッター
   ========================================================= */

.entry {
  margin-bottom: 50px;
}

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

#blog-title {
  margin-bottom: 50px;
}


/* =========================================================
   10. 引用
   ========================================================= */

blockquote {
  margin: 2em 0 2em 35px;
  padding-left: 1.2em;
  padding-right: 3em;

  border-left: 1px solid #5b647c;

  line-height: 2;
}


/* =========================================================
   11. タブレット
   ========================================================= */

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

  #box2 {
    width: 280px;
    max-width: calc(100% - 30px);
    margin: 45px 0 0;

    float: none;
    clear: both;

    padding: 0;
    text-align: left;
  }

  #box2 .hatena-module-profile {
    text-align: left;
  }

  .entry-content {
    padding: 30px 24px;

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

  .entry-title a {
    font-size: 29px;
    line-height: 1.45;
    letter-spacing: 0.035em;
  }

  blockquote {
    margin-left: 15px;
    padding-left: 1em;
    padding-right: 1.5em;
  }

  .entry {
    margin-bottom: 40px;
  }

  #blog-title {
    margin-bottom: 35px;
  }
}


/* =========================================================
   12. 小型スマートフォン
   ========================================================= */

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

  #box2 {
    width: 260px;
    max-width: calc(100% - 20px);
    margin: 35px 0 0;

    float: none;
    clear: both;

    padding: 0;
    text-align: left;
  }

  .entry-content {
    padding: 24px 18px 30px;

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

  .entry-title a {
    font-size: 25px;
    line-height: 1.5;
    letter-spacing: 0.025em;
  }

  blockquote {
    margin-left: 8px;
    padding-left: 0.9em;
    padding-right: 1em;
  }
}