/* カスタムプロパティ（CSS変数） */
:root {
  --head-color: #e0e0e0;

  --primary-color: #e0e0e0;
  /* プライマリカラー */
  --text-color: white;
  /* テキストカラー */
  --border-color: #b2b2b2;
  /* 枠線カラー */
  --button-padding: 6px;
  /* ボタンの内側の余白 */
  --font-size: 13px;
  --font-size2: 15px;
  --font-size3: 20px;
  /* フォントサイズ */
  --gap-large: 20px;
  /* 大きな間隔 */
  --gap-small: 15px;
  /* 小さな間隔 */
  --border-width: 3px;
  /* 枠線の太さ */
  --button-width: 110px;
  /* ボタンの幅 */
  --button-height: 45px;
  /* ボタンの高さ */
  --horizontal-button-width: 50px;
  /* 横ボタンの幅 */
  --horizontal-button-height: 40px;
  /* 横ボタンの高さ */
  --distance-width: 90px;
  /* 進む距離の幅 */
  --distance-height: 30px;
  /* 進む距離の高さ */
}

body {
  font-family: Arial, sans-serif;
  /* フォントファミリー */
  margin: 0;
  /* デフォルトのマージンをリセット */
  padding: 0;
  /* デフォルトのパディングをリセット */
  font-size: var(--font-size);
  /* フォントサイズを変数から指定 */
  line-height: 1.5;
  /* 行の高さ */
  background-color: #e0e0e0;
}

header {
  background-color: var(--head-color);
  /* ヘッダーの背景色 */
  color: #000;
  /* テキストカラー */

  padding: 1em;
  /* ヘッダーの内側の余白 */
  display: flex;
  /* フレックスボックスの使用 */
  justify-content: space-between;
  /* 子要素を左右に配置 */
  align-items: center;
  /* 子要素を上下中央揃え */
  height: 60px;
  /* ヘッダーの高さ */
}

.header-text {
  text-align: left;
  /* テキストを左揃え */
  font-size: 40px;
  /* テキストのフォントサイズを変数から指定 */
}

.header-buttons {
  display: flex;
  /* ボタンを横並びに表示 */
  gap: 15px;
  /* ボタン間の間隔 */
}

.header-button {
  border-radius: 5px;
  /* 角を少し丸くする */
  width: 200px;
  /* ボタンの幅 */
  height: 100%;
  /* ヘッダーの高さに合わせる */
  padding: 0;
  /* 内側の余白をなしに */
  background: #fff;
  /* ボタンの背景色 */
  border: 1px solid #ddd;
  /* ボタンの枠線 */
  box-sizing: border-box;
  /* ボックスサイズの計算を枠線込みに設定 */
  display: flex;
  /* フレックスボックスを使用 */
  align-items: center;
  /* アイテムを上下中央揃え */
  justify-content: center;
  /* アイテムを中央に配置 */
}

.button-content {
  display: flex;
  /* 画像とテキストを横並びに表示 */
  align-items: center;
  /* 上下中央揃え */
  justify-content: start;
  /* アイテムを左揃え */
  gap: 10px;
  /* 画像とテキスト間の間隔 */
}

.button-content img {
  width: 50px;
  /* 画像の幅*/
  height: auto;
  /* アスペクト比を保持したまま高さを自動調整 */
  object-fit: contain;
  /* 画像がボタン内に収まるように調整 */
}

.button-content span {
  font-size: 1.1em;
  /* テキストのフォントサイズ */
  color: #000;
  /* テキストカラー */
  display: flex;
  /* 縦方向に並べる */
  flex-direction: column;
  text-align: left;
  /* テキストを左揃え */
  line-height: 0.7;
  /* 行間の調整 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.header-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

.header-small-button {
  border-radius: 5px;
  /* ボタンの角を少し丸くする */
  width: 90px;
  /* ボタンの幅を指定 */
  height: 100%;
  /* ボタンの高さを指定 */
  padding: 0;
  /* パディングをリセット */
  background:#fff;
  /* 背景色を設定 */
  border: 1px solid #ddd;
  /* ボーダーの色とスタイルを指定 */
  box-sizing: border-box;
  /* ボックスモデルの設定 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  /* Flexboxを使用 */
  align-items: center;
  /* 縦中央に配置 */
  justify-content: center;
  /* 横中央に配置 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.header-small-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}
/*canvas--------------------------------------------------------------------------------------------*/
canvas {
  width: 85%;
  /* 幅をウィンドウの85%に設定 */
  aspect-ratio: 1300 / 650;
  box-sizing: border-box;
  height: auto;
  /* アスペクト比を保持しつつ高さを自動調整 */
}

.content-wrapper {
  /* position: relative; */
  display: flex;
  height: calc(100vh - 120px);
  width: 100vw;
  margin: 30px 0 30px 0;
}

.button-wrapper {
  padding: var(--gap-large);
  /* 内側の余白 */
  display: flex;
  /* フレックスボックスを使用 */
  flex-direction: column;
  /* 縦に並べる */
  align-items: flex-start;
  /* 左揃え */
  gap: var(--gap-small);
  /* ボタン間のスペース */
  width: 13%;
  min-width: 200px;
  /* 右から13%の幅に変更 */
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0 1% 0 1%;
  background-color: #fff;
  align-items: stretch;
  /* ボタンを親要素の幅に合わせて伸ばす */
}

/*mode------------------------------------------------------------------------------------------------*/
.mode-button {
  border-radius: 5px;
  /* 角を少し丸くする */
  width: 20vw;
  /* 画面幅の20% */
  height: 5vh;
  /* 画面高さの5% */
  max-width: 200px;
  /* 最大幅を200pxに制限 */
  max-height: 50px;
  /* 最大高さを50pxに制限 */
  padding: 0;
  background: #e0e0e0;
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  /* ホバー時にポインターを表示 */
}

.button-contents {
  display: flex;
  align-items: center;
  gap: 27px;
  padding: 5px;
}

.button-contents img {
  width: 50px;
  /* 画像の幅 */
  height: 50px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
}

.button-contents span {
  font-size: 1.7em;
  color: #000;
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.button-contents:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #818181ab;
  /* ホバー時のボーダー色 */
}

.buttonbtnOrigin-content {
  gap: 20px;
  /* ボタン間のスペース */
  border-radius: 5px;
  /* 角を少し丸くする */
  width: 200px;
  /* ボタンの幅 */
  height: auto;
  padding: 0;
  background: #e0e0e0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  /* ホバー時にポインターを表示 */
}

.buttonbtnOrigin-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
}

.buttonbtnOrigin-content img {
  width: 50px;
  /* 画像の幅 */
  height: 50px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
}

.buttonbtnOrigin-content span {
  font-size: 1.7em;
  color: #000;
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.buttonbtnOrigin-content:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

/*-----------------------------------------------------------------------------------*/
.coordinate-label {
  text-align: left;
  /* テキストを左に配置 */
  font-size: var(--font-size3);
}

.coordinate-line {
  border: none;
  /* デフォルトのボーダーを無効にする */
  border-top: 2px solid #000;
  /* 上側にのみボーダーを引く（横線） */
  width: 100%;
  /* 横線の幅を100%に設定 */
}

.xyz-button-wrapper {
  display: flex;
  /* ボタンを横並びにする */
  gap: 20px;
  /* ボタン間のスペース */
}

.xyz-button {
  border-radius: 5px;
  /* ボタンの角を少し丸くする */
  width: 90px;
  /* ボタンの幅を指定 */
  height: 40px;
  /* ボタンの高さを指定 */
  padding: 0;
  /* パディングをリセット */
  background: #e0e0e0;
  /* 背景色を設定 */
  border: 1px solid #ddd;
  /* ボーダーの色とスタイルを指定 */
  box-sizing: border-box;
  /* ボックスモデルの設定 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  /* Flexboxを使用 */
  align-items: center;
  /* 縦中央に配置 */
  justify-content: center;
  /* 横中央に配置 */
  font-size: 3em;
  /* テキストのサイズを設定 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.xyz-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

#btn-x,
#btnx {
  color: #ff0546;
  /* テキストの色を設定 */
}

#btn-y,
#btny {
  color: #057cff;
  /* テキストの色を設定 */
}

#btn-z,
#btnz {
  color: #00c847;
  /* テキストの色を設定 */
}

.big-button {
  border-radius: 5px;
  /* 角を少し丸くする */
  width: 100%;
  /* ボタンの幅 */
  height: auto;
  padding: 0;
  background: #e0e0e0;
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 5px;
  font-size: 11px;
}

.big-button img {
  width: 30px;
  /* 画像の幅 */
  height: 30px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
  margin: auto;
}

.big-button span {
  font-size: 1.72em;
  color: #000;
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.big-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

/*small-------------------------------------------------------------------*/
.small-button-wrapper {
  display: flex;
  /* ボタンを横並びにする */
  gap: 20px;
  /* ボタン間のスペース */
}

.small-button {
  border-radius: 5px;
  /* ボタンの角を少し丸くする */
  width: 90px;
  /* ボタンの幅を指定 */
  height: 40px;
  /* ボタンの高さを指定 */
  padding: 0;
  /* パディングをリセット */
  background: #e0e0e0;
  /* 背景色を設定 */
  border: 1px solid #ddd;
  /* ボーダーの色とスタイルを指定 */
  box-sizing: border-box;
  /* ボックスモデルの設定 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  /* Flexboxを使用 */
  align-items: center;
  /* 縦中央に配置 */
  justify-content: center;
  /* 横中央に配置 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.small-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

.button-icon {
  width: 30px;
  /* 画像の幅 */
  height: 30px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
}

/*スライダー --------------------------------------------------------------------*/
.slider-wrapper {
  text-align: center;
  /* 全体のコンテンツを中央に */
}

.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* コンテナの中身を中央揃え */
}

.slider {
  width: 150px;
  /* スライダーの幅 */
  height: 10px;
  margin: 0 10px;
  /* ラベルとスライダーの間に余白を追加 */
}

.slider-label {
  font-size: 1.5em;
  color: #333;
  text-align: center;
}

.slder-wrapper {
  display: flex;
  justify-content: center;
  /* コンテンツを中央に配置 */
  align-items: center;
  /* 垂直方向の中央揃え */
  text-align: center;
  /* テキストを中央揃え */
}

.slider-value {
  font-size: 1.5em;
  color: #000000;

  text-align: center;
  /* テキストを中央揃え */
}

/*scale------------------------------------------------------------------------*/
.operationscale-buttons {
  display: flex;
  /* ボタンを横並びにする */
  gap: 20px;
  /* ボタン間のスペース */
}

.operationscale-button {
  border-radius: 5px;
  /* ボタンの角を少し丸くする */
  width: 90px;
  /* ボタンの幅を指定 */
  height: 40px;
  /* ボタンの高さを指定 */
  padding: 0;
  /* パディングをリセット */
  background: #e0e0e0;
  /* 背景色を設定 */
  border: 1px solid #ddd;
  /* ボーダーの色とスタイルを指定 */
  box-sizing: border-box;
  /* ボックスモデルの設定 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  /* Flexboxを使用 */
  align-items: center;
  /* 縦中央に配置 */
  justify-content: center;
  /* 横中央に配置 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.operationscale-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

.button-icon {
  width: 30px;
  /* 画像の幅 */
  height: 30px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
}

/*回転ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ボタンのスタイル */
.rotation-button {
  width: 200px;
  /* ボタンの幅 */
  height: 60px;
  /* ボタンの高さ */
  padding: 5px;
  margin-bottom: 15px;
  /* ボタンの下部の間隔 */
  background: #e0e0e0;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* 角を少し丸くする */
  display: flex;
  align-items: center;
  gap: 10px;
  /* 画像とテキストの間隔 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  box-sizing: border-box;
}

/* 画像のスタイル */
.rotation-button img {
  width: 40px;
  /* 画像の幅 */
  height: 40px;
  /* 画像の高さ */
  object-fit: contain;
  /* アスペクト比を保持しながらサイズを調整 */
}

/* テキストのスタイル */
.rotation-button span {
  font-size: 1.5em;
  color: #000;
}

/* ホバー時のスタイル */
.rotation-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

/*面ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.surface-button-wrapper {
  display: flex;
  /* ボタンを横並びにする */
  gap: 20px;
  /* ボタン間のスペース */
}

.surface-button {
  border-radius: 5px;
  /* ボタンの角を少し丸くする */
  width: 90px;
  /* ボタンの幅を指定 */
  height: 50px;
  /* ボタンの高さを指定 */
  padding: 0;
  /* パディングをリセット */
  background: #e0e0e0;
  /* 背景色を設定 */
  border: 1px solid #ddd;
  /* ボーダーの色とスタイルを指定 */
  box-sizing: border-box;
  /* ボックスモデルの設定 */
  cursor: pointer;
  /* ホバー時にポインターを表示 */
  display: flex;
  /* Flexboxを使用 */
  align-items: center;
  /* 縦中央に配置 */
  justify-content: center;
  /* 横中央に配置 */
  font-size: 1em;
  /* テキストのサイズを設定 */
}

/* ボタンにホバー時のスタイルを追加することも可能 */
.surface-button:hover {
  background: #818181ab;
  /* ホバー時の背景色 */
  border-color: #bbb;
  /* ホバー時のボーダー色 */
}

/* threejs-containerのスタイル --------------------------------------------------------------*/
#threejs-container {
  position: absolute;
  /* 絶対配置 */
  top: 0;
  /* 上端を固定 */
  left: 35%;
  /* 右端を固定 */
  width: 50%;
  /* canvasの幅の約50% */
  aspect-ratio: 1300 / 680;
  /* アスペクト比を設定 */
  max-height: 42.5%;
  /* ウィンドウの上半分に収まるように高さを制限 */
}

#threejs-container canvas {
  position: absolute;
  /* 絶対配置 */
  top: 90px;
  /* 上端を固定 */
  left: 0;
  /* 左端を固定 */
  width: 100%;
  /* 親要素にフィット */
  height: 100%;
  /* 親要素にフィット */
  object-fit: cover;
  /* アスペクト比が崩れないようにフィット */
}

#viewCubeContainer {
  position: fixed;
  top: 15%;
  right: 55%;
  width: 80px;
  height: 80px;
  perspective: 400px;
}

#viewCube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(-45deg);
  /*初期位置 */
  /* transition: transform 0.6s ease; スムーズな回転 */
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(217, 216, 216, 0.9);
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.front {
  transform: rotateY(0deg) translateZ(40px);
}
.back {
  transform: rotateY(180deg) translateZ(40px);
}
.left {
  transform: rotateY(-90deg) translateZ(40px);
}
.right {
  transform: rotateY(90deg) translateZ(40px);
}
.top {
  transform: rotateX(90deg) translateZ(40px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(40px);
}