@charset "UTF-8";

.main .item_col{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2em;
  position: relative; z-index: 0;
}

.main .item_col::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1px; background-color: #b5b5b5; margin: 0 auto;
}

.main .item{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.main .item_row{
  display: flex; align-items: center; justify-content: space-between; margin: 1em 0 0;
}
.main .item_fig{
  display: flex; justify-content: center; align-items: flex-end;
}
.main .item_name{
  z-index: -1;
}
.main .item_link.ver01{ width: min(calc(184/768*100vw), 184px); margin-top: -40px;}
.main .item_link.ver02{ width: min(calc(237/768*100vw), 237px); }

.main .item_cart{
  margin: 1em 0 0;
}

.main .totop_wrap{
  display: flex; justify-content: flex-end; margin: 0 4% 0 0;
}
.main .totop{
  display: flex; align-items: center; gap: 0 0.3em;
  color: #C4007F; cursor: pointer;
  border-style: solid; border-color: #C4007F; border-width: 0 0 1px;
}
.main .totop::before{
  content: ""; width: 1em; height: 0.75em; background-color: #C4007F;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}


.main .selectColorWrap select {
  width: 100%; max-width: 100%;
}


/* タブ */
.main [data-pagearea]{
    display: none;
  }
.main [data-pagearea].selected{
display: block;
}
  
/* ナビ*/
.main .head_nav{
position: relative; z-index: 1;
}
.main .nav01,.main .nav02{
position: absolute; z-index: 1; bottom: 0;
opacity: 0; 
cursor: pointer; transition: opacity .2s;
}
.main .nav01{ width: calc(384/768*100%); left: 0; }
.main .nav02{ width: calc(392/768*100%); right: 0; }

.main .nav.selected{
opacity: 1; 
}