@charset "UTF-8";

.m-slide-detail {
position: relative;
}
.m-slide-detail_block {
position: relative;
}
@media (min-width: 769px) {
.m-slide-detail {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 40px;
}
.m-slide-detail_block p {
font-size: 1.6rem;
background-color: rgba(255, 255, 255, 0.702);
padding: 10px;
}
.m-slide-detail_counter {
top: auto !important;
}
.posCenter {
padding: 0 80px;
}
.m-slide-detail_thumb {
height: 370px;
overflow-y: auto;
overflow-x: hidden;
}
.m-mv-style_img {
max-width: 960px;
}
.m-slide-detail_list .slick-slide img {
height: 370px;
margin: 0 auto;
}
}
.m-slide-detail_thumb {
width: 12%;
}
.m-slide-detail_thumb p {
width: 100%;
position: relative;
margin-bottom: 5px;
}
.m-slide-detail_thumb p:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
box-sizing: border-box;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
backface-visibility: hidden;
}
.m-slide-detail_thumb p.active:before {
border: solid 3px #2d2d2d;
}
.m-slide-detail_list {
overflow: hidden;
width: 80%;
}
.m-slide-detail_list .slick-next, 
.m-slide-detail_list .slick-prev {
z-index: 2;
width: 30px;
height: 30px;
opacity: .8;
background: #efefef;
}
.m-slide-detail_list .slick-next {
right: -30px;
opacity: 0;
transition: all 0.3s ease;
}
.m-slide-detail_list .slick-prev {
left: -30px;
transition: all 0.3s ease;
}
.m-slide-detail_list .slick-next:before, 
.m-slide-detail_list .slick-prev:before {
content: "";
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border-top: 3px solid grey;
border-right: 3px solid grey;
}
.m-slide-detail_list .slick-next:before {
left: 5px;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.m-slide-detail_list .slick-prev:before {
left: 10px;
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.m-slide-detail_list:hover .slick-next {
right: 0;
opacity: 1;
}
.m-slide-detail_list:hover .slick-prev {
left: 0;
opacity: 1;
}
.m-slide-detail_counter {
position: absolute;
display: flex;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
padding: 5px 5px;
min-width: 60px;
}
.m-slide-detail_counter .pos {
font-size: 1.2rem;
}
.m-slide-detail_counter .kigou {
font-size: 1.2rem;
}
.m-slide-detail_counter .total {
font-size: 1.2rem;
}
.bg-grey {
position: relative;
padding: 20px 0;
}
.bg-grey:after {
position: absolute;
content: '';
background: #f2f2f2;
width: 100vw;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}

@media all and (max-width: 1000px) and (min-width: 768px) {
.bg-grey:after {
width: calc(100% + 40px);
}
}

@media (max-width: 768px) {
.m-slide-detail_list {
  width: 100%;
}
.m-slide-detail_list .slick-next {
right: 0;
opacity: 1;
margin-top: -60px;
}
.m-slide-detail_list .slick-prev {
left: 0;
opacity: 1;
margin-top: -60px;
}
.m-slide-detail_block p {
font-size: 1.4rem;
margin-top: 10px;
}
.m-slide-detail_thumb {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 10px;
}
.m-slide-detail_thumb p {
width: 18%;
margin-right: 5px;
}
.m-slide-detail_thumb .slick-slide {
margin: 0 5px;
}
.m-slide-detail_thumb .slick-track {
  margin-left: -5px;
}
.m-slide-detail_counter {
bottom: auto;
}
.m-slide-detail_list .slick-slide img {
height: 54vw;
margin: 0 auto;
max-width: inherit;
}
}