/* メインスライド */
#slider { position:relative; width: 100%; height: 460px;  overflow: visible; margin-bottom: 1.5em; }
#slider img {
  vertical-align: bottom;
}
#slider .bx-wrapper{ height: 100%; }
#slider .bx-viewport{ height: 100% !important; }
#slider .main_slide{ height: 100%; }
.main_slide li { position:relative; width: 100vw !important; min-width: 1080px; height: 100%; overflow: hidden; }
.main_slide li img.slide_bg { width:100%; height: 100%; object-fit: cover; vertical-align: bottom; }
.main_slide li div{ position: absolute; }
.main_slide li div img{ width: 100%; }

.main_slide li.displayed_slide .photo_area,
.main_slide li.displayed_slide .photo_area01,
.main_slide li.displayed_slide .photo_area02,
.main_slide li.displayed_slide .img01,
.main_slide li.displayed_slide .catch_area,
.main_slide li.displayed_slide .button_area{ animation: slide_element_appear 0.5s ease-out forwards; }
.main_slide li.displayed_slide .text01 p,
.main_slide li.displayed_slide .text02 p, 
.main_slide li.displayed_slide .text03 p{ animation: slanting_move 0.25s ease-out forwards; }

.main_slide li.displayed_slide .photo_area,
.main_slide li.displayed_slide .photo_area01,
.main_slide li.displayed_slide .photo_area02{ animation-delay: 0s; }
.main_slide li.displayed_slide .text01 p{ animation-delay: 0.05s; }
.main_slide li.displayed_slide .text02 p{ animation-delay: 0.2s; }
.main_slide li.displayed_slide .text03 p{ animation-delay: 0.4s; }
.main_slide li.displayed_slide .img01{ animation-delay: 0.4s; }
.main_slide li.displayed_slide .img02{ animation-delay: 0.6s; }
.main_slide li.displayed_slide .catch_area{ animation-delay: 0.2s; }
.main_slide li.displayed_slide .button_area{ animation-delay: 0.3s; }

.main_slide li .photo_area,
.main_slide li .photo_area01,
.main_slide li .photo_area02{  width: 100%; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; }
.main_slide li.main_slide02 .photo_area img {
  object-fit: cover;
  height: 100%;
}
.main_slide li.main_slide04 .photo_area img {
  object-fit: contain;
  object-position: center bottom;
  height: 100%;
}
.main_slide li.displayed_slide .text01,
.main_slide li.displayed_slide .text02, 
.main_slide li.displayed_slide .text03 { translate: -50%; }
.main_slide li.main_slide01 .text01{ width: 825px; top: 8%; left: 48%; }
.main_slide li.main_slide01 .text02{ width: 796px; top: 46%; left: 45%;}
.main_slide li.main_slide01 .img01{ bottom: 0; left: 0; height: 100%;}
.main_slide li.main_slide01 .img02{ bottom: 0; right: 5%; height: 100%; text-align: right; }
.main_slide li.main_slide01 .img01 img,
.main_slide li.main_slide01 .img02 img { height: 100%; width: auto; display: inline-block;}
.main_slide li.main_slide02 .text01{ width: 626px; top: 5%; left: 5%; translate: 0%;}
.main_slide li.main_slide02 .img01{ width: 75% ;max-width: 807px; bottom: 5%; left: 12%;}
.main_slide li.main_slide02 .img02{ height: 100%; width: 40%; bottom: 0; right: 0;}
.main_slide li.main_slide02 .img02 img { height: 100%; width: 100%; object-fit: cover;
 object-position: left; }
.main_slide li.main_slide03 .text01{ width: 68%; max-width: 846px; top: 5%; left: 50%; }
.main_slide li.main_slide03 .text02{ width: 68%; max-width: 817px; top: 26%; left: 50%; }
.main_slide li.main_slide03 .img01{ width: 90% ;max-width: 802px; bottom: 8%; left: 50%; transform: translateX(-50%)}
.main_slide li.main_slide03 .img02{ bottom: 0; left: 0; height: 100%; }
.main_slide li.main_slide03 .img03{ bottom: 0; right: 0; height: 100%; }
.main_slide li.main_slide03 .img02 img,
.main_slide li.main_slide03 .img03 img { height: 100%; width: auto; }
.main_slide li.main_slide04 .text01{ width: 650px; top: 8%; left: 30%; }
.main_slide li .catch_area01{ width: 335px; top: 0; right: 0; }
.main_slide li .catch_area02{ width: 500px; bottom: 0; left: 0; }
.main_slide li .text01 p,
.main_slide li .text02 p,
.main_slide li .text03 p,
.main_slide li .img01,
.main_slide li .catch_area{ opacity: 0; }
.main_slide li .button_area{ font-size: 1.25rem; width: 280px; bottom: 40px; left: 50%; translate: -50%; opacity: 0; }
.main_slide li .button_area a{ display: block; background-color: #DB294F; font-weight: bold; color: #fff; line-height: 1; border-radius: 2.5em; text-align: center; padding: 1em; box-shadow: 1px 1px 2px rgba(0,0,0,0.4); position: relative;}
.main_slide li .button_area a:after{ content: ""; display: block; width: 0.64em; aspect-ratio: 1/1; position: absolute; inset: 50% 1.36em auto auto; translate: 0 -50%; background: linear-gradient(to bottom left, transparent 50% , #fff 50%) no-repeat top left / 100% 50%, linear-gradient(to top left,transparent 50%, #fff 50%) no-repeat bottom left/100% 50%;}
.main_slide li .button_area a:hover { opacity: 0.75; }
  
@keyframes slanting_move {
  from { translate: -120px 10px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes slanting_move_sp {
  from { translate: -60px 5px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes slide_element_appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

#slider .bx-wrapper { position: relative;width: 100%;line-height: 1;overflow: visible;}
#slider .bx-next, #slider .bx-prev { background: rgba(0,0,0,0.4);position: absolute;right: 0;top: 0;height: 100%;display: inline-block;font-size: 0;width: 50px;text-indent: -9999px;}
#slider .bx-next:after, #slider .bx-prev:after { content:"";position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px;border-style: solid;border-width: 14px 0 14px 14px;border-color: transparent transparent transparent #fff;}
#slider .bx-prev { right:auto; left: 0;}
#slider .bx-prev:after { border-width: 14px 14px 14px 0; border-color: transparent #fff transparent transparent; }

.bx-pager.bx-default-pager { position: absolute;bottom: -15px;left: 0; width: 100%;text-align: center;}
.bx-pager-item { display: inline-block; }
.bx-pager-item a { font-size: 0; text-indent: -9999px; width: 30px; height: 5px;background: #ccc;display: inline-block; margin: 0 3px;}
.bx-pager-item a.active { background: #000; }

@media screen and (max-width: 1000px){
  /* メインスライド */
  #slider { height: auto; aspect-ratio: 1367/546; }
  .main_slide li { min-width: initial; }
  .main_slide li .catch_area01{ width: 30%; }
  .main_slide li .catch_area02{ width: 40%; }
  .main_slide li .button_area { font-size: 1.95vw; width: 25%; bottom: 8.5% }

.main_slide li.main_slide01 .text01{ width: 70%; }
.main_slide li.main_slide01 .text02{ width: 67%; }
.main_slide li.main_slide01 .img02{ right: 0; }
.main_slide li.main_slide02 .text01{ width: 54.3%; }
.main_slide li.main_slide02 .text02{ width: 58.7%; }
.main_slide li.main_slide02 .text03{ width: 40.9%; }
.main_slide li.main_slide04 .text01{ width: 55%; left: 50%; }
  
#slider .bx-next, #slider .bx-prev { width: 30px; }
#slider .bx-next:after, #slider .bx-prev:after { margin:-4px 0 0 -4px;border-width: 8px 0 8px 8px;}
#slider .bx-prev:after { border-width: 8px 8px 8px 0;border-color: transparent #fff transparent transparent;}
.bx-pager.bx-default-pager { bottom: -10px; }
}
@media screen and (max-width: 480px){
  /* メインスライド */
  #slider { aspect-ratio: 376/223; }
  .main_slide li.displayed_slide .text01 p,
  .main_slide li.displayed_slide .text02 p, 
  .main_slide li.displayed_slide .text03 p{ animation-name: slanting_move_sp; }
  .main_slide li .button_area { font-size: 2.2vw; width: 30%; bottom: 13%; }
  .main_slide li.main_slide04 .photo_area img { object-position: 50% 70%; }
  
  .main_slide li.main_slide01 .text01{ top: 11%; }
  .main_slide li.main_slide01 .text02{ top: 36%; }
  .main_slide li.main_slide02 .img01{ width: 85%; bottom: 8%; left: 50%; transform: translateX(-50%); }
  .main_slide li.main_slide02 .text01{ width: 75%; top: 18px; }
  .main_slide li.main_slide02 .text02{ top: 32%; }
  .main_slide li.main_slide02 .text03{ top: 43%; }
  .main_slide li.main_slide03 .text01{ width:85%; top: 10.5%; }
  .main_slide li.main_slide03 .text02{ width:85%; top: 27%; }
  .main_slide li.main_slide03 .img01{ bottom: 17%; }
  .main_slide li.main_slide04 .text01{ width: 80% ;top: 10%; }
  .main_slide li.main_slide04 .img01{ bottom: 20%; }
}

/* おすすめ商品 */
section.pickup {
margin-bottom: 5em;
}

/* 新着情報 */
#news ul li {
  display: flex;
  gap: 5px 20px;
  text-align: left;
  border-bottom: 1px dotted #999;
  padding: 10px 0;
}

#news ul li .news_date {
  width: 10em;
}

#news ul li .news_tit {
  flex: 1;
}

#news ul li .news_tit a {
  display: block;
}

@media screen and (max-width: 768px){
  #news ul li {
    flex-wrap: wrap;
  }

  #news ul li .news_date {
    width: 100%;
  }

  #news ul li .news_tit {
    flex: none;
    width: 100%;
  }
}

/* 商品選択 */
#select h2 {
  background: none;
  color: #065FB2;
  font-size: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  gap: 15px;
}
#select h2 br {
  display: none;
}
#select h2::before {
  content: "";
  background: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/img_select01.png") no-repeat;
  background-size: contain;
  width: 104px;
  height: 138px;
}
#select h2 p {
  margin-bottom: 20px;
}

#select h2 small {
  font-size: 22px;
  color: #333;
  display: block;
  margin-bottom: 15px;
  font-weight: normal;
}

#select h2 small::before {
  content: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/h3_select01.png");
  display: inline-block;
  margin-right: 5px;
}

#select h2 small::after {
  content: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/h3_select02.png");
  display: inline-block;
  margin-left: 5px;
}

#select h2 small::before,
#select h2 small::after {
  transform: translateY(8px);
}

#select .selectBox {
  background: #F1F2F4;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 30px;
  gap: 60px 30px;
  color: #333;
  font-feature-settings: "palt";
}

#select .selectBox h3 {
  font-size: 30px;
  background: none;
  padding: 0;
  margin: 0 0 20px 0;
  color: inherit;
}

#select .selectBox h3.select_color::before {
  content: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/ico_select01.png");
  margin-right: 5px;
}

#select .selectBox h3.select_paint::before {
  content: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/ico_select02.png");
  margin-right: 5px;
}

#select .selectBox h3.select_place::before {
  content: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/ico_select03.png");
  margin-right: 5px;
}

#select .selectBox .selectBox_child:nth-child(-n+2) {
  width: calc((100% - 30px) / 2);
}
#select .selectBox .selectBox_child:last-child {
  width: 100%;
}

#select [class^="select0"] {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

#select .select04 {
  flex-direction: row;
  flex-wrap: wrap;
}

#select [class^="select0"] a {
  color: #FFF;
  padding: 16px 35px 16px 35px;
  display: block;
  border-radius: 10px;
  position: relative;
  font-size: 22px;
 }

#select [class^="select0"] a:hover {
  opacity: 0.7;
}

#select [class^="select0"] a::after {
  font: var(--fa-font-solid);
  content: "\f138";
  margin-left: 5px;
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#select .select01 a {
  background-color: #DC0400;
}

#select .select01 li:first-child a {
  background-image: url("https://file001.shop-pro.jp/PA01508/682/assets/img/home/img_select03.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 35px 20px 35px 80px;
}

#select .select01 li:nth-child(2) a::after {
  transform: translateY(-28px);
}

#select .select01 li:nth-child(2) a p {
  background: #FFF;
  padding: 9px 10px;
  border-radius: 10px;
}

#select .select02 a {
  background-color: #30A19B;
}

#select .select03 a {
  background: #FDB429;
}

#select .select04 a {
  background: #70BBD2;
  padding: 10px 35px 10px 10px;
  font-size: 18px;
}

.select03::before {
  content:"";
  background: #707070;
  margin: 25px 0 18px;
  display: block;
  width: 100%;
  height: 1px;
}

#select [class^="select0"] a small {
  display: block;
  line-height: 1.4;
  font-size: 14px;
  padding: 0 10px;
}

#select [class^="select0"] i {
  font-size: 30px;
  display: block;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px){
  #select .selectBox .selectBox_child:nth-child(-n+2) {
    width: 100%;
  }
  #select h2 {
    font-size: 26px;
  }
  #select h2 br {
    display: block;
  }
  #select h2 small {
    font-size: 3.5vw;
  }
  #select .selectBox {
    padding: 20px 15px;
    gap: 20px;
  }
  #select .selectBox h3 {
    margin: 0 0 10px 0;
  }
  #select [class^="select0"] a {
    padding: 16px 28px 16px 28px;
 }
  #select .select01 li:first-child a {
    padding: 35px 20px 35px 100px;
  }
  #select .select04 a {
    padding: 10px 28px 10px 10px;
  }
}