/* 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;
  }

  body{
    font-size:1rem;
  }

}

/* 目次 */
.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;
}




.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に設定 */
}