@charset "UTF-8";
/* コンテンツ */
#topimg {
	position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    transition: all 0.3s;
    margin:120px auto 0;
    padding: 0;
}

.swiper-container1 {
	position:relative;
	z-index: 1;
	width: 100%;
    height: 100%;
    overflow: hidden;
}
.swiper-container1 .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.swiper-container1 .swiper-slide span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}
@keyframes sl_zoom_ani {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);

  }
}



.sd1 span {
    background-image: url("../slide/01_pc.webp");
	background-size: contain;
}
.sd2 span {
    background-image: url("../slide/02_pc.webp");
	background-size: contain;
}
.sd3 span {
    background-image: url("../slide/03_pc.webp");
	background-size: contain;
}
.sd4 span {
    background-image: url("../slide/04_pc.webp");
	background-size: contain;
}

/* VOICEスライド */

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}

.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.slider a{position: relative;color: #ffffff;text-align: left;}
.slider a p{position: absolute;bottom:0;left:0;margin-bottom: 1em;}
	.slider a p span{background-color: #546568;padding: 0.2em 0.4em;display: inline-block;margin-bottom: 0.4em;}
.arrow_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 50px 0 0;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 30px;
    height: 30px;
    background: #ffffff;
	border: solid 2px #666666;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 10px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 2px solid #666666;
    border-top: 2px solid #666666;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}

/* 参考事例スライド */

#wrapper02 {
	flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 0%;
  overflow: hidden;
}

.content_area{
  max-width: 100%;
  padding: 0px;
  margin: 0 auto;
}

.slick-list{
  overflow: visible;
}

.slick-item p {
  font-size: 16px;
  text-align: left;
  margin: 0;
  padding:0%;
  position: relative;
}

.slick-prev, .slick-next{
  z-index:100;
}
.slick-prev:before, .slick-next:before{
  color:#75E1D6;
}

.arrow_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 20px;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 2px solid #595757;
    border-top: 2px solid #595757;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}
@media screen and (max-width:640px){
  .content_area{
    padding: 0 0px;
  }
  .slick-item p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0px;
    padding: 0%;
  }
.arrow_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0 20px;
    position: relative;
}
.prev-arrow,
.next-arrow {
    display: block;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}
.prev-arrow {
    transform: rotate(180deg);
    margin-right: 5px;
}
	}






/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width: 1000px) {
#topimg {
	position: relative;
    width: 100%;
	height: auto;
    aspect-ratio: 21.2 / 15.0;
    overflow: hidden;
    transition: all 0.3s;
    margin:0 auto 0;
    padding: 0;
}


}

/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width: 640px) {
#topimg {
    min-width: auto;
    aspect-ratio: 16.6/ 18.2;
    margin:100px auto 0em;
    padding: 0px 0px 0;
}
.sd1 span {
    background-image: url("../slide/01_sp.webp");
}
.sd2 span {
    background-image: url("../slide/02_sp.webp");
}
.sd3 span {
    background-image: url("../slide/03_sp.webp");
}
.sd4 span {
    background-image: url("../slide/04_sp.webp");
}

}