@charset 'UTF-8';

/* カルーセル */
.doc-carousel{margin-top:40px}
.doc-carousel__slide{position:relative;box-sizing:border-box;padding:0 15px}
.doc-carousel__slide .icon_set{position:relative}
.doc-carousel__slide img:not(.ico_expand){width:100%;border:1px solid #bbb;box-sizing:border-box}
.doc-carousel__caption{margin-top:8px;font-size:14px}
.doc-carousel .slick-track{display:flex}
.doc-carousel .slick-slide{height:auto}
/* コンテンツ幅からはみ出して前後のスライドを見せる(centerPaddingはjs/doc.jsで.article__main実測幅から動的に算出) */
@media screen and (min-width:768px){
.doc-carousel{position:relative;left:50%;width:100vw;margin-right:-50vw;margin-left:-50vw}
}
@media screen and (max-width:767px){
.doc-carousel{margin-top:20px}
.doc-carousel__track{margin:0}
.doc-carousel__slide{padding:0 8px}
.doc-carousel__caption{font-size:12px}
}

/* カルーセルのコントローラー(トップページ index.html の実装に合わせる) */
.doc-carousel-controls{display:flex;margin-top:15px;justify-content:center;align-items:center}
.doc-carousel-controls .slick-control-btn{width:40px;height:40px;font-size:0}
.doc-carousel-controls .slick-control-prev,.doc-carousel-controls .slick-control-next{display:flex;justify-content:center;align-items:center}
.doc-carousel-controls .slick-control-prev:before,.doc-carousel-controls .slick-control-next:before{display:block;width:14px;height:14px;border-width:3px 3px 0 0;border-style:solid;border-color:#ba0009;content:''}
.doc-carousel-controls .slick-control-prev:before{transform:translateX(18.75%) rotate(-135deg)}
.doc-carousel-controls .slick-control-prev{margin-right:20px}
.doc-carousel-controls .slick-control-next{order:1}
.doc-carousel-controls .slick-control-next:before{transform:translateX(-18.75%) rotate(45deg)}
.doc-carousel-controls .slick-control-play{display:none;padding:12px 11px 12px 14px}
.doc-carousel-controls .slick-control-play:before{display:block;width:0;height:0;border:0 solid transparent;border-width:8px 0 8px 15px;border-left-color:#ba0009;content:''}
.doc-carousel-controls .slick-control-pause{padding:12px 14px}
.doc-carousel-controls .slick-control-pause:before,.doc-carousel-controls .slick-control-pause:after{display:inline-block;width:3px;height:16px;background-color:#ba0009;content:''}
.doc-carousel-controls .slick-control-pause:before{margin-right:6px}
.doc-carousel-controls .slick-dots{display:flex;margin:0 35px 0 15px;padding:0;list-style:none;font-size:0}
.doc-carousel-controls .slick-dots li{margin:0}
.doc-carousel-controls .slick-dots li:not(:first-child){margin-left:20px}
.doc-carousel-controls .slick-dots button{width:12px;height:12px;padding:0;background-color:#b2b2b2;transition:background-color .25s ease-out}
.doc-carousel-controls .slick-dots .slick-active button{background-color:#ba0009}
@media screen and (max-width:767px){
.doc-carousel-controls .slick-control-prev,.doc-carousel-controls .slick-control-next{width:45px;height:45px;background-color:#ba0009}
.doc-carousel-controls .slick-control-prev:before,.doc-carousel-controls .slick-control-next:before{border-color:#fff}
.doc-carousel-controls .slick-control-prev{margin-right:15px}
.doc-carousel-controls .slick-dots{margin-right:20px}
}