@charset "UTF-8";
#top header{
height: auto !important;
}
#top .top_slide_area{
display: flex;
margin: 0 auto;
padding: 100px 0 0;
max-width: 1060px;
}
#top .top_slide_area img{
display: block;
width: 100%;
height: auto;
}
#top .top_slide_area #slider{
width: 62.3%;
}

#top .top_slide_area #slider .slide_dots{
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
#top .top_slide_area #slider .slide_dots li{
margin: 0 10px;
}
#top .top_slide_area #slider .slide_dots button{
width: 14px;
height: 14px;
font-size: 0;
line-height: 0;
display: block;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background-color: #C7C7C7;
border-radius: 50%;
}
#top .top_slide_area #slider .slide_dots .slick-active button{
background-color: #a2ca0f;
}
#top .top_slide_area #slider .arrow{
position: absolute;
font-size: 20px;
font-weight: 700;
color: #C7C7C7;
bottom: 20px;
left: 20%;
z-index: 10;
}
#top .top_slide_area #slider .next{
right: 20%;
left: auto;
}
#top .top_slide_area .box_r{
width: 50%;
}
#top .top_slide_area .cnt_box{
position: relative;
}
#top .top_slide_area .cnt_box a{
display: block;
}
#top .top_slide_area .cnt_box::before{
content: '';
display: block;
position: absolute;
border: solid 6px #ff879c;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
pointer-events: none;
}
#top .top_slide_area .box01{
box-sizing: border-box;
}
#top .top_slide_area .box02::before{
border: solid 6px #fdf2bc;
}
#top .top_slide_area .cnt_box::after{
/* content: '特別企画'; */
display: inline-block;
position: absolute;
padding: 6px 0;
font-size: 14px;
width: 90px;
top: 6px;
left: 0;
color: #fff;
background-color: #ff879c;
text-align: center;
}
#top .top_slide_area .box02::after{
/* content: '留学説明会'; */
color: #8e6d5b;
background-color: #fdf2bc;
}
#top #header_bottom{
position: static;
}

@media only screen and (max-width:768px){
#top .top_slide_area{
margin: 0 auto 30px;
flex-direction: column;
padding: 0;
}
#top .top_slide_area #slider{
width: 100%;
}
#top .top_slide_area #slider .arrow{
left: auto;
right: 17%;
}
#top .top_slide_area #slider .arrow::after{
content: '';
position: absolute;
border-radius: 90%;
background: #a2ca0f;
width: 40px;
height: 40px;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}
#top .top_slide_area #slider .next{
left: auto;
right: 5%;
}
#top .top_slide_area .r_box{
display: flex;
}
#top .top_slide_area .cnt_box{
width: 50%;
}
}