/* Google Fonts: Press Start 2P */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+JP:wght@400;600&family=JetBrains+Mono&display=swap');

/* ===============================
   BASE
=============================== */
html{
  font-size:16px;
}

body{
  background:#fafafa;
  color:#222;
  font-family:"Noto Sans JP", sans-serif;
  font-size:1.125rem; /* 18px */
  line-height:1.9;

  /* subtle pixel grid */
  background-image:
    linear-gradient(#eee 1px, transparent 1px),
    linear-gradient(90deg,#eee 1px, transparent 1px);
  background-size:12px 12px;
}

/* ===============================
   LAYOUT
=============================== */
.blog-container{
  max-width:1200px;
  margin:auto;
  padding:40px 20px;
}

/* .blog-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
} */

/* ===============================
   BREADCRUMB
=============================== */
.breadcrumb{
  font-size:0.8rem;
  margin-bottom:20px;
  color:#00bcd4;
}

.breadcrumb a{
  color:#00bcd4;
  text-decoration:none;
}

/* ===============================
   POST LIST
=============================== */
.post-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* pixel card */
.post-card{
  background:#fff;
  border:3px solid #00bcd4;
  padding:20px;
  position:relative;

  transition:all .15s ease;
}

.post-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:4px 4px 0 #00bcd4;
}

/* ===============================
   TITLE
=============================== */
.post-card h2{
  font-size:1.4rem;
  margin-bottom:10px;
}

.post-card h2 a{
  color:#222;
  text-decoration:none;
}

.post-card h2 a:hover{
  color:#00bcd4;
}

/* ===============================
   META
=============================== */
.post-meta{
  font-size:0.85rem;
  color:#666;
  margin-bottom:10px;
}

/* ===============================
   BUTTON (pixel style)
=============================== */
.readmore{
  display:inline-block;
  margin-top:10px;

  font-family:"Press Start 2P";
  font-size:0.65rem;

  padding:10px 14px;

  border:3px solid #4caf50;
  color:#4caf50;

  text-decoration:none;
}

.readmore:hover{
  background:#4caf50;
  color:#fff;
}

/* ===============================
   SIDEBAR
=============================== */
.blog-sidebar{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ===============================
   WIDGET (Minecraft風)
=============================== */
.widget{
  background:#fff;
  border:3px solid #4caf50;
  padding:15px;
}

.widget h3{
  font-family:"Press Start 2P";
  font-size:0.7rem;
  margin-bottom:10px;
  color:#4caf50;
}

/* list */
.widget ul{
  list-style:none;
  padding:0;
}

.widget li{
  margin-bottom:8px;
}

/* links */
.widget a{
  color:#00bcd4;
  text-decoration:none;
}

.widget a:hover{
  text-decoration:underline;
}

/* ===============================
   ARTICLE
=============================== */
.article{
  max-width:720px;
}

.article h1{
  font-size:2rem;
  margin-bottom:20px;
}

.article h2{
  font-size:1.5rem;
  margin-top:40px;

  border-left:6px solid #00bcd4;
  padding-left:10px;
}

.article h3{
  font-size:1.25rem;
  margin-top:30px;
}

.article p{
  margin-bottom:1.4em;
}

/* ===============================
   CODE
=============================== */
pre{
  background:#111;
  color:#0f0;
  padding:16px;
  overflow:auto;
  border-radius:4px;
}

code{
  font-family:"JetBrains Mono", monospace;
}

/* ===============================
   BLOCKQUOTE
=============================== */
blockquote{
  border-left:4px solid #ccc;
  padding-left:12px;
  color:#555;
}

/* ===============================
   IMAGES (pixel対応)
=============================== */
img{
  max-width:100%;
  height:auto;

  image-rendering:pixelated;
}

/* ===============================
   PIXEL DECORATION (optional)
=============================== */
.pixel-divider{
  height:16px;
  background:url('/img/pixel-grass.png') repeat-x;
  image-rendering:pixelated;
  margin:40px 0;
}

/* ===============================
   HEADER PIXEL SKY (optional)
=============================== */
.blog-header{
  height:120px;
  background:url('/img/pixel-sky.png') repeat-x;
  image-rendering:pixelated;
}

/* ===============================
   RESPONSIVE
=============================== */
/* @media(max-width:900px){

  .blog-grid{
    grid-template-columns:1fr;
    display:block;
  }

  body{
    font-size:1rem;
  }

} */

/* Bootstrap rowの余白調整 */
.blog-container .row{
  row-gap:40px;
}

/* メインとサイドバーの余白 */
.blog-sidebar{
  margin-top:20px;
}

/* PC時は余白戻す */
@media(min-width:992px){
  .blog-sidebar{
    margin-top:0;
  }
}

/* 目次 */
.toc{
  background:#fff;
  border:3px solid #00bcd4;
  padding:15px;
  margin:30px 0;
}

.toc-title{
  font-family:"Press Start 2P";
  font-size:0.7rem;
  margin-bottom:10px;
  color:#00bcd4;
}

.toc ul{
  padding-left:20px;
}

.toc a{
  color:#00bcd4;
  text-decoration:none;
}

.toc a:hover{
  text-decoration:underline;
}

.entry-body{
  font-size:1.125rem;
}

/* 見出し間隔 */
.entry-body h2{
  margin-top:50px;
}

.entry-body h3{
  margin-top:30px;
}

.post-nav{
  display:flex;
  justify-content:space-between;
  margin:40px 0;
}

/* 前後記事 */
.post-nav div{
  border:3px solid #4caf50;
  padding:10px;
}

.post-nav a{
  text-decoration:none;
  color:#4caf50;
}

/* 関連記事 */
.related{
  margin-top:50px;
}

.related h2{
  font-size:1.2rem;
  margin-bottom:20px;
}

.related-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.related-card{
  border:2px solid #00bcd4;
  padding:10px;
}

.related-card:hover{
  background:#00bcd4;
  color:#fff;
}

.related-title{
  font-size:1rem;
}

/* ===============================
   PAGER
=============================== */

.pager-wrap{
  margin:50px 0;
  display:flex;
  justify-content:center;
}

/* list */
.pager{
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
  justify-content:center;
}

/* item */
.pager li{
  border:3px solid #00bcd4;
  background:#fff;
  min-width:40px;
  text-align:center;
  font-size:0.9rem;
}

/* link */
.pager a{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  color:#222;
}

/* hover */
.pager a:hover{
  background:#00bcd4;
  color:#fff;
}

/* current */
.pager li[class*="current"],
.pager li[class*="active"]{
  background:#00bcd4;
  color:#fff;
  border-color:#00bcd4;
}

.pager li[class*="current"] span,
.pager li[class*="active"] span{
  display:block;
  padding:8px 12px;
}

/* prev / next */
.pager-prev a,
.pager-next a{
  font-family:"Press Start 2P";
  font-size:0.65rem;
  padding:10px 14px;
  border:3px solid #4caf50;
  color:#4caf50;
}

.pager-prev a:hover,
.pager-next a:hover{
  background:#4caf50;
  color:#fff;
}

/* dots */
.pager-dots{
  border:none;
  background:none;
  padding:8px 4px;
  color:#888;
}

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

@media(max-width:768px){
  .pager{
    gap:6px;
  }
  .pager li{
    min-width:32px;
  }
  .pager a,
  .pager span{
    padding:6px 8px;
    font-size:0.8rem;
  }
}





.navbar {
  background-color: #000;
  border-bottom: 2px solid #0f0;
}

.navbar .nav-link {
  color: #0ff;
  transition: all 0.2s;
}

.navbar .nav-link:hover {
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}

.btn {
  background: none;
  border: 2px solid #0f0;
  color: #0f0;
  font-family: 'Press Start 2P', monospace;
  transition: all 0.2s;
}

.btn:hover {
  background-color: #0f0;
  color: #111;
  box-shadow: 0 0 5px #0f0;
}

.card {
  background-color: #000;
  border: 2px solid #0ff;
  color: #0ff;
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px #0ff;
}

.game-card img {
  object-fit: cover;
  height: 180px;
}

footer {
  background-color: #000;
  color: #0ff;
  border-top: 2px solid #0f0;
}

input, select {
  background-color: #111;
  color: #0ff;
  border: 2px solid #0ff;
  font-family: 'Press Start 2P', monospace;
}

input:focus, select:focus {
  outline: none;
  border-color: #0f0;
  box-shadow: 0 0 5px #0f0;
}

@keyframes flash {
  0%, 100% { background-color: #fff; }
  50% { background-color: #ffff99; }
}

.highlight-row td {
  animation: flash 0.8s ease-in-out 5;
}

.highlight-done td {
  background-color: yellow !important;
}

.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 900px; /* 高さを900pxに設定 */
}