@charset "UTF-8";

.main img{
  vertical-align: top;
}
.main a{
  color: inherit;
}

/* 背景 */
.main .bg01{
  background-color: #413836;
}
.main .bg02{
  background-color: #867775;
}
.main .bg03{
  background-color: #f3f1f1;
  background-image: url(../img/kazari01.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.main .bg04{
  background-color: #f3f1f1;
  background-image: url(../img/kazari02.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}


/* 冒頭　*/
.main .head{
  position: relative; z-index: 0;
}
.main .head_price{
  position: absolute; z-index: 0; top: 0; left: 0; margin: 12% 0 0 46%;
}
.main .head_row{
  display: flex; align-items: center; justify-content: center; gap: 0 3%;
}
.main .head_item{
  width: min(calc(332/768*100vw),332px);
}

/* 共通 */
.main .ttl{
  display: flex; align-items: center; justify-content: center; gap: 0 0.6em;
  color: #867775; font-weight: bold; padding: 0 0 0.3em;
  border-style: solid; border-color: #867775; border-width: 0 0 1px;
}
.main .ttl_right{
  background-color: #fff; padding: 0 0.6em; border-radius: 0.4em;
  border-style: solid; border-color: #867775; border-width: 2px;
}


/* 香りで選ぶ */
.main [data-kaori]{
  cursor: pointer;
}
.main .kaori_ttl{
  color: #867775; font-weight: bold; text-align: center; padding: 0 0 0.2em;
  border-style: solid; border-color: #867775; border-width: 0 0 1px;
}
.main .kaori_list{
  display: grid; grid-template-columns: repeat(2, min(calc(343/768*100vw),343px)); gap: min(calc(10/768*100vw),10px) min(calc(8/768*100vw),8px);
  justify-content: center;
}
.main .kaori_item{
  position: relative; z-index: 0; cursor: pointer;
}
.main .kaori_item.kaori_selected::after{
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0;
  border-style: solid; border-color: #867775; border-width: 3px; border-radius: min(calc(10/768*100vw),10px);
}

/* カテゴリから選ぶ */
.main [data-cat]{
  cursor: pointer;
}
.main .cat_list{
  display: grid; grid-template-columns: repeat(4, min(calc(165/768*100vw),165px)); gap: min(calc(11/768*100vw),11px) min(calc(11/768*100vw),11px);
  justify-content: center;
}
.main .cat_item{
  position: relative; z-index: 0; cursor: pointer;
}
.main .cat_item.cat_selected::after{
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0;
  border-style: solid; border-color: #867775; border-width: 3px; border-radius: min(calc(10/768*100vw),10px);
}

/* 商品 */
.main .goods_list{
  display: grid; grid-template-columns: repeat(3, min(calc(223/768*100vw),223px)); gap: min(calc(20/768*100vw),20px) min(calc(13/768*100vw),13px);
  justify-content: center;
}
.main .goods_item{
  display: none;
  position: relative; z-index: 0; cursor: pointer;
}
.main .goods_item.kaori_selected,
.main .goods_item.cat_selected{
  display: block;
}


/* トップに戻る */
.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%);
}