/* メインスライド */
#slider { position:relative; width: 100%; height: 460px;  overflow: visible; margin-bottom: 1.5em; }
#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 .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 .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%;  bottom: 0; left: 0; opacity: 0; }
.main_slide li.main_slide04 .photo_area01 {  left: 0; }
.main_slide li.main_slide04 .photo_area02 {  left: auto; right: 0; }
.main_slide li.main_slide04 .photo_area01,
.main_slide li.main_slide04 .photo_area02{ height: 120%; translate: 0 10%; }
.main_slide li.main_slide04 .photo_area01 img,
.main_slide li.main_slide04 .photo_area02 img{ height: 100%; object-fit: contain; }
.main_slide li.main_slide04 .photo_area01 img { object-position: left center; }
.main_slide li.main_slide04 .photo_area02 img { object-position: right center; }
.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: 513px; top: 18%; left: 48%; }
.main_slide li.main_slide01 .text02{ width: 759px; top: 40%; left: 48%;}
.main_slide li.main_slide02 .text01{ width: 634px; top: 11%; left: 52%; }
.main_slide li.main_slide02 .text02{ width: 685px; top: 29.1%; left: 47%; }
.main_slide li.main_slide02 .text03{ width: 477px; top: 46%; left: 60%; }
.main_slide li.main_slide03 .text01{ width: 686px; top: 11.5%; left: 45%; }
.main_slide li.main_slide03 .text02{ width: 613px; top: 29.3%; left: 50%; }
.main_slide li.main_slide03 .text03{ width: 810px; top: 46.2%; left: 52%; }
.main_slide li.main_slide04 .text01{ width: 673px; top: 11.9%; left: 50%; }
.main_slide li.main_slide04 .text02{ width: 598px; top: 29.1%; left: 54%; }
.main_slide li.main_slide04 .text03{ width: 810px; top: 45.8%; left: 50%; }
.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 .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: 44%; }
.main_slide li.main_slide01 .text02{ width: 65%; }
.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_slide03 .text01{ width: 58.8%; }
.main_slide li.main_slide03 .text02{ width: 52.5%; }
.main_slide li.main_slide03 .text03{ width: 69.4%; }
.main_slide li.main_slide04 .text01{ width: 57.7%; }
.main_slide li.main_slide04 .text02{ width: 51.2%; }
.main_slide li.main_slide04 .text03{ width: 69.4%; }
  
.main_slide li .catch_area01{ width: 31%; }
.main_slide li .catch_area02{ width: 45.5%; }
  
#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_slide01 .text01{ top: 28%; }
  .main_slide li.main_slide01 .text02{ top: 43%; }
  .main_slide li.main_slide02 .text01{ top: 19%; }
  .main_slide li.main_slide02 .text02{ top: 32%; }
  .main_slide li.main_slide02 .text03{ top: 43%; }
  .main_slide li.main_slide03 .text01{ top: 22%; }
  .main_slide li.main_slide03 .text02{ top: 35%; }
  .main_slide li.main_slide03 .text03{ top: 47%; }
  .main_slide li.main_slide04 .text01{ top: 20%; }
  .main_slide li.main_slide04 .text02{ top: 33%; }
  .main_slide li.main_slide04 .text03{ top: 45%; }
}