*{padding: 0;margin: 0;box-sizing: border-box;}
a{text-decoration: none;}
ol, ul:not([class]), ul.dotList {padding-left: 0rem;}
p{margin-top: 0;}
.none{display: none;}

h1{width: 100%;max-width: 960px;margin: 0 auto;}
h1 img{width: 100%;}
.lead_img{width: 80%;margin: 0 auto;max-width: 600px;}
.lead_img img{width: 100%;}

.recommendSist {
    width: 960px;
    margin: 0 auto 20px;
}

.recommendSist .header {
    margin-bottom: 40px;
}

.recommendSist .header p {
    font-size: 14px;
    text-align: right;
    padding: 10px 0 0;
    font-weight: 600;
}

.recommendSist li{list-style: none;}

/* .sist_ttl{
	text-align:center;
	margin-bottom:40px;
} */
.sist_ttl figure{
	margin:0;
}
.sist_ttl figure img.pc{
	display: block !important;
}
.sist_ttl figure img.sp{
	display: none !important;
}
/*--------------------------------*/
.box_entry h2{
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    padding-top: 50px;
}

.box_entry h2 strong{color: #ff9d0a;}

/*--------------------------------*/

.box_top p{
    padding: 50px 15px;
    background-color: #faf5e8;
}

.title_1{color: #184fb4;}
.title_2{color: #b93143;}
.title_3{color: #1d8533;}

.link p{display: inline-block;padding: 3px 8px;}

/*--------------------------------*/
.box2 {padding: 60px 5px;}
.box2 img{width: 100%;max-width: 600px;}
.box2 .flex{
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    background-color: #ecedee;
    padding: 5px;
    margin: 0px 0px 10px 0px;
    display: flex;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .25);
  background-color: #fff;
}

.box2 .img{
    width:230px;
    height:150px;
    padding: 5px;
}
.box2 .img img{
    width:200px;
    height:150px;
    object-fit:contain; 
}
.box2 .link{width: 100%;padding: 10px;box-sizing: border-box;}
.box2 a{display: block;}
.box2 ul{display: flex;margin-top: 10px;}
.box2 ul li{border: 1px solid #000;margin-right: 5px;}
.box2 ul li a {
    font-size: 14px;
    background: #ffffff;
    border-radius: 3px;
    margin-right: 5px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 5px 32px 5px 15px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.box2 ul li a:hover {
    background: #313131;
    color: #FFF;
}
.box2 ul li a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.box2 ul li a:hover:after {
    border-color: #FFF;
}

.box2 .title_1{font-weight: bold;font-size: 20px;margin-bottom: 10px;}
.box2 .title_2{font-weight: bold;font-size: 20px;margin-bottom: 10px;}
.box2 .title_3{font-weight: bold;font-size: 20px;margin-bottom: 10px;}

/*--------------------------------*/
.box3{margin-bottom: 100px;}
.box3 .title_4{background-color: #184fb4;color: #ffffff;padding: 10px;margin-bottom: 40px;font-size: 24px;font-weight: bold;}
.box3 .title_5{background-color: #b93143;color: #ffffff;padding: 10px;margin-bottom: 50px;font-size: 24px;font-weight: bold;}
.box3 .title_6{background-color: #1d8533;color: #ffffff;padding: 10px;margin-bottom: 50px;font-size: 24px;font-weight: bold;}


.box3 h4{text-align: center;margin-bottom: 30px;font-size: 21px;font-weight: bold;}
.box3 .c_1{color: #184fb4;}
.box3 .model{color: #184fb4;}

.box3 .flex{display: flex;margin-top: 20px;}
.box3 .flex .box img{width: 100%;}
.box3 .flex .box_1 img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.box3 .flex .box_1 h3{font-size: 16px;padding: 5px 10px;text-align: center;font-weight: bold;}

.course_color1{color: #184fb4;}
.course_color2{color: #b63c4c;}
.course_color3{color: #1d8533;}

.box3 .flex .box p{font-size: 14px;padding: 0px 10px;margin: 0px 0 30px 0;color: #5a5a5a;}
.box3 .flex .box_1{border: 1px solid #5a5a5a;background-color: #fff;}
.box3 .flex .box{
    
    border-radius: 10px;
    width: calc(33.33% - 6.666px);
	margin-right: 10px
}
.box3 .flex h5{font-size: 16px;padding: 5px;margin-bottom: 10px;text-align: center;}
.box3 .flex .box_2{background-color: #e3eff1;padding: 10px;border: 1px solid #b0c3c9;}
.box3 .flex .box_2 h5{color: #184fb4;border-bottom: 2px solid #184fb4;font-weight: bold;}
.box3 .box_4 span{font-size: 11px;color: #5a5a5a;display: block;line-height: 1.2;padding-top: 5px;}

/*--------------------------------*/
.box3 .c_2{color: #b63c4c;}
.box3 .flex .box_3{background-color: #f8e7e7;padding: 10px;border: 1px solid #a87b7b;min-height: 200px;}
.box3 .flex .box_3 h5{color: #b63c4c;border-bottom: 2px solid #b63c4c;font-weight: bold;}

.box3 .c_3{color: #1d8533;}
.box3 .flex .box_4{background-color: #e7f0eb;padding: 10px;border: 1px solid #829c83;}
.box3 .flex .box_4 h5{color: #1d8533;border-bottom: 2px solid #1d8533;font-weight: bold;}

/*--------------------------------*/
.recommendSist .schoolBox{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 40px 80px;
	background-color: #fff;
	border: 5px solid #801627;
	/*box-shadow: 0 4px 14px 0 #ebebeb;*/
}
.recommendSist .schoolBox div.info{
	flex: 1;
}
.recommendSist .schoolBox figure{
	margin: 0 0 10px 30px;
}
.recommendSist .schoolBox figure img {
    width: 400px;
	box-shadow: 5px 5px 15px rgba(0,0,0,.1);
	margin-bottom:10px;
}
.recommendSist .schoolBox h2{
	font-size: 2rem;
    font-weight: 700;
    line-height: 1;
	margin-bottom:40px;
}
.recommendSist .schoolBox dt {
    float: left;
    width: 100px;
    line-height: 1.8em;
    font-size: 1rem;
    background: #f2f2ee;
    text-align: center;
    padding: 0 5px;
    margin-bottom: 20px;
}
.recommendSist .schoolBox dd {    
    margin-left: 110px;
    margin-bottom: 20px;	  
	font-size: 1rem;
}
.schoolBox .schoolBox_btn {
    display:block;
	width:100%;
}

.schoolBox .schoolBox_btn ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.schoolBox .schoolBox_btn li {
    margin: 0 10px;
    width: calc(100% / 3);
    list-style: none;
}

.schoolBox a {
    text-decoration: none;
}

.schoolBox .schoolBox_btn li a {
	border-radius: 3px;
    font-size: .875rem;
    font-weight: 700;
    padding: 5px 70px;
    width: 100%;
    min-height: 60px;
}
.schoolBox .schoolBox_btn .clipBox_btn {
	padding: 5px 40px;
	min-width:inherit;
}


@media screen and (max-width:736px){
.contents {
 padding:0;
}

.sist_ttl{
	margin-bottom:20px;
}
.sist_ttl figure img.pc{
	display: none !important;
}
.sist_ttl figure img.sp{
	display: block !important;
}
	
.recommendSist {
    width: 100%;
}

.recommendSist .box_entry p {
    margin: 20px;
    text-align: left;
}
.recommendSist .box_entry p br{
	display:none;
}
.recommendSist .box_entry p span {
  display: inline-block;
}	
/* .recommendSist .box_entry h2 {
	margin: 0 10px;
	letter-spacing: 0.1em;
	font-size: 2.3rem;
}
.recommendSist .box_entry h2 br{
	display:none;
}
.recommendSist .box_entry h2 span {
  display: inline-block;
} */
/* .recommendSist .box_top{
    padding:20px 20px 0;
} */
.recommendSist .box_top h2{
   margin-bottom: 45px;
}
.recommendSist .box_top h2 span{
	padding-bottom:25px;
}
.recommendSist .box_top p.top{
	text-align:left;
}
.recommendSist .box_top p.top br{
	display:none;
}
.recommendSist .box_top .inner_lead{
    margin: 30px auto 10px;
    display: flex;
	flex-direction:column;
}
.recommendSist .box_top .inner_lead figure {
	margin:0;
}
.recommendSist .box_top .inner_lead div p.entry {
    line-height: 1.65;
    margin:20px 0 0;
}
.recommendSist .box_top .inner_list {
    display: flex;
	flex-direction:column;
    justify-content: center;
}
.recommendSist .inner_list div {
    width: 100%;
	margin-bottom:40px;
}



	
.recommendSist .box1 {
    flex-direction: column;
	margin: 0 auto 20px;
    padding: 20px 20px 0;
}
.recommendSist .box1 div {
	width:100%;
	padding: 30px 20px;
    margin-bottom: 40px;
}
.recommendSist .box1 div:last-child{
	margin-bottom:20px;
}
/* .recommendSist .box2 {
    flex-direction: column;
    margin: 0 auto 20px;
    padding: 20px 0 0;
} */
/* .recommendSist .box2 div {
	width:100%;
	padding: 20px;
	margin-bottom: 20px;
} */




.recommendSist .box3 {
    /* margin: 0 auto 20px; */
}
.recommendSist .box3 h2 {
    margin-bottom: 20px;
}
.recommendSist .box3 div.field{
    display: flex;
    flex-direction: column;
    /* max-width: 427px; */
    margin: 0 auto 20px;
}
.recommendSist .box3 div.field_item {
	padding:20px;
}

.recommendSist .box3 div.field h3 {
    clip-path: polygon(100% 0, 0 100%, 0 0);
    clip-path: polygon(90% 0, 0 90%, 0 0);
    width: 180px;
    height: 180px;
    padding:10px;
}



.recommendSist .schoolBox {
       flex-direction: column;
        padding: 20px;
        margin: 20px 0;
}
.recommendSist .schoolBox h2 {
	display: flex;
	justify-content: center;
	line-height:inherit;
	margin-bottom: 20px;
}

.schoolBox .schoolBox_btn ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin:0;
}
.schoolBox .schoolBox_btn li {
	margin: 10px 10px 0;
	width: auto;
}
.schoolBox .schoolBox_btn li a {
	padding: 5px 70px;
	width: 100%;
	min-height: 50px;
	font-size: .8571428571rem;
	margin: auto;
}
.schoolBox .schoolBox_btn .clipBox_btn{
	margin: auto;
	max-width:inherit;
}
.recommendSist .schoolBox figure {
    margin: 0;
    width: 100%;
}
.recommendSist .schoolBox img {
	margin: 10px auto;
	display: block;
}

}

@media screen and (max-width: 700px){
    .none{display: block;}
    .box_entry h2{font-size: 16px;padding-top: 0px;}   
    .box_top p{
        margin-bottom: 30px;
        padding: 50px 15px;
        font-size: 13px;
        background-color: #faf5e8; 
    }
    
    .link p{padding: 0px;text-align: center;font-size: 13px;width: 100%;margin-bottom: 10px;}
    
    /*--------------------------------*/
    .box2{padding: 0px;}
    .box2 .flex{
        padding: 10px 5px;
        margin: 10px;
        display: block;
        box-shadow: 1px 1px 6px -2px #9e9e9e,
      3px 3px 8px rgba(255,255,255,0.8) inset;
    }
    
    .box2 .img{width: 100%;}
    .box2 .img img{width: 100%;}


    .box2 .link{width: 100%;padding: 7px;}

    .box2 ul{display: flex;margin-top: 10px;flex-wrap: wrap;justify-content: space-between;}
    .box2 ul li{border: 1px solid #000;margin-right: 0px;margin-right: 0px;margin-bottom: 2px;width: 49%;}
    .box2 ul li a {
        font-size: 12px;
        background: #ffffff;
        border-radius: 3px;
        margin-right: 5px;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        max-width: 280px;
        padding: 4px 22px 4px 7px;
        color: #313131;
        transition: 0.3s ease-in-out;
        font-weight: 500;
    }
    .box2 ul li a:hover {
        background: #313131;
        color: #FFF;
    }
    .box2 ul li a:after {
        content: '';
        width: 7px;
        height: 7px;
        border-top: 2px solid #313131;
        border-right: 2px solid #313131;
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 50%;
        right: 20px;
        border-radius: 1px;
        transition: 0.3s ease-in-out;
    }
    .box2 ul li a:hover:after {
        border-color: #FFF;
    }
    
    .box2 .title_1,.box2 .title_2,.box2 .title_3{
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    /*--------------------------------*/
    .box3{margin-bottom: 70px;}
    .box3 p{padding: 5px;font-size: 13px;}
    .box3 .title_4,.box3 .title_5,.box3 .title_6{font-size: 18px;text-align: center;}

    .box3 h4{margin-bottom: 20px;font-size: 15px;}
    .box3 .flex{display: flex;margin-top: 20px;flex-wrap: wrap;}
    .box3 .flex .box_1 img{
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .box3 .flex .box{
        border-radius: 5px;
        width: calc(50% - 8px);
        margin: 3px;
    }

    .box3 .flex .box_2{
        
        border-radius: 5px;
        width: calc(50% - 6px);
        margin: 2px;
    }
    .box3 .flex .box p{font-size: 13px;padding: 5px;}
    .box3 .flex .box_1 h3{font-size: 14px;text-align: center;padding: 5px 0;}
    .box3 .flex h5{font-size: 14px;}

}