/*このCSSに背景枠/インフォメーションボタン&戻るボタン/パンくずリストが書かれている*/

  /*背景枠(前面に固定する全機能ほぼ共通のもの)*/
  .square_top {/*上の帯*/
   position: fixed;
   top: 0;
   left: 0;
   margin: 0;
   width: 100%;
   height: 40px;/*7%*/
   background: var(--main-color);
   text-align:center;
   z-index: var(--frame-index);
  }
  .square_bottom {/*下の帯*/
   position: fixed;
   bottom: 0;
   left: 0;
   margin: 0;
   width: 100%;
   height: 40px;
   background: var(--main-color);
   text-align:center;
   z-index: var(--frame-index);
  }
  .square_left {/*左の帯*/
   position: fixed;
   top: 0;
   left: 0;
   margin: 0;
   width: 20px;
   height: 100%;
   background: var(--main-color);
   text-align:center;
   z-index: var(--frame-index);
  }
  .square_right {/*右の帯*/
   position: fixed;
   top: 0;
   right: 0;
   margin: 0;
   width: 20px;
   height: 100%;
   background: var(--main-color);
   text-align:center;
   z-index: var(--frame-index);
  }
  .circle_top {/*上部の丸*/
   position: fixed;
   top: -60px;
   right: 0px;
   left: 0px;
   margin: auto;
   width: 130px;
   height: 130px;
   background: var(--main-color);
   border-radius: 170px;
   z-index: var(--frame-index);
  }
  .move_category_icon_top {/*上部のカテゴリ移動用アイコン*/
   position: fixed;
   top: 0px;
   right: 0px;
   left: 0px;
   margin: auto;
   height: 70px;
   z-index: var(--frame-icon-index);
   clip: rect(0px,70px,59px,0px);
  }
  .circle_top_judge_position{/*大カテゴリ(上部の丸)判定位置*/
   position: fixed;
   top: -46px;
   right: 130px;
   left: 0px;
   margin: auto;
   width: 0px;
   height: 0px;
   z-index: var(--frame-judge-index);
  }
  /*大カテゴリのフキダシ判定用ボックス*/
  .circle_judge{
   top: 0px;
   left: 0px;
   margin: 0;
   height: 100px;
   width: 130px;
   border-radius: 170px;
   z-index: var(--frame-judge-index);

   line-height: auto;
   text-align: center;
   box-shadow: none;
   border: none;
   cursor: pointer;
   outline: none;
   background-repeat: no-repeat;
   display:inline-block;
  }
  .move_category_icon_left_position{/*左側に表示される小さなカテゴリバー*/
    position: fixed;
    top: -15px;
    right: 0px;
    left: -610px;
    margin: auto;
    width: 500px;
    z-index: var(--frame-index);
    text-align:right;
   }

   .move_category_icon_right_position{/*右側に表示される小さなカテゴリバー*/
    position: fixed;
    top: -15px;
    right: -610px;
    left:0px;
    margin: auto;
    width: 500px;
    z-index: var(--frame-index);
    text-align: left;
   }

  .move_category_icon_small{/*カテゴリバーの小アイコン*/
   top: 0px;
   left: 0px;
   margin: 0;
   max-width: 40px;
   width: calc(40vw / 10);
   max-height: 40px;
   z-index: var(--frame-icon-index);

   line-height: auto;
   text-align: center;
   box-shadow: none;

   border: none;
   /*cursor: pointer;*/
   outline: none;

   background-color: rgba(0, 0, 0, 0);
   background-repeat: no-repeat;

   display:inline-block;
  }
  .copyright{
    position: fixed;
    bottom: -10px;
    left: 45%;
    right: 55%;
    margin: auto;
    width: 150px;
    z-index: var(--frame-index);
    text-align:center;

  }
  /*ここまで枠*/


  /*ここからインフォメーションアイコンと戻るアイコン*/
  .Information_icon_position {/*インフォメーションアイコン位置*/
   position: fixed;
   top: 45px;
   right: 50px;
   height: 30px;
   width: 30px;
   z-index: var(--frame-index);
  }

  .Information_icon {/*インフォメーションアイコン*/
   position: absolute;
   height: 30px;
   z-index: var(--frame-index);

   line-height: auto;
   text-align: center;
   box-shadow: none;

   border: none;
   cursor: pointer;
   outline: none;

   display:inline-block;
  }

  .circle_return {/*戻るボタンの丸*/
   position: fixed;
   bottom: -60px;
   right: -40px;
   margin: auto;
   width: 130px;
   height: 130px;
   background: var(--gray-color);
   border-radius: 170px;
   z-index: var(--frame-index);

   line-height: auto;
   text-align: center;
   box-shadow: none;
   border: none;
   cursor: pointer;
   outline: none;
   display:inline-block;
  }

  .arrow_return {/*戻るボタンの矢印*/
   position: absolute;
   top: 6px;
   right: 70px;
   bottom: 93px;
   height: 20px;
  }
  /*ここまでインフォメーションアイコンと戻るアイコン*/


  /*ここからパンくずリスト*/
  .breadcrumb_position{/*パンくずリストの位置設定*/
    position: fixed;
    top: 40px;
    left: 50px;
    margin: 0;
    width: 270px;
    height: 60px;
    z-index: var(--frame-index);
  }
  .breadcrumb_icon/*パンくずアイコン*/
  {
    top: 0px;
    left: 0px;
    margin: 0;
    width: 40px;
    height: 40px;
    z-index: var(--frame-index);

    line-height: auto;
    text-align: center;
    box-shadow: none;

    border: none;
    cursor: pointer;
    outline: none;

    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;

    display:inline-block;

    fill: var(--main-color-50);
  }
  .breadcrumb_arrow{/*パンくずリストの矢印*/
    position: absolute;
    top: 50%;
    left: 75px;
    transform: translateY(-50%);
    margin-bottom: 5px;
    width: 25px;
    height: 25px;
    z-index: var(--frame-index);

    fill: rgba(111, 111, 111, 0.5);
  }
  /*ここまでパンくずリスト*/

  /*スクロールのフェードアウト*/
    .fadeout_top {/*上部のフェードアウト*/
     position: fixed;
     top: 0;
     left: 0;
     margin: 0;
     width: 100%;
     height: 120px;
     background: rgba(255, 255, 255, 1);
     filter: blur(10px);
     text-align:center;
     z-index: var(--fadeout-index);
    }
    .fadeout_bottom {/*上部のフェードアウト*/
     position: fixed;
     bottom: 0;
     left: 0;
     margin: 0;
     width: 100%;
     height: 90px;
     background: rgba(0, 100, 255, 1);
     filter: blur(10px);
     text-align:center;
     z-index: var(--fadeout-index);
    }

    .help_icon {/*ヘルプアイコン位置*/
     position: fixed;
     top: 8px;
     right: 25px;
     height: 25px;
     width: 25px;
     z-index: var(--frame-icon-index);

     box-shadow: none;
     border: none;
     cursor: pointer;
     outline: none;
    }