/* v2.07  2026:06:26:18:53  style.css */
/* 宙碁 UI：路長（base_span）を基準としたレイアウト設計 */

/* 基礎路長（1路の長さ） */
:root {
  --base_span: 47px;   /* 1路の長さ（整数化） */
}

/* 自動縮小対応 */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.scale-wrapper {
  transform-origin: top left;
}

/* 全体レイアウト：横1800×縦1080 */
.layout {
  display: flex;
  width: 1800px;
  height: 1080px;   /* ←絶対必要 */
}

/* 左：23×31 の宇宙窓 */
.left-square {
  width: calc(31 * var(--base_span));   /* 1457px */
  height: 1080px;   /* ← 23S をやめて layout に合わせる v2.04 */
/* height: calc(23 * var(--base_span));  1081px v2.04　で変更 */
  position: relative;
  background: #8140ac;  /* テスト色 */
}

.left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右：4段構造（Row1〜Row4） */
.right-block {
  width: calc(1800px - 31 * var(--base_span));  /* 残り幅 */
  height: 1080px;
  display: flex;
  flex-direction: column;
}

/* Row1：6行（6路） */
.row1 {
  height: calc(6 * var(--base_span));   /* 282px */
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ccc;
  background: #4060ac;
}

/* Row1 左ロゴ（2倍化） */
.row1-left {
  width: calc(10 * var(--base_span));   /* 470px 10路幅 */
   height: calc(6 * var(--base_span));  /* 282px  6路高 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.row1-left img {
  width: 100% ;
  height: auto;
  }

/* Row1 右側（6行） */
.row1-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #29c5bd;
}

/* 各行（1路＝47px） */
.r1-line {
  height: var(--base_span);
  display: flex;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  background: #ced848;
}

/* reserved 行（テスト中は表示） */
.reserved_01,
.reserved_02 {
  background: #0951f8;
}

/* 行ごとの調整 */
.r1-language label {
  margin-right: 4px;
}

.r1-visitors .r1-label {
  margin-right: 4px;
  font-weight: bold;
}

.r1-association a {
  text-decoration: none;
}

.r1-help button {
  padding-left: 12px;
  padding-right: 12px;
}

/* Row2：コマンド簡易説明（Help の短縮版） */
.row2 {
height: calc(2 * var(--base_span));   /* 94px */
  
  /* 【修正ポイント】 */
  /* padding-leftではなく、margin-leftでロゴ幅分右にズラす */
  margin-left: calc(10 * var(--base_span)); 
  
  /* これが重要：幅を「右側ブロックの残り幅」に正しく制限する */
  width: calc(1800px - 31 * var(--base_span) - 10 * var(--base_span)); 
  
  /* 左右の文字位置を上の段（.r1-line）の padding: 0 8px; と一致させる */
  padding-left: 8px;   
  padding-right: 8px;  /* はみ出しの原因だった20pxを廃止 */
  
  background: #c51111;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.3;

  /*height: calc(2 * var(--base_span));   /* 94px */ */
  /*dding-left: calc(10 * var(--base_span));  /* ロゴ幅470pxに揃える */ */
  /*adding-right: 20px;*/
  /*ackground: #f7f3d6; */
  /*ox-sizing: border-box; */
  /*verflow: hidden; */
  /*ont-size: 18px; */
  /*ine-height: 1.3; */
}

.row3 {
  height: 500px;   /* コマンド領域として主役にする v2.05 で修正 */
  border-bottom: 1px solid #2bd1b5;
}

.row4 {
    height: 300px;
    border-bottom: 1px solid #582686; /* v2.04で修正 */
}