/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*body {
  background-color: gray;
  color: black;
  font-family: Helvetica;
}
center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
*/

    /* { margin: 0; padding: 0; box-sizing: border-box; }*/

    body {
      background-color: #0a0a12;
      background-attachment: fixed;
      background-image: url("pso_bk.jpg");
      background-repeat: repeat;
      background-size: 496px 28px;
      color: #cccccc;
      font-family: 'Meiryo', 'Meiryo UI', sans-serif;
      font-size: 13px;
      min-height: 100vh;
    }

    #OuterWrap { width: 900px; margin: 0 auto; }

    #MainImageOther {
      width: 900px; height: 250px;
      line-height: 0; overflow: hidden; background: #000;
    }
    #MainImageOther img { width: 900px; height: 250px; display: block; }
    #Navi {
      width: 900px; height: 28px;
      line-height: 0; font-size: 0;
      background: #000; display: flex;
    }
    #Navi a { display: inline-block; flex: 1; line-height: 0; }
    #Navi a img { width: 100%; height: 28px; display: block; border: none; }
    #Navi a.css-tab {
      display: flex; align-items: center; justify-content: center;
      height: 28px; background: #0d1520;
      border-right: 1px solid #1a2a3a;
      color: #8899aa; font-size: 11px;
      font-family: 'Meiryo', 'Meiryo UI', sans-serif;
      text-decoration: none; letter-spacing: 1px;
      transition: background 0.1s, color 0.1s;
    }
    #Navi a.css-tab:last-child { border-right: none; }
    #Navi a.css-tab:hover { background: #152030; color: #ffaa44; }
    #Navi active { background: #1a2a3a; color: #ff9933; border-bottom: 2px solid #cc5500; }


    #MainContent { width: 900px; display: block; }
    #RightContent { width: 900px; background: #07090f; }
    #RightContent, .RightContTitleBG, .RightContMain { transition: background 0.15s; }

    .RightContTitleBG {
      width: 100%;
      line-height: 0; background: #000;
    }
    .RightContTitleBG img { height: 28px; display: block; border: none; }
    .RightContTitleBG .css-cont-title {
      height: 28px;
      background: linear-gradient(90deg, #1a0a00 0%, #2a1400 40%, #0d0d18 100%);
      border-left: 3px solid #cc6600;
      display: flex; align-items: center; padding: 0 12px;
      font-size: 11px; color: #ff9933;
      letter-spacing: 3px; text-transform: uppercase;
      font-family: 'Meiryo', 'Meiryo UI', sans-serif;
    }
    .title-gradient-line {
      height: 2px;
      background: linear-gradient(90deg, #cc6600 0%, #2a1400 40%, #0d0d18 100%);
    }
    .RightContMain { padding: 10px 12px; }
    .page-desc {
      padding: 8px 12px 10px;
      font-size: 11px;
      color: #667788;
      font-style: italic;
      border-bottom: 1px solid #1a2232;
      background: #07090f;
    }


    .news {
      margin-bottom: 0;
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(90deg, #1a0a00 0%, #110800 60%, #0a0810 100%);
      border-left: 3px solid #cc6600;
      border-bottom: 1px solid #2a1400;
      padding: 5px 10px 5px 10px;
      /*margin-left: -12px;
      margin-right: -12px;*/
    }
    .news-icon { width: 15px; height: 16px; flex-shrink: 0; background: #cc6600; display: inline-block; }
    .news-icon img { width: 15px; height: 16px; display: block; border: none; }
    .post-title-text { color: #ff9933; font-size: 13px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
    .Date { color: #cc6600; font-size: 11px; padding-left: 10px; white-space: nowrap; flex-shrink: 0; }
    .post-header-img {
      margin-left: auto;
      flex-shrink: 0;
      height: 20px;
      width: auto;
      display: block;
    }
    .post-body {
      padding: 14px 15px 14px 15px;
      line-height: 1.85; font-size: 14px; color: #bbbbcc;
      border-bottom: none; margin-bottom: 0;
    }
    .post-body p { margin-bottom: 7px; }
    .post-body p:last-child { margin-bottom: 0; }
    .post-body b { color: #ddeeff; }
    .post-body a { color: #ff9933; text-decoration: none; }
    .post-body a:hover { color: #ffcc66; text-decoration: underline; }
    .post-sep { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent 0%, #cc6600 20%, #334455 60%, transparent 100%); }


    .post-img { max-width: 100%; border: 1px solid #334455; display: block; margin: 8px 0; }
    .post-img--left   { float: left;  margin-right: 12px; max-width: 45%; }
    .post-img--right  { float: right; margin-left:  12px; max-width: 45%; }
    .post-img--center { margin: 10px auto; }
    .post-img-caption { font-size: 10px; color: #667788; text-align: center; font-style: italic; margin-top: -4px; margin-bottom: 8px; }
    .clearfix::after { content: ""; display: table; clear: both; }


    #site-header { text-align: center; padding: 16px 0 10px; font-size: 16px; }
    #site-title { font-size: 1.9em; font-weight: bold; color: #ddeeff; letter-spacing: 3px; font-family: 'Meiryo', 'Meiryo UI', sans-serif; }


    #site-footer {
      width: 900px; display: flex; flex-wrap: wrap; gap: 6px;
      justify-content: center; align-items: center;
      padding: 16px 0 24px; margin-top: 10px;
      border-top: 1px solid #1a2232;
    }
    #site-footer img { border: 1px solid #334455; image-rendering: auto; display: block; }
    .badge-slot {
      width: 129px; height: 31px; background: #06080f;
      border: 1px dashed #334455; font-size: 8px; color: #334455;
      text-align: center; line-height: 29px; font-family: 'Courier New', monospace;
    }


    .about-block {
      background: #07090f; border: 1px solid #334455;
      padding: 16px 18px; margin-bottom: 14px;
    }
    .about-block h2 {
      font-size: 12px; color: #ff9933; letter-spacing: 2px;
      text-transform: uppercase; border-bottom: 1px solid #331a00;
      padding-bottom: 6px; margin-bottom: 10px;
    }
    .about-block p { color: #bbbbcc; line-height: 1.85; margin-bottom: 7px; }
    .about-block p:last-child { margin-bottom: 0; }
    .about-block ul { list-style: none; padding: 0; }
    .about-block li { color: #bbbbcc; line-height: 1.85; padding-left: 14px; position: relative; }
    .about-block li::before { content: "▶"; color: #cc6600; font-size: 8px; position: absolute; left: 0; top: 4px; }


    .record-entry {
      background: #07090f; border: 1px solid #334455;
      border-left: 3px solid #cc6600;
      padding: 12px 14px; margin-bottom: 6px;
    }
    .record-entry .rec-title { font-size: 13px; color: #ddeeff; margin-bottom: 2px; }
    .record-entry .rec-meta { font-size: 10px; color: #cc6600; margin-bottom: 8px; }
    .record-sep { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent 0%, #cc6600 20%, #334455 60%, transparent 100%); }
    .record-entry .rec-body { color: #bbbbcc; line-height: 1.8; font-size: 12px; }