/* 全体の背景色（枠の外側） */
body {
  font-family: sans-serif;  
  font-size: 16px; /* 例: PCでの基準フォントサイズ */
  background-color: #ebf3fc; /* 枠の外側＋ヘッダー/フッターと同じ色 */
  color: #333;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-wrap: break-word;   /* 長い単語を途中で改行させる (IEなど古いブラウザ向け) */
  overflow-wrap: break-word; /* 長い単語を途中で改行させる (推奨される新しいプロパティ) */
}

/* 中央の白い箱＋左右枠線 
    トップ用に細いもの*/
.narrowContainer {
  background-color: #fff; /* ← 白背景！ */
  max-width: 800px;
  margin: 2em auto;
  padding: 1.5em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* 中央の白い箱＋左右枠線 */
.container {
  background-color: #fff; /* ← 白背景！ */
  max-width: 1200px;
  margin: 2em auto;
  padding: 1.5em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.site-title{  
    font-size: 3em;
    font-weight: bold;
    color: #000000; /* 元の文字色 */
}

/* ヘッダーとフッター：bodyと同じ背景色で統一感を出す */
header, footer {
  background-color: #ebf3fc;
  color: #003366;
  padding: 1em 0;
  text-align: center; /* ← これで中央揃え */
}

/* リンク */
a {
  color: #007acc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin-top: 0;
}
h2 {
  margin-top: 0;
}

.product {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5em;
}

.product img {
  width: 120px;
  height: auto;
  margin-right: 1em;
}

.product-info {
  max-width: 600px;
}

.product-info a {
  font-size: 1.1em;
  text-decoration: none;
  color: #007acc;
}

.product-info a:hover {
  text-decoration: underline;
}

.product-info h3 {
  margin: 0;
  font-size: 1.2em;
  margin-top: -0.5em; /* 上部の隙間をなくす */
}

.product-info p {
  margin: 0; /* 上部のマージンをなくす */
}

.product-links {
  list-style: none;
  padding: 0;
  margin: 0.5em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.product-links li a {
  text-decoration: none;
  color: #007acc;
}

.product-links li a:hover {
  text-decoration: underline;
}


/* 画像や動画の右にテキストを表示するためのコンテナ */
.image-container {
  display: flex;
  align-items: flex-start; /* or center */
  gap: 20px;
  margin-top: 1em;
  margin-bottom: 1.5em;
}

.image-container iframe{
  max-width: 600px;    /* 横幅の最大値を制限 */
  flex-shrink: 0;
  display: block;
}

.image-container img {  
  max-width: 600px;    /* 横幅の最大値を制限 */
  height: auto;
  flex-shrink: 0;
  display: block;
}

.image-container .text {
  flex: 1;
  /* 長い文字列の強制改行 */
  word-break: break-all;     /* 単語の途中でも強制的に改行させる */
  overflow-wrap: break-word; /* 念のため（現代ブラウザ向け） */
  white-space: normal;       /* 改行禁止を解除 */
}

.paragraph {
  margin-top: 1em; /* 上に余白 */
}


/* 画像や動画の右にテキストを表示するための小さいコンテナ */
.image-container-small {
  display: flex;
  align-items: flex-start; /* or center */
  gap: 20px;
  margin-top: 1em;
  margin-bottom: 1.5em;
}

.image-container-small iframe{
  max-width: 300px;    /* 横幅の最大値を制限 */
  flex-shrink: 0;
  display: block;
}

.image-container-small img {  
  max-width: 300px;    /* 横幅の最大値を制限 */
  height: auto;
  flex-shrink: 0;
  display: block;
}

.image-container-small .text {
  flex: 1;
}

#toc {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1em;
  margin-bottom: 2em;
}

#toc ul {
  list-style: none;
  padding-left: 0;
}

#toc li {
  margin: 0.3em 0;
}

.strong {
  font-weight: bold;
  color: #d43f00; /* 赤系で視線を引く */
  background-color: #fff3cd; /* 薄い黄色背景で目立たせる */
  padding: 0 4px;
  border-radius: 3px;
}


/* UE変数の色
  スポイトで取得
  使用例
  Set the value of <span class="color-int">Count</span> to <span class="color-int">10</span>. 
*/
.color-bool       { color: #910000; } 
.color-Byte       { color: #016E64; } 
.color-int        { color: #23DEAA; } 
.color-int64      { color: #AAE2AD; } 
.color-float      { color: #9DFC44; } 
.color-name       { color: #C980FA; } 
.color-string     { color: #FD00D1; }
.color-text       { color: #E479A6; }
.color-vector     { color: #FBC626; } 
.color-rotator    { color: #9CAFFA; } 
.color-transform  { color: #FE7100; } 
.color-object     { color: #01A4EE; } 



@media (max-width: 767px) {
    body {
        font-size: 12px;
    }    
    .image-container img {  
      max-width: 380px;    /* 横幅の最大値を制限 */
      height: auto;
      flex-shrink: 0;
      display: block;
    }    
    .image-container img {  
      max-width: 380px;    /* 横幅の最大値を制限 */
      height: auto;
      flex-shrink: 0;
      display: block;
    }
  }
/* --- スマホ縦向き (480px以下) --- */
@media (max-width: 480px) {
    body {
        font-size: 8px; /* さらに小さめに (ただし読める範囲で) */
    }    
  .image-container img {  
    max-width: 240px;    /* 横幅の最大値を制限 */
    height: auto;
    flex-shrink: 0;
    display: block;
  }
    .image-container img {  
    max-width: 240px;    /* 横幅の最大値を制限 */
    height: auto;
    flex-shrink: 0;
    display: block;
  }
}