body * div {
  /*border: 1px solid red;*/
}

#asset-screen {
  /**/
  position: absolute;
  z-index: 2;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*border-radius: 10px;/*角丸*/
  background: linear-gradient(to bottom, rgba(55, 48, 52, 0.9), rgba(75, 60, 68, 0.5));
  width: 100%;
  height: 100%;
  box-shadow: 6px 6px 10px 0px rgba(51, 48, 48, 0.5);
}


#asset-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;

  border-radius: 12px;

  margin-top: 0px;
  padding: 0px 0px 0px 0px ;

  width: 100%;
  height: 98%;
  /*max-height: 380px; /* ← これはOK */
}
/************************************************/
/* MAIN-HEAD */
#asset-head{
  display: flex;
  flex-direction: row;
  height: 10%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(61, 45, 107, 0.9), rgba(75, 60, 68, 0.5));
}
/* MAIN-HEAD：ハンバーガーボタン  */
#asset-menu{
  height: 100%;
  width: 5%;
  /*padding: 10px;*/
  margin: 0px 10px 0px 10px;
  background: linear-gradient(to bottom, rgba(182, 178, 202, 0.9), rgba(75, 60, 68, 0.5));
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2vw;
  border-radius: 5px;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
/* MAIN-HEAD：タイトル  */
#asset-title{
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: left; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  height: 100%;
  width: 30%;

  font-size: 2vw;
  text-shadow: rgb(88, 4, 53) 1px 0 10px;
}
/* MAIN-HEAD：アセット名 */
#asset-useName{
  display: flex;
  width: 20%;
  margin-right: 20px;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/

  font-size: 1.5vw;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  margin: 2px 2px 2px 2px;
  background: linear-gradient(to bottom, rgba(114, 109, 193, 0.9), rgba(35, 76, 197, 0.9));
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);
}
/* MAIN-HEAD：詳細情報 */
#asset-info{
  display: flex;
  width: 40%;
  margin-right: 20px;
  justify-content: right; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/

  font-size: 1.5vw;
  text-shadow: 2px 6px 3px rgba(0, 0, 0, 0.9);
  text-shadow: rgb(169, 40, 126) 1px 0 10px;
}
/* MAIN-HEAD：閉じるボタン */
#asset-close{
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  width: 5vw;
  margin-right: 3px;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgb(12, 3, 45);
  background: linear-gradient(to bottom, rgba(39, 7, 109, 0.9), rgba(7, 0, 11, 0.5));
}
/************************************************/
/* MAIN-BODY */
#asset-body{
  /*
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  */
  display: grid;
  grid-auto-flow: column;                 /* 左→右に自動配置 */
  grid-template-rows: repeat(2, auto);    /* 2段固定 */
  overflow-x: auto;                       /* 横スクロール有効 */
  gap: 5px;
  grid-auto-columns: 33%;               /* 各アイテムの横幅 */
  margin-top: 0px;
  /*grid-auto-rows: 100px;               /* 各アイテムの横幅 */
  overflow-y: hidden;       /* ← Y方向は禁止 */
  -webkit-overflow-scrolling: touch; /* ← iOS用慣性スクロール */
  touch-action: pan-x;      /* ← 横だけスワイプ可に */

}
/* MAIN-BODY: アセットカード */
.asset-card-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 200px;             /* 幅がないとスクロールできない */
  height: 100%;
  z-index: 3;
  background: #222;
  border-radius: 10px;
  color: white;
  overflow: hidden;
  font-family: sans-serif;
  box-shadow: 0 4px 8px rgba(202, 67, 67, 0.2);
}
/* MAIN-BODY: アセットカード:画像 */
.asset-card-entry img.thumb {
  width: 90%;
  height: 53%;
  object-fit: contain;
  text-align: center;
  align-items: center;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.button-group button {
  min-width: 5vw;
  font-size: 0.9rem;
}

/* MAIN-BODY: アセットカード:タイトル */
.asset-card-entry h3 {
  font-size: 1.5vw;
  margin-top: 0.4vw;
  margin-bottom: 0.5vw;
}
/* MAIN-BODY: アセットカード:タグ */
/*.asset-card-entry p {
  font-size: 0.8vw;
  color: #666;
  margin: 0 0 0.5rem;
}*/
/* MAIN-BODY: アセットカード:ボタン */
.asset-card-entry .btn-load {
  background: #1200b3;
  color: white;
  border: none;
  padding: 0.2vw 1rem;
  margin-right: 5px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  font-size: 1.2vw;
}
.asset-card-entry .btn-load:hover {
  background: #5b4fc6;
}
.asset-card-entry .btn-del{
  background: #d31c1c;
  color: white;
  border: none;
  padding: 0.2vw 1rem;
  margin-right: 5px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  font-size: 1.2vw;
}
.asset-card-entry .btn-del:hover {
  background: #cd4747;
}
.asset-card-entry .btn-Info{
  background: #6a14ba;
  color: white;
  border: none;
  padding: 0.2vw 1rem;
  margin-right: 5px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  font-size: 1.2vw;
}
.asset-card-entry .btn-Info:hover {
  background: #6a14ba;
}
.asset-card-entry .btn-view{
  background: #00aa00;
  color: white;
  border: none;
  padding: 0.2vw 1rem;
  border-radius: 5px;
  margin-bottom: 0.75vw;
  cursor: pointer;
  font-size: 1.2vw;
}
.asset-card-entry .btn-view:hover {
  background: #6bcf6b;
}


/*********************************************/
/* ナビゲーションドロワー*/
.asset-drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: 36vw;
  height: 100%;
  background: #222;
  color: white;
  transform: translateX(-120%);
  transition: transform 0.3s ease;
  z-index: 1000;
  text-align: center;
  background: #3498db;
  background: linear-gradient(to bottom, rgba(54, 119, 184, 0.9), rgba(49, 155, 200, 0.3));
}
.asset-drawer.open {
  transform: translateX(0);
}

#asset-drawer-head {
  display: flex;
  flex-direction: row;
  /*background: #3498db;*/
  background: linear-gradient(to bottom, rgba(0, 67, 134, 0.9), rgba(160, 213, 236, 0.5));
  box-shadow: 0px 2px 2px 0px rgba(47, 0, 255, 0.5), inset 0px -3px 6px -2px
}
#asset-drawer-title {
  font-family: 'Orbitron', sans-serif;
  display: flex;
  width: 80%;
  margin-left: 6%;
  margin-top: 2%;
  margin-bottom: 2%;
  font-size: 2.5vw;
  justify-content: center; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
#asset-drawer-btn {
  display: flex;
  width: 20%;
  margin-right: 2%;
  justify-content: right; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
.asset-drawer-close-btn{
  font-size: 1.9vw;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/


  border-radius: 5px;
  box-shadow: 2px 2px 4px rgb(213, 212, 216);
  background: linear-gradient(to bottom, rgba(251, 253, 254, 0.9), rgba(194, 197, 201, 0.5));
}
/*********** MENUリスト ****************/
#asset-drawer-list{
  display:grid;
  grid-auto-flow:row;
  grid-template-rows: repeat(3, auto);
  gap: 0vw;
  text-align: left;
  margin-top: 0.5vw;
  /*margin-left: 1.5vw;*/
}
#asset-drawer-list > div {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(220,220,255,0.1));
  padding: 0.1vw 5.1vw;
  margin: 2px 0;
  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  color: rgb(250, 250, 250);
  transition: background 0.2s ease, transform 0.2s ease;
  text-shadow:
    1px 1px 2px black,
    0 0 1em rgb(49, 49, 204),
    0 0 0.2em rgb(232, 232, 242);
}
#asset-drawer-list > div:hover {
  background: rgba(180, 200, 255, 0.9);
  transform: translateX(2px);

}

/*アセット読込（Zip）*/
#asset-drawer-list-read{

}
/* アセット（スタンプ）*/
#asset-drawer-list-stamp{

}
/* アセット（アバター） */
#asset-drawer-list-avatar{

}
/* データベースリセット */
#asset-drawer-list-rest{

}
/* 設定 */
#asset-drawer-list-setting{

}
/* アセット一覧 */
#asset-drawer-list-assetlist{

}
/* サウンドテスト */
#asset-drawer-list-soundtest{

}
/* データベース管理 */
#asset-drawer-list-database{

}
/* バージョン情報 */
#asset-drawer-list-version{

}







/*********************************************/
/* カード閲覧 */
#view-screen{
  position: absolute;
  display: flex;
  z-index: 3;
  gap: 0.5rem;
  /*border-radius: 12px;*/
  margin-top: 0px;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to bottom, rgba(190, 96, 149, 0.9), rgba(227, 151, 191, 0.5));*/
  /*border-radius: 50px;*/
  /*margin: 20px auto;*/
  /*padding: 20px;*/
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(194, 168, 204, .5) 50%, transparent 50%),
                    linear-gradient(rgba(194, 168, 204, .5) 50%, transparent 50%);
  background-size: 40px 40px;
  /*
  background-color: #fff;
  background: repeating-linear-gradient( -45deg, #eaf7f8, #eaf3f8 5px, #fff 5px, #fff 13px );
  */

  background-color: #c2a8cc;
  background-image:
    linear-gradient(45deg,
      rgba(233, 219, 239, 1) 25%, rgba(233, 219, 239, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(-135deg,
      rgba(233, 219, 239, 1) 25%, rgba(233, 219, 239, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(-135deg,
      rgba(194, 168, 204, 1) 25%, rgba(194, 168, 204, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(45deg,
      rgba(194, 168, 204, 1) 25%, rgba(194, 168, 204, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(45deg,
      rgba(233, 219, 239, 1) 0%,
      rgba(233, 219, 239, 1) 6%, transparent 6%,
      transparent 11%, rgba(233, 219, 239, 1) 11%,
      rgba(233, 219, 239, 1) 17%, transparent 17%,
      transparent 22%, rgba(233, 219, 239, 1) 22%,
      rgba(233, 219, 239, 1) 28%, transparent 28%,
      transparent 33%, rgba(233, 219, 239, 1) 33%,
      rgba(233, 219, 239, 1) 39%, transparent 39%,
      transparent 44%, rgba(233, 219, 239, 1) 44%,
      rgba(233, 219, 239, 1) 50%, transparent 50%,
      transparent 55%, rgba(233, 219, 239, 1) 55%,
      rgba(233, 219, 239, 1) 61%, transparent 61%,
      transparent 66%, rgba(233, 219, 239, 1) 66%,
      rgba(233, 219, 239, 1) 72%, transparent 72%,
      transparent 77%, rgba(233, 219, 239, 1) 77%,
      rgba(233, 219, 239, 1) 83%, transparent 83%,
      transparent 88%, rgba(233, 219, 239, 1) 88%,
      rgba(233, 219, 239, 1) 94%, transparent 94%,
      transparent 100%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0;

}
#view-screen img{
  border-radius: 12px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
/* ボタン */
#view-screen-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #222;
  color: #fff;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999; /* 最前面に */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease;
}

#view-screen-close:hover {
  background: #ff4444;
}