/* ==================================================
   RFB / RUNNING FULL BURST
   CLEAN FINAL CSS
================================================== */


/* ==================================================
   BASE
================================================== */

html,
body {
  margin: 0;
  padding: 0;
  background: #e8e2d2 !important;
}

body {
  color: #111;
}


/* ==================================================
   HEADER
================================================== */

#blog-title {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  background: #e5decd;
  box-sizing: border-box;
}

.header-image-only #blog-title-inner {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1300 / 300;
  min-height: 0 !important;
  padding: 0 !important;
  background-color: #e5decd !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  box-sizing: border-box;
}

.header-image-only #blog-title-inner::before {
  display: none !important;
}

.header-image-only #blog-title-content {
  display: none !important;
}


/* ==================================================
   MAIN NAV
================================================== */

.rfb-nav {
  width: 100%;
  max-width: 1300px;
  height: 48px;
  margin: 0 auto;
  background: #050505;
  border-left: 4px solid #e60012;
  box-sizing: border-box;
}

.rfb-nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  height: 48px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.rfb-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  color: #fff !important;
  background: #050505;
  border-right: 1px solid #333;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.rfb-nav-item:hover {
  background: #222;
}

.rfb-nav-item.active {
  background: #050505;
  box-shadow: inset 0 -3px 0 #e60012;
}


/* ==================================================
   NOW LOADING
================================================== */

.rfb-loading-banner {
  display: none !important;
}

.rfb-nav-inner::after {
  content: "";
  display: block;
  flex: 0 0 550px;
  width: 550px;
  height: 36px;
  margin: 0;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/z/zassyoku_OG3/20260822/20260822012632.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: inset(3px 6px 3px 6px);
  box-sizing: border-box;
}


/* ==================================================
   PAGE WIDTH
================================================== */

#main,
#main-inner,
#container,
#content,
.archive-entries,
.archive-entry,
.entry {
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#main {
  margin-top: 0;
}

#container,
#content {
  width: 100% !important;
  max-width: 1300px !important;
  box-sizing: border-box !important;
}


/* ==================================================
   OLD SIDEBAR
   サイドバーは画面上には出さない
   JSが必要なモジュールだけ取り出す
================================================== */

#box2 {
  display: none !important;
}


/* ==================================================
   ARTICLE PAGE
================================================== */

.page-entry #main {
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 0 10px !important;
  background: #f7f4eb !important;
  box-sizing: border-box !important;
}

.page-entry #main-inner {
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.page-entry .entry {
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 20px 24px 30px !important;
  background: #f7f4eb !important;
  box-sizing: border-box !important;
}

.page-entry .entry-content,
.page-entry .entry-body {
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ==================================================
   ARTICLE TITLE
================================================== */

.entry {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.entry-title {
  margin: 28px 0 16px;
  padding: 0 0 14px;
  font-size: 34px;
  line-height: 1.45;
  font-weight: 800;
  color: #111;
  border-bottom: 3px solid #e60012;
}

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

.entry-title a:hover {
  color: #e60012;
  text-decoration: none;
}


/* ==================================================
   DATE / CATEGORY / TAG
================================================== */

.date {
  margin-bottom: 8px;
  color: #555;
}

.entry-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
}

.entry-categories .entry-category-link,
.entry-tag {
  display: inline-block;
  padding: 5px 10px;
  color: #222 !important;
  background: #f4f0e5;
  border: 1px solid #222;
  border-left: 4px solid #e60012;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none !important;
}

.entry-categories .entry-category-link:hover,
.entry-tag:hover {
  color: #fff !important;
  background: #111;
  border-color: #111;
}


/* ==================================================
   ARTICLE CONTENT
================================================== */

.entry-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 70px 55px;
  background: #fff;
  color: #222;
  line-height: 1.9;
  box-sizing: border-box;
}

.entry-content p {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.entry-content a {
  color: #b00000;
}

.entry-content iframe {
  max-width: 100%;
}


/* ==================================================
   ARTICLE HEADINGS
================================================== */

.entry-content h2 {
  margin-top: 48px;
  margin-bottom: 20px;
  padding: 10px 14px;
  color: #fff;
  background: #111;
  border-left: 8px solid #e60012;
  border-bottom: 3px solid #e60012;
  line-height: 1.5;
}

.entry-content h3 {
  margin-top: 36px;
  margin-bottom: 16px;
  padding: 8px 12px;
  color: #111;
  border-left: 6px solid #e60012;
  border-bottom: 1px solid #111;
  line-height: 1.5;
}


/* ==================================================
   FEATURED
================================================== */

.rfb-featured {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid #111;
  background: #e5decd;
  box-sizing: border-box;
}

.rfb-featured-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  background: #111;
  border-bottom: 3px solid #e60012;
  box-sizing: border-box;
}

.rfb-featured-label {
  display: inline-block;
  margin-left: 8px;
  padding: 5px 9px;
  background: #e60012;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}

.rfb-featured-sub {
  margin-left: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.rfb-featured-main {
  display: none !important;
}


/* ==================================================
   LATEST + CATEGORY
================================================== */

.rfb-featured-layout {
  display: grid;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
  gap: 10px;
  padding: 10px;
  background: #e5decd;
  box-sizing: border-box;
}

.rfb-latest {
  min-width: 0;
  background: #171717;
  border: 2px solid #111;
  box-sizing: border-box;
}

.rfb-latest-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  background: #111;
  border-bottom: 3px solid #e60012;
  color: #fff;
  box-sizing: border-box;
}

.rfb-latest-title span {
  font-size: 18px;
  font-weight: 900;
}

.rfb-latest-title small {
  color: #ffcc00;
  font-size: 10px;
  font-weight: bold;
}


/* ==================================================
   CATEGORY
================================================== */

.rfb-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.rfb-featured-layout .rfb-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 145px;
  padding: 10px;
  color: #fff !important;
  text-decoration: none !important;
  border: 2px solid #111;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #171717;
}

.rfb-featured-layout .rfb-category-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

.rfb-featured-layout .rfb-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 2px,
    transparent 2px,
    transparent 8px
  );
  pointer-events: none;
}

.rfb-game {
  background-color: #101c25 !important;
}

.rfb-device {
  background-color: #151515 !important;
}

.rfb-guide {
  background-color: #1a1a1a !important;
}

.rfb-column {
  background-color: #171717 !important;
}

.rfb-category-label {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  padding: 4px 7px;
  color: #111;
  background: #ffcc00;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.rfb-device .rfb-category-label {
  background: #00a7e1;
  color: #fff;
}

.rfb-guide .rfb-category-label {
  background: #e60012;
  color: #fff;
}

.rfb-column .rfb-category-label {
  background: #00a65a;
  color: #fff;
}

.rfb-category-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  transform: translateY(-3px);
}

.rfb-category-content::before {
  content: "";
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .9;
}

.rfb-game .rfb-category-content::before {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/z/zassyoku_OG3/20260823/20260823033954.png");
}

.rfb-device .rfb-category-content::before {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/z/zassyoku_OG3/20260823/20260823034026.png");
}

.rfb-guide .rfb-category-content::before {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/z/zassyoku_OG3/20260823/20260823034012.png");
}

.rfb-column .rfb-category-content::before {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/z/zassyoku_OG3/20260823/20260823034019.png");
}

.rfb-category-content strong {
  display: block;
  margin: 0 0 3px;
  color: #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .5px;
  text-align: center;
}

.rfb-category-content small {
  display: block;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.rfb-category-content::after {
  content: "›";
  position: absolute;
  right: 6px;
  bottom: 2px;
  color: #e60012;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}


/* ==================================================
   LATEST LIST
================================================== */

#rfb-latest-list {
  display: block !important;
  width: 100% !important;
  height: 315px !important;
  max-height: 315px !important;
  margin: 0;
  padding: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: #666 #111;
}

#rfb-latest-list::-webkit-scrollbar {
  width: 7px;
}

#rfb-latest-list::-webkit-scrollbar-track {
  background: #111;
}

#rfb-latest-list::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 0;
}

#rfb-latest-list::-webkit-scrollbar-thumb:hover {
  background: #e60012;
}

#rfb-latest-list .rfb-latest-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 92px minmax(0,1fr) 25px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 63px !important;
  min-height: 63px !important;
  max-height: 63px !important;
  padding: 0 12px;
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 1px solid #333;
  box-sizing: border-box !important;
}

#rfb-latest-list .rfb-latest-item:hover {
  background: #242424;
}

#rfb-latest-list .rfb-latest-date {
  min-width: 0;
  color: #999;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.3;
}

#rfb-latest-list .rfb-latest-name {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: bold;
  line-height: 1.45;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
}

#rfb-latest-list .rfb-latest-arrow {
  color: #e60012;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.rfb-latest-loading,
.rfb-latest-error {
  padding: 25px;
  color: #aaa;
  font-size: 12px;
}


/* ==================================================
   TOP PAGE
================================================== */

.page-index .rfb-latest .entry-content,
.page-index .rfb-latest .entry-body,
.page-index .rfb-latest .entry-description,
.page-index .rfb-latest .entry-summary {
  display: none !important;
}

.page-index .rfb-latest .entry {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-index #main {
  padding-bottom: 20px;
}


/* ==================================================
   RFB RELATED
   「こんなのも読まれています」
================================================== */

.hatena-module-custom-rfb-read-next {
  width: 100% !important;
  max-width: 1300px !important;
  margin: 20px auto 15px !important;
  padding: 0 !important;
  background: #e8e2d2 !important;
  border: 2px solid #111 !important;
  box-sizing: border-box !important;
}

.hatena-module-custom-rfb-read-next .hatena-module-title {
  margin: 0 !important;
  padding: 10px 14px !important;
  background: #111 !important;
  color: #fff !important;
  border-bottom: 3px solid #e60012 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.hatena-module-custom-rfb-read-next .hatena-module-title::before {
  content: "RFB";
  display: inline-block;
  margin-right: 10px;
  padding: 3px 7px;
  background: #e60012;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.hatena-module-custom-rfb-read-next .hatena-module-body {
  padding: 14px !important;
  box-sizing: border-box;
}

.hatena-module-custom-rfb-read-next .entries-access-ranking {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hatena-module-custom-rfb-read-next .entries-access-ranking-item {
  margin: 0 !important;
  padding: 0 !important;
  background: #111 !important;
  border: 1px solid #333 !important;
  box-sizing: border-box !important;
}

.hatena-module-custom-rfb-read-next .entries-access-ranking-item:hover {
  border-color: #e60012 !important;
  transform: translateY(-2px);
}

.hatena-module-custom-rfb-read-next img {
  display: block !important;
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.hatena-module-custom-rfb-read-next a {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

.hatena-module-custom-rfb-read-next a:hover {
  color: #fff !important;
}


/* ==================================================
   RESPONSIVE
================================================== */

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

  #container,
  #content,
  .page-entry #main,
  .page-entry #main-inner,
  .page-entry .entry {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-entry .entry {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

}

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

  .rfb-featured-layout {
    grid-template-columns: 1fr;
  }

  .rfb-featured-layout .rfb-category-grid {
    grid-template-columns: repeat(4,1fr);
  }

  .hatena-module-custom-rfb-read-next .entries-access-ranking {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .hatena-module-custom-rfb-read-next img {
    height: 150px !important;
  }

}

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

  .header-image-only #blog-title-inner {
    height: auto !important;
    aspect-ratio: 1300 / 300;
    background-size: 100% 100% !important;
  }

  .rfb-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .rfb-nav-item {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 13px;
    font-size: 13px;
  }

  .rfb-nav,
  .rfb-nav-inner {
    height: 44px;
  }

  .rfb-nav-inner::after {
    flex: 0 0 300px;
    width: 300px;
    height: 28px;
  }

  .rfb-featured {
    padding: 7px;
  }

  .rfb-featured-layout {
    grid-template-columns: 1fr;
    padding: 7px;
  }

  .rfb-featured-layout .rfb-category-grid {
    grid-template-columns: 1fr 1fr;
  }

  #rfb-latest-list {
    height: 252px !important;
    max-height: 252px !important;
  }

  #rfb-latest-list .rfb-latest-item {
    grid-template-columns: 75px minmax(0,1fr) 20px !important;
  }

  #rfb-latest-list .rfb-latest-name {
    font-size: 12px !important;
  }

  #rfb-latest-list .rfb-latest-date {
    font-size: 10px;
  }

  .hatena-module-custom-rfb-read-next {
    margin: 20px auto 15px !important;
  }

  .hatena-module-custom-rfb-read-next .entries-access-ranking {
    gap: 9px !important;
  }

  .hatena-module-custom-rfb-read-next img {
    height: 105px !important;
  }

  .hatena-module-custom-rfb-read-next a {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .entry-content {
    padding-left: 18px;
    padding-right: 18px;
  }

}

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

  .hatena-module-custom-rfb-read-next .entries-access-ranking {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

}

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

  .rfb-nav-item {
    padding: 0 11px;
    font-size: 12px;
  }

  .rfb-nav-inner::after {
    flex: 0 0 240px;
    width: 240px;
    height: 25px;
  }

  .rfb-featured-layout .rfb-category-card {
    min-height: 125px;
    padding: 8px;
  }

  .rfb-category-content::before {
    width: 58px;
    height: 58px;
  }

  .rfb-category-content strong {
    font-size: 22px;
  }

  .rfb-category-content small {
    font-size: 10px;
  }

  .rfb-category-content::after {
    right: 4px;
    bottom: 1px;
    font-size: 24px;
  }

  #rfb-latest-list .rfb-latest-item {
    grid-template-columns: 72px minmax(0,1fr) 18px !important;
  }

  #rfb-latest-list .rfb-latest-name {
    font-size: 11px !important;
    line-height: 1.35;
  }

  #rfb-latest-list .rfb-latest-date {
    font-size: 9px;
  }

}

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

  .hatena-module-custom-rfb-read-next .entries-access-ranking {
    grid-template-columns: 1fr !important;
  }

  .hatena-module-custom-rfb-read-next img {
    height: 150px !important;
  }

}

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

  .entry-content {
    line-height: 1.8;
  }

  .entry-content img {
    max-width: 100%;
    height: auto;
  }

}
/* ==================================================
   RFB / CATEGORY ARTICLE CARDS
   カテゴリー記事一覧
================================================== */

.page-archive-category .archive-entries {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* カード本体 */
.page-archive-category .archive-entry {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #111 !important;
  border: 2px solid #111 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform .15s ease, border-color .15s ease;
}

.page-archive-category .archive-entry:hover {
  border-color: #e60012 !important;
  transform: translateY(-2px);
}


/* ==================================================
   アイキャッチ
================================================== */

.page-archive-category .entry-thumb-link {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #171717 !important;
}

.page-archive-category .entry-thumb {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  transition: transform .2s ease;
}

.page-archive-category .archive-entry:hover .entry-thumb {
  transform: scale(1.02);
}


/* ==================================================
   日付・タイトル
================================================== */

.page-archive-category .archive-entry-header {
  order: 2 !important;
  padding: 12px 16px 0 !important;
  box-sizing: border-box !important;
}

.page-archive-category .date {
  margin: 0 0 6px !important;
  color: #999 !important;
  font-family: monospace !important;
  font-size: 12px !important;
}


/* タイトル */

.page-archive-category .entry-title {
  margin: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

.page-archive-category .entry-title a {
  color: #fff !important;
  text-decoration: none !important;
}

.page-archive-category .entry-title a:hover {
  color: #fff !important;
}


/* ==================================================
   カテゴリー
================================================== */

.page-archive-category .categories {
  order: 3 !important;
  margin: 0 !important;
  padding: 0 16px 10px !important;
}

.page-archive-category .categories a {
  display: inline-block !important;
  padding: 4px 8px !important;
  color: #fff !important;
  background: #e60012 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-decoration: none !important;
}


/* ==================================================
   概要
================================================== */

.page-archive-category .archive-entry-body {
  order: 4 !important;
  padding: 0 16px 16px !important;
  box-sizing: border-box !important;
}

.page-archive-category .entry-description {
  margin: 0 !important;
  color: #ccc !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}


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

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

  .page-archive-category .archive-entries {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 7px !important;
  }

  .page-archive-category .entry-title {
    font-size: 19px !important;
  }

}

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

  .page-archive-category .entry-title {
    font-size: 17px !important;
  }

}