@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/


#idx_course {
padding: 30px 0 0;
}
#idx_course .titArea {
border-top: 2px solid #91c0ea;
display: block;
text-align: center;
margin: 0 auto 25px;
width: 94%;
box-sizing: border-box;
}
#idx_course .idxH3 {
text-align: center;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.1rem;
background: #FFF;
display: inline-block;
position: relative;
top: -8px;
padding: 0 30px;
}
#idx_course .sl_slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
width: 92%;
margin:0 auto 30px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slick-track {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#idx_course .sl_slider .slick-slide {
margin:0 10px;
height: auto;
background: #f4f4f4;
display: block;
}

#idx_course .sl_slider .slick-slide.special_item {
background: #005395;
}
#idx_course .sl_slider .slick-slide.special_item * {
color: #FFF;
}

#idx_course .sl_slider .slick-slide a {
display: block;
height: 100%;
padding: 20px 15px;
text-decoration: none;
position: relative;
box-sizing: border-box;
transition: .2s;
}
#idx_course .sl_slider .slick-slide a:hover {
opacity: 0.8;
}
#idx_course .sl_slider .slick-slide * {
color: #333;
}
#idx_course .sl_slider .slick-slide .mTit {
font-size: 16px;
font-weight: 700;
border-bottom: 1px solid #91c0ea;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
line-height: 24px;
}
#idx_course .sl_slider .slick-slide.special_item .mTit {
position: relative;
padding: 0 0 10px 50px;
}
#idx_course .sl_slider .slick-slide .mTit .icon {
position: absolute;
top: calc(50% - 20px - 5px);
left: 0;
width: 40px;
height: auto;
}
#idx_course .sl_slider .slick-slide .mTit .date {
font-size: 13px;
font-weight: 400;
}
#idx_course .sl_slider .slick-slide p {
line-height: 22px;
/*メイリオは文字詰ができません*/
}
#idx_course .sl_slider .slick-slide .tag {
position: absolute;
width: 60px;
height: 40px;
top: inherit;
left: inherit;
bottom: 0;
right: 0;
color: #FFF;
font-size: 13px;
box-sizing: border-box;
padding: 20px 0 0 30px;
}
#idx_course .sl_slider .slick-slide .tag.training {
background:linear-gradient(to bottom right, transparent 50%, #dbb504 calc(50% + 1px)) no-repeat top left/100% 100%;
}
#idx_course .sl_slider .slick-slide .tag.transmission {
background:linear-gradient(to bottom right, transparent 50%, #169a00 calc(50% + 1px)) no-repeat top left/100% 100%;
}



/*矢印の設定*/

/*戻る、次へ矢印の位置*/
#idx_course .slick-prev, 
#idx_course .slick-next {
position: absolute;/*絶対配置にする*/
top: calc(50% - 25px);
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
width: 0;
height: 0;
border-style: solid;
border-width: 10px 16px 10px 0;
border-color: transparent #91c0ea transparent transparent;
}
#idx_course .slick-prev {/*戻る矢印の位置と形状*/
left: -15px;
/* transform: rotate(-135deg); */
}
#idx_course .slick-next {/*次へ矢印の位置と形状*/
right: -15px;
transform: rotate(180deg);
}

/*ドットナビゲーションの設定*/
#idx_course .slick-dots {
padding: 0;
text-align:center;
margin: 20px 0 0 0;
}
#idx_course .slick-dots li {
list-style-type: none;
background: none;
display:inline-block;
margin:0 8px;
padding: 0;
}
#idx_course .slick-dots button {
border: none;
color: transparent;
outline: none;
width:12px;/*ドットボタンのサイズ*/
height:12px;/*ドットボタンのサイズ*/
display:block;
border-radius:50%;
background:#DDD;/*ドットボタンの色*/
}
#idx_course .slick-dots .slick-active button{
background:#91c0ea;/*ドットボタンの現在地表示の色*/
}


@media screen and (max-width: 599px) {
}