@charset "UTF-8";

  model-viewer {
      width: 100%;
      height: 100%;
      background-color: unset;
      display: block;
      margin: 0 auto;
  }
  #model-viewer-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0;
      z-index: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  /* デフォルトのARボタンを非表示 */
  model-viewer::part(default-ar-button) {
    display: none;
  }
  
  /* デバイス別表示制御 */
  .ar .pc-only {
      display: block;
  }
  .ar .sp-only {
      display: none;
  }

  .ar {
      z-index: 20;
  }

  /* 添加 input 样式 */

  #mypage_avatardata_title {
      z-index: 20;
  }

  #mypage_avatardata_title input {
      width: 100%;
      box-sizing: border-box;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      position: relative;
  }

  /* 编辑模式样式 */
  .edit-mode {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .edit-mode input {
      flex: 1;
  }

  .edit-mode button {
      padding: 5px 10px;
      background-color: #e9a751;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
  }

  .edit-mode button:hover {
      background-color: #e9a751;
  }
  
  @media screen and (max-width: 767px) {
      .ar .pc-only {
          display: none;
      }
      .ar .sp-only {
          display: block;
      }

      #model-viewer-container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          /* padding-top: 35%; */
          display: flex;
          justify-content: center;
          align-items: center;
      }
  }