@charset "utf-8";

/* =========================================
   ベーススタイル
========================================= */
body {
  font-family: "MS UI Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: url("images/bg.gif");
  margin: 0;
  padding: 0;
  color: #999;
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  color: #aaaaaa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* =========================================
   レイアウト汎用クラス
========================================= */
.main-container {
  width: 980px;
  margin: 0 auto;
  padding: 0 10px; /* スマホ時の余白確保も兼ねる */
  box-sizing: border-box;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* 水平線 */
hr {
  border: 0;
  border-top: 1px solid #444; /* デフォルトの立体感を消し背景に馴染ませる */
  margin: 20px 0;
}

/* =========================================
   文字色・フォントサイズ
========================================= */
.color-red { color: #CC0000; }
.color-green { color: #009933; }
.color-spec-green { color: #339933; } /* spec.html用の明るい緑 */
.color-brightgreen { color: #00CC00; }
.color-gray { color: #999999; }
.color-lightgray { color: #C0C0C0; }
.color-silver { color: #CCCCCC; }
.color-active-silver { color: #DBDBDB; }

.small-text { font-size: 0.85rem; line-height: 1.5; }
.font-small { font-size: 0.85rem; }
.font-tiny { font-size: 0.85rem; }
.index-tiny { font-size: 0.75rem; }

/* 引用句 (index) */
.quote-text {
  margin: 20px 0;
  font-size: 0.85rem;
  color: #CC0000;
}

/* =========================================
   ページ遷移リンク
========================================= */
.nav-links {
  margin: 30px 0 10px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
}
.nav-links a {
  color: #CC0000;
  text-decoration: none;
  margin: 0 15px;
}
.nav-links a:hover {
  text-decoration: underline;
}

/* =========================================
   セクション別レイアウト (Flexbox)
========================================= */
/* ヘッダー周り (index) */
.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
.flex-header-left, .flex-header-right {
  width: 20%;
}
.flex-header-center {
  flex: 1;
  text-align: center;
}

/* 2カラムレイアウト (index, review共通) */
.two-col-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-top: 15px;
  margin-bottom: 30px;
}
.col-half {
  width: 50%;
}
.col-left-flex {
  flex: 1;
}
.col-right-fixed {
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ネストされた2カラム (indexの下部) */
.nested-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.nested-left { width: 56%; }
.nested-right { width: 44%; text-align: center; }

/* =========================================
   年表テーブル (review)
========================================= */
.genealogy-table {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
}
.genealogy-table td {
  background-color: #808080;
  padding: 3px 8px;
  white-space: nowrap;
}
.genealogy-header { height: 40px; text-align: center; }
.col-period { text-align: center; }
.col-name   { text-align: left; }
.col-model  { text-align: center; }

.note-105 {
  font-size: 0.75rem;
  color: #999999;
  margin-top: 8px;
  margin-bottom: 25px;
  text-align: right;
  line-height: 1.4;
}

/* =========================================
   スペック表 (spec)
========================================= */
.spec-flex-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 825px;
  margin: 0 auto;
  gap: 20px;
}
.spec-table-container { flex: 1; }
.spec-image-side { width: 240px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #339933;
  line-height: 1.2;
}
.spec-table th, .spec-table td {
  padding: 2px 4px;
  text-align: left;
  border-bottom: 1px solid rgba(51, 153, 51, 0.1);
}
.spec-table th { font-weight: bold; padding-bottom: 5px; }

/* =========================================
   スマホ向けレスポンシブ調整
========================================= */
@media (max-width: 768px) {
  .main-container { width: 100% !important; }
  
  .flex-header { flex-direction: column; gap: 15px; }
  .flex-header-left { display: none; } /* スマホ時は左の空要素を消す */
  .flex-header-right { width: 100%; text-align: center; }
  
  .two-col-layout, .nested-flex, .spec-flex-wrapper {
    flex-direction: column;
    width: 100% !important;
    gap: 20px;
  }
  
  .col-half, .col-left-flex, .col-right-fixed, .nested-left, .nested-right, .spec-image-side {
    width: 100% !important;
    text-align: center !important;
    align-items: center;
  }
  
  .col-half.text-right { text-align: center !important; }
  .col-half img { margin-bottom: 10px; }
  .note-105 { text-align: left; margin-bottom: 20px; }
  
  .genealogy-table { width: 100% !important; }
  .genealogy-table td { white-space: normal; }

  .spec-image-side { order: 2; margin-top: 20px; }
  .spec-table thead { display: none; }
  .spec-table tr {
    display: block;
    margin-bottom: 10px;
    border-bottom: 1.5px solid #339933;
    padding-bottom: 5px;
  }
  .spec-table td {
    display: block;
    width: 100% !important;
    padding: 1px 0;
    border: none;
  }
  .spec-table td:first-child {
    font-weight: bold;
    background-color: rgba(51, 153, 51, 0.1);
    padding: 3px 5px;
    margin-bottom: 2px;
  }
  .spec-table td:nth-child(2):before { content: "初期型："; font-weight: bold; }
  .spec-table td:nth-child(3):before { content: "中後期："; font-weight: bold; }
}