html {
    width: 100%;
    /*  height: 100%;100%に指定して置かないと子要素でheightが％指定できなくなる */
    height: 100%;
}
body {
    /* bodyには初期marginがあるので0に background-color:#ec9ff8;*/
    margin:0;
    padding:0;
    width: 100%;
    /*  100%に指定して置かないと子要素でheightが％指定できなくなる background-clip:padding-box;*/
    height: 100%;
    min-height: 100%;
    background-image:url("/static/charaten/img/bg_main.png");
    background-size:100% 100%;
    position: absolute;
}
div {
    /* ユーザー エージェント スタイルシートで初期値がblockで指定されているためflexに 
    display: flex;*/
}
h1{
    margin:0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding:0; 
}
#search_box{
    display: flex;
    position: fixed;
    z-index: 11;
    top: 14vh;
    width: 25vw;
}
#clear_btn{    
    display: flex;
    position: fixed;
    z-index: 11;
    left:27vw;
    top: 14vh;
}
#img_popup{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.div_container{
    height: auto;
    position: relative;
    min-height: 70vh;
    bottom: 0;
    margin-top: 15vh;
    padding-bottom: 15vh;
}

.div_header{
    position: fixed;
    display: block;
    width: 100%;
    height: 13vh;  
    left:0px;
    top:0;
    background-image:url("/static/charaten/img/bg_header.png");
    background-size:100% 100%;
    z-index: 10;

}
.div_footer{
    width: 100%;
    height: 13vh;
    position: absolute;
    bottom: 0;

    background-image:url("/static/charaten/img/bg_footer.png");
    background-size:100% 100%;
    z-index: 10;
}
.div_category_img{
    display: flex;
    position: relative;
    width: 100%;   
    height: 100%; 
    justify-content: left;
}
.div_user_name{
  display: flex;
  position: relative;
  justify-content: flex-end;
  width: 100%; 
  height: 100%;
  top: 5%;
  left:30%
}
.div_icon_box{
    display: flex;
    position: absolute;
    justify-content: flex-end;
    width: 100%; 
    height: 100%; 
}
.img_banner{
    aspect-ratio: 1 / 1;
    height:50%;
    padding: 2%;  
    margin-right: 3%;
    z-index: 11;

}
.h1_title{
    position: relative;
    font-size: 120%;
    display: flex;
    width: auto;
    margin-top: 2%;
    margin-left: 2%;
    height: max-content;
}

.img_index_gacha{
    position: relative;
    width: 50%;
    height: 100%;
}
.img_index_item{
    position: relative;
    width: 50%;
    height: 100%;
}
.div_category{
    width: 100%;
    height: max-content;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: right;
    top: 55%;
    left: -12%;
    position: relative;
}
.a_category{
    margin-top: 2%;
    margin-right: 2%;
    margin-left: 2%;

    z-index: 12;
}
.a_counter_area{
    display: flex;
    position: absolute;
    width: 99%;
    top: 70%;
    left:1%
}
.a_rule{
  display: flex;
  position: fixed;
  z-index: 11;
  top: 18vh;
  right: 1vw;
  background-color: #fff0f0;
  border-radius: 2px;
}

.a_charatomo{
  position: relative;
  z-index: 1;
  left: 2vw;
  background-color: #fff0f0;
  border-radius: 2px;
}


.img_counter{
    width: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    align-content: flex-start;
    top: 20%;
    position: relative;
    left: 50%;
}
.span_tag{
    color: blue;
}

.div_link_img{
    width: 100%; 
    position: absolute;
    display: inline-flex;
    justify-content: flex-end;
    top: 30%;
    left: -7%;
}

.img_gacha{
    position: relative;
    width: 24%;
    height: 24%;
    border: 1px;
    padding: 1px;
    margin: 1px;
    float:left;
    z-index: 11;
}
.shop_test{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /*left:0;*/
    top:0px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    float:left;
    z-index: 11;
}
.div_news_area{
    position: relative;
    background-color: #ceecf4;
    width: 100%;
    height: 20%;
}

.text_item{
    position: relative;
    font-size: 100%;
    /* background-color: #ceecf4; */
    width: 100%;
    height: 100%;
}
.text_price{
  z-index: 1;
}
.img_item{
    position: relative;
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    /* height: 100%; */
}

.div_v_main_box{
  position: fixed;
  display: block;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items:  flex-start;
  align-content: flex-start;
  width: 100%;
  height: 100vmin;
  aspect-ratio: 1 / 1;
 /* padding-top: 8vh; */
  background-color: #000000;
  z-index: 1;
}

.img_v_omise{
  position: relative;
  /*   width: 100%; */
  height: 100%;
  aspect-ratio: 1 / 1;

  z-index: 2;
}

.div_flex_box{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items:  flex-start;
    align-content: flex-start;
    height: 100%;
    position: relative;
    padding-top: 2vh; 
}
.div_sam_box{
  position: relative; 
}
.select_vip{
  display: flex;
  position: fixed;
  z-index: 11;
  top: 14vh;
  left: 42vw;
  background-color: #fff0f0;
  border-radius: 2px;
}

.div_none{
    display: none;
    background:red;
}
.div_cart_cell{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items:  flex-start;
  align-content: flex-start;
  position: relative;
  width: 30%;
  height: 27%;
  border: 0px;
  padding: 0px;
  margin: 5px;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
}

.scrollbox {
    display: flex;
    overflow-x: scroll;
  }
.totalbox {
    background-color: rgb(212, 229, 238);
    height: 100%;
    width: 100%;
    display: flex;
    overflow-x: scroll;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: start;
  }

  @media screen and (min-width: 481px){/*　横長　*/ 
    .img_box {
      height: 80%;
      left: 0px;
    }
    .item_box {
      aspect-ratio: 1 / 1;
      background-color: rgb(248, 248, 248);
      height: 100%;
      width: 100%;
      min-width: 40%;
      border:groove 3px #e0e0e0;
      padding: 0%;
      border-radius: 5px;
      line-height: 110%;
      font-weight: 400;
      font-size:68%;
      /*font-family: "Arial Black","Arial",sans-serif;*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
      left: 0px;
      position: relative;
    }
    .div_flex_cell{
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: flex-start;
      align-items:  flex-start;
      align-content: flex-start;
      position: relative;
      width: 20%;
      height: 40%;
      border: 0px;
      padding: 0px;
      margin: 5px;
    }
    .popup {/*ポップアップするコンテンツ。予め全画面表示、positionで位置調整し、非表示にし、回転もさせておく*/
      display: flex;
      position: fixed;
      width: 100vh;
      height: 100vh;
      aspect-ratio: 1 / 1;
      background-color: rgba(159, 253, 255, 0.49);
      z-index: 32;
      visibility: hidden;
      opacity: 0;
      transition: .64s ease-in-out;
      border-radius: 10px;
    }
  }
  @media screen and (max-width: 480px){/*　縦長　*/
    .img_box {
        height: 80%;
        left: 0px;
      }
    .item_box {
        aspect-ratio: 1 / 1;
        background-color: rgb(248, 248, 248);
        height: 100%;
        width: 100%;
        min-width: 40%;
        border:groove 3px #e0e0e0;
      padding: 0%;
      border-radius: 5px;
      line-height: 110%;
      font-weight: 400;
      font-size:70%;
      /*font-family: "Arial Black","Arial",sans-serif;*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
      left: 0px;
      position: relative;
    }
    .div_flex_cell{
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: flex-start;
      align-items:  flex-start;
      align-content: flex-start;
      position: relative;
      width: 45%;
      height: 40%;
      border: 0px;
      padding: 0px;
      margin: 5px;
    }
    .popup {/*ポップアップするコンテンツ。予め全画面表示、positionで位置調整し、非表示にし、回転もさせておく*/
      display: flex;
      position: fixed;
      width: 100vw;
      height: 100vw;
      aspect-ratio: 1 / 1;
      background-color: rgba(159, 253, 255, 0.49);
      z-index: 32;
      visibility: hidden;
      opacity: 0;
      transition: .64s ease-in-out;
      top: 28vh;
      border-radius: 10px;
    }
  }

  .sitename {
    padding: 0.3px;
    background-color: rgb(112, 195, 250);
    border:groove 3px #899cda;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    text-shadow:0px 0px 1px #000000;
    font-weight: 900;
    font-size: 90%;
    font-family: "Arial Black","Arial",sans-serif;
  }

  .container {/*全体*/
    background-color: #9191E9;
    display: flex;
    align-items: center;
   justify-content: center;
    width: 50vw;
    height: 50vh;
  }
   
  .button {/*ボタンのスタイル*/
    text-decoration: none;
    font-size: .875rem;
    font-weight: 300;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 1.5rem;
    background-color: #fff;
    color: #9191E9;
    padding: 1rem 2rem;
  }
   

  .popup:target {/*ボタンがクリックされたら表示しつつ、回転させ元の位置に戻す*/
    position: fixed;
    visibility: visible;
    opacity: 1;
    transform: translateY(-100px);
    z-index: 33;
  }
   
  .popup-inner {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 33;
  }

  .popup__close {/*閉じるボタンのスタイル。クリックする事で:targetが外れ、非表示に戻る*/
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    font-size: .875rem;
    font-weight: 300;
    border-radius: 100%;
    background-color: #0A0A0A;
    z-index: 34;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
  }
  .popup__photo {
    position: fixed;
    margin: 3vw;
    aspect-ratio: 1 / 1;
    z-index: 33;
  }
  .popup__text {
    position: fixed;
    margin: 3%;
    width: 94%;
    height: 50%;
    color: #fff;
    z-index: 34;
  }