/* ***************************************************

****************************************************** */
.responsive {}

.slider {
  display: none;
  /* 最初は非表示に */
}

.slider.slick-initialized {
  display: block;
  /* slickが実行完了したら表示 */
  margin-bottom: 15px !important;
  padding: 0 0 60px 0;
}

.wrapper {
  height: calc(100vh - 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #225baf;
  min-height: 330px;
}

@media print,
screen and (min-width:768px) {
  .wrapper {
    height: calc(100vh - 210px);
  }

  .slider.slick-initialized {
    padding: 0 0 40px 0;
  }

  .slide div {
    height: calc(100vh - 330px);
  }
}

.inner {
  width: 100%;
  margin: -30px 0 0 0;
}

.slick-list {
  position: relative;
  overflow: initial !important;
}

.slide {
  /*position: relative;*/
}

.slide div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 370px);
  min-height: 230px;
  color: #3498db;
  font-size: 36px;
  font-weight: bold;
  border-radius: 20px;
}

.slide div h2 {
  position: absolute;
  font-weight: 700;
  font-size: clamp(2.2rem, -0.500rem + 3.8vw, 4.5rem);
  text-align: left;
  color: #fff;
  text-shadow: 0 0 7px #808080;
}

.sl_01 h2,
.sl_02 h2 {
  top: 20px;
  left: 20px;
}

.slide figure {}


.slider .sl_01 figure img,
.slider .sl_02 figure img {
  position: absolute;
  bottom: -40px;
  left: 3%;
  z-index: 9997;
  width: 100%;
  height: auto;
  max-width: 240px;
}

.slide .sl_03 figure img, .slide .sl_04 figure img {
  position: absolute;
  bottom: -40px;
  right: 3%;
  z-index: 9997;
  width: 100%;
  height: auto;
  max-width: 245px;
}

.sl_03 h2, .sl_04 h2 {
  top: 20px;
  right: 20px;
}

@media print,
screen and (min-width:768px) {

  .sl_01 h2,
  .sl_02 h2 {
    top: 15%;
    left: 5%;
  }

  .sl_03 h2, .sl_04 h2 {
    top: 15%;
    right: 5%;
  }

  .slider .sl_01 figure img,
  .slider .sl_02 figure img,
  .slide .sl_03 figure img {
    position: absolute;
    bottom: -40px;
    left: 3%;
    z-index: 9997;
    width: 100%;
    height: auto;
    max-width: 250px;
  }
.slide .sl_04 figure img{
    position: absolute;
    bottom: -40px;
    right: 3%;
    z-index: 9997;
    width: 100%;
    height: auto;
    max-width: 260px;
  }
}

@media print,
screen and (min-width:768px) {
  .slider .sl_01 figure img,
  .slider .sl_02 figure img,
  .slide .sl_03 figure img {
    position: absolute;
    bottom: -40px;
    left: 3%;
    z-index: 9997;
    width: 100%;
    height: auto;
    max-width: 230px;
  }
}

@media print,
screen and (min-width:1200px) {

  .slider .sl_01 figure img,
  .slider .sl_02 figure img,
  .slide .sl_03 figure img, .slide .sl_04 figure img {

    max-width: 300px;
  }

  
}

.sl_01 {
  background: url(../img/index_img/slid_01.jpg) center right 34% no-repeat;
  background-size: cover;
  
}

.sl_02 {
  background: url(../img/index_img/slid_02.jpg) center right 37% no-repeat;
  background-size: cover;
  
}

.sl_03 {
  background: url(../img/index_img/slid_03.jpg) center right 26% no-repeat;
  background-size: cover;
 
}
.sl_04 {
  background: url(../img/index_img/slid_04.jpg) center center no-repeat;
  background-size: cover;
 
}
@media print,
screen and (min-width:768px) {
  .sl_03 {
  background: url(../img/index_img/slid_03.jpg) center right no-repeat;
  background-size: cover;
}
.sl_04 {
url(../img/index_img/slid_04.jpg) center right 20% aliceblue no-repeat
}
}
@media print,
screen and (min-width:1200px) {
  .sl_03 {
	background: url(../img/index_img/slid_03.jpg) 50% left center no-repeat;
}
}

.slide span {}

.slick-slide {
  margin: 0 10px;
}

/* arrow */
.slick-arrow {
  display: block !important;
  z-index: 1000;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border-top: 3px solid #3498db;
  border-right: 3px solid #3498db;
  opacity: .8;
}

.slick-arrow::before {
  content: '';
  display: block !important;
}

.slick-prev,
.slick-next {
  width: calc(100% - 830px);
}

.slick-prev {
  display: block !important;
  z-index: 9999;
  left: 30px !important;
  transform: rotate(-135deg);
}

.slick-next {
  display: block !important;
  z-index: 9999;
  right: 30px !important;
  transform: rotate(45deg);

}

.slick-prev::before,
.slick-next::before {
  /*color: #000 !important;*/
  position: absolute;
  z-index: 10000;
  font-size: 30px !important;
}

/* dots */
.slick-dots {
  bottom: -25px;
}

.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
  width: 12px;
  height: 12px;
}

.slick-dots li {
  margin: 0 7px;
}

.slick-dots li button {
  background-color: #fff;
  opacity: .8;
  border-radius: 100%;
}

.slick-dots li.slick-active button {
  opacity: .4;
}

.slick-dots li button::before {
  content: '';
}

.slick-dots li button::before {
  font-family: 'slick';
  font-size: 15px !important;
}

/*============================================================
greetings
=============================================================*/
#greetings p {
  margin: 0 0 30px 0;
}

@media print,
screen and (min-width:768px) {}

/*============================================================
home_delivery_products
=============================================================*/
#home_delivery_products>div p {
  margin: 0 0 30px 0;
}

@media print,
screen and (min-width:768px) {}

/*============================================================
home_delivery_system
=============================================================*/
#home_delivery_system {}

@media print,
screen and (min-width:768px) {}

/*============================================================
company_info
=============================================================*/
#company_info {}

@media print,
screen and (min-width:768px) {}