@charset "utf-8";

main.index{
  padding-bottom: 0;
}
main.index .cmn_topicpath{
  margin-bottom: 0;
}
.area_second_main{
  background-image: url(/cooperation/img/img_main.jpg);
}
@media screen and (max-width :768px){
  .area_second_main{
    background-image: url(/cooperation/img/img_main_sp.jpg);
  }   
}


/* ===============================================
# sec_learning
=============================================== */
.sec_learning .inner{
  padding-top: 55px;  
  padding-bottom: 60px;
}
.sec_learning .ttl_second h3{
  width: 100%;
  max-width: 678px;
}
@media screen and (max-width :1000px){
  .sec_learning .inner::before{
    top: 10%;
  }
}
@media screen and (max-width :768px){
  .sec_learning .inner{
    width: 100%;
    padding-top: 30px;  
    padding-bottom: 50px;
  }
  .sec_learning .inner::before{
    display: none;
  }
  .sec_learning .ttl_second{
    width: 94.6%;
    margin: 0 auto;
  }
}


/*µØÓòßBЯ¥»¥ó¥¿©`----------------------------------------*/
.inner_cooperation{
  position: relative;
  margin-top: 60px;
}
.inner_cooperation::before{
  content: '';
  width: 59.6%;
  height: 150%;
  position: absolute;
  top: 0;
  left: -22%;
  background: url(/cooperation/img/bg_learning.png) no-repeat left top;
  background-size: 100% auto;
  z-index: 0;
}

.area_cooperation{
  position: relative;
  width:75%;
  max-width:868px;
  margin:0 0 0 auto;  
  z-index: 1;
}

.area_cooperation h4.ttl{
  margin-bottom: 15px;
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 1;  
}
.area_cooperation h4.ttl::after{
  content: '';
  display: block;
  width: 87px;
  height: 1px;
  margin-top: 20px;
  background-color: #000;
}
.area_cooperation .lead{
  line-height: 1.625;
  margin-bottom: 20px;
}
@media screen and (max-width :768px){
  .inner_cooperation{
    margin-top: 20px;
    padding-top: 68.4vw;
    background: url(/cooperation/img/bg_learning_sp.png) no-repeat left top;
    background-size:100% auto;        
  }
  .inner_cooperation::before{
    display: none;
  }
  .area_cooperation{
    width: 94.6%;
    margin: 30px auto 0;
  }  
  .area_cooperation .box_ttl{
    width: 100%;
    margin-bottom: 10px;
  }
  .area_cooperation h4.ttl{
    font-size: 20px;
    font-size: 2rem;    
  }
  .area_cooperation h4.ttl::after{
    display: none;
  }  
  .area_cooperation h4.ttl span{
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: solid 1px #000;
  }
  .area_cooperation .lead{
    line-height: 1.536;
    font-size: 14px;
    font-size: 1.4rem;
    /*font-size: 3.733vw;*/
    margin-bottom: 15px;
    margin-bottom: 4.2%;
  }  
}


/*é_ÖvÖv×ù*/
.area_cooperation .box_course{
  margin-bottom: 30px;
  padding: 10px 3.11% 30px;
  background-color: #fefcf9;
  border:solid 1px #dcdbd7;
  box-shadow: 0px 0px 6px 0px rgba(245, 238, 215, 0.7);
  text-align: center;
}
.area_cooperation .box_course h5{
  display: inline-block;
  padding-left: 78px;
  background: url(/cooperation/img/ico_course_ttl.svg) no-repeat left center;
  background-size: 62px 51px;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 62px;
}
.area_cooperation .box_course ul{
  margin-top: 15px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.area_cooperation .box_course ul li{
  width: 48%;
}
.area_cooperation .box_course ul li a{
  position: relative;
  height: 100%;
  color: #fff;
  padding: 34% 0 20px;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.136;
  background:url(/cooperation/img/ico_course01.svg) no-repeat top 20% center;
  background-size: 27.5% auto;  
  background-color: #063e8d;
  box-shadow: 0px 2px 0px 0px rgba(20, 46, 145, 1);
}
.area_cooperation .box_course ul li a.blank::before{
  content: '';
  width: 14px;
  height: 14px;
  background: url(/common/img/ico_link_blank_w.svg) no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  top: 10px;
  right: 10px;
}
.area_cooperation .box_course ul li:nth-child(2) a{
  background:url(/cooperation/img/ico_course02.svg) no-repeat top 20% center;
  background-size: 35.6% auto;
  background-color: #0495a2;
  box-shadow: 0px 2px 0px 0px rgba(2, 110, 120, 1);
}
.area_cooperation .box_course ul li:nth-child(3) a{
  background:url(/cooperation/img/ico_course03.svg) no-repeat top 23% center;
  background-size: 32.5% auto;  
  background-color: #489059;
  box-shadow: 0px 2px 0px 0px rgba(16, 93, 34, 1);
}
.area_cooperation .box_course ul li a p{
  width: 94%;
  max-width: 209px;
  margin: 0 auto;
  background: url(/common/img/ico_arrow_w.svg) no-repeat right center;
  background-size: 7px 10px;
}
.area_cooperation .box_course ul li a span{
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.43;
}
@media print,screen and (max-width :1300px){
  .area_cooperation .box_course ul li a{
    font-size: 1.692vw;
  }
  .area_cooperation .box_course ul li a.blank::before{
    width: 11px;
    height: 11px;
    top: 5px;
    right: 5px;
  }    
  .area_cooperation .box_course ul li a span{
    font-size: 1.231vw;  
  }
}
@media screen and (max-width :768px){
  .area_cooperation .box_course{
    margin-bottom: 15px;
    padding: 12px 4% 11px;
  }
  .area_cooperation .box_course h5{
    padding-left: 60px;
    background-size: 47px 38.5px;
    font-size: 16.5px;
    font-size: 1.65rem;
    line-height: 47px;
  }
  .area_cooperation .box_course ul{
    margin-top: 10px;
  }
  .area_cooperation .box_course ul li{
    width: 100%;
    max-width:328px;
    margin-right: auto;
    margin-left: auto;
  }
  .area_cooperation .box_course ul li:nth-child(n+2){
    margin-top: 9px;
  }
  .area_cooperation .box_course ul li a{
    padding: 20px 0;
    font-size: 16.5px;
    font-size: 1.65rem;
    background-position: left 5.9% center;
    background-size: 16.5% auto;  
  }
  .area_cooperation .box_course ul li:nth-child(2) a{
    background-position: left 4.2% center;
    background-size: 21.3% auto;
  }
  .area_cooperation .box_course ul li:nth-child(3) a{
    background-position: left 4.2% center;
    background-size: 19.4% auto;  
  }
  .area_cooperation .box_course ul li a p{
    width: 100%;
    max-width:inherit;
    background-position: right 4% center;
    background-size: 5.5px 7.5px;
  }
  .area_cooperation .box_course ul li a span{
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.43;
  }  
}

/*¥»¥ó¥¿©`éL¥á¥Ã¥»©`¥¸*/
.area_message{
  margin-top: 30px;
}
.area_message .box_ttl{
  width: 160px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;  
  line-height: 1;
  vertical-align: middle;
}
.area_message .box_ttl > p{
  font-size: 26px;
  font-size: 2.6rem;
}
.area_message .box_ttl > h4{
  position: relative;
  color: #063e8d;
  margin-left: 40px;
  margin-right: 45px;
}

.area_message .box_ttl > h4::after {
    content: '';
    display: block;
    width: 1px;
    height: 100px;
    height: calc(100% - 9em);
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -1px;
    background-color: #063e8d;
}
.area_message .box_text{
  flex: 1;
}
.area_message .txtRight{
  margin-top: 40px;
}

@media screen and (max-width :1024px){
  .area_message .box_msg{
    display: block;
  }
  .area_message .box_ttl{
    width: 100%;
    -ms-writing-mode: lr-tb;
    writing-mode:horizontal-tb;  
    text-align: center;
  }
  .area_message .box_ttl > p{
    margin-bottom: 22px;
  }
  .area_message .box_ttl > h4{
    margin:0 0 15px 0;
  }
  .area_message .box_ttl > h4::after{
    left: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    height: 1px;
    background: #063e8d;
    z-index: -1;
  }
  .area_message .box_ttl > h4 span{
    display: inline-block;
    background: #fdfbf5;
    padding: 0 16px;
  }
}
@media screen and (max-width :768px){
  .area_message{
    margin-top:25px;
  }
  .area_message .box_ttl > p{
    font-size: 22.5px;
    font-size: 2.25rem;
  }
  .area_message .box_ttl > h4{
    font-size: 15px;
    font-size: 1.5rem;
  }
  .area_message .box_text{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.536;
  }
  .area_message .txtRight{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.25;
    margin-top: 15px;
  }  
}
/* ===============================================
# sec_center
=============================================== */
.sec_center .box_link li{
  width: 33.33%;
  text-align: center;
  padding: 48px 0 30px;
  background: #e0e1f9;
}
.sec_center .box_link li:nth-child(2){
  background: #e3eede;
}
.sec_center .box_link li:nth-child(3){
  background: #fae8cf;
}
.sec_center .box_link .box_text{
  width: 95%;
  max-width: 655px;
  margin: 0 auto;
}

@media screen and (max-width :1024px){
  .sec_center .box_link{
    display: block;
  }
  .sec_center .box_link li{
    width: 100%;
    padding-right: 0;
  }
  .sec_center .box_link li:nth-child(2){
    padding-left: 0;
  }
  .sec_center .box_link li:nth-child(1) .box_text,
  .sec_center .box_link li:nth-child(2) .box_text{
    margin: 0 auto;
  }  
}
@media screen and (max-width :768px){
  .sec_center .box_link li{
    text-align: left;
    padding:23px 0 15px;
  }
  .sec_center .box_link .box_text{
    max-width:inherit;
  }
}
.sec_center .box_link li .box_text > *{
  position: relative;
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
}
.sec_center .box_link .ttl{
  display: inline-block;
  position: relative;
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 1.3;
  text-align: center;
}
.sec_center .box_link .ttl[href=""]{
  pointer-events: none;
}
.sec_center .box_link .ttl[href=""] img{
  display: none;
}
.sec_center .box_link .ttl::after {
    margin: 15px auto 15px;
    content: '';
    display: block;
    width: 180px;
    height: 1px;
    border-top: solid 1px rgba(0,0,0,0.4);
}
.sec_center .box_link .ttl:not([href=""]) span{
  position: relative;
  display: inline-block;
  padding: 0 42px;  
  background:url(/common/img/ico_arrow_b.svg) no-repeat right center;
  background-size: 8px 11px;
}
.sec_center .box_link .txt{
  text-align: left;
  line-height: 1.625;
}
.sec_center .box_link dl{
  display: -webkit-box;
  display: -ms-flex;  
  display: -webkit-flex;
  display: flex;  
}
.sec_center .box_link dl dt{
  position: relative;
  width: 4.5em;
  color: #063e8d;
  font-weight: bold;
}
.sec_center .box_link dl dt::after {
  content: ':';
  position: absolute;
  top: 0;
  right: 0;
  color: #000;
}
.sec_center .box_link dl dd{
  flex: 1;
  padding-left: 0.5em;
}
.sec_center .box_link .btn{
  text-align: center;
  padding: 12px 0 18px;
  margin-top: 20px;
  background: rgba(255,255,255,0.5);
  border: solid 1px rgba(102,102,102,0.4);
}

.sec_center .box_link .btn span{
  position: relative;
  display: inline-block;
  padding:3px 0 3px 30px;
  line-height: 1.3;
  background: url(/common/img/ico_palce.svg) no-repeat left center;
  background-size: 19px 24px;
  vertical-align: middle;
}
.sec_center .box_link .btn span::after{
  content: '';
  width: 8px;
  height: 11px;
  position: absolute;
  right: -40px;
  top: 50%;
  margin-top: -4px;
  background: url(/common/img/ico_arrow_b.svg) no-repeat center center;
  background-size: contain;
}
@media all and (min-width :769px){
  .sec_center .box_link .ttl span .ico_blank{
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }  
}

@media screen and (max-width :768px){
  .sec_center .box_link li .box_text > *{
    max-width: inherit;
    width: 100%;
  }
  .sec_center .box_link .ttl{
    font-size: 19px;
    font-size: 1.8rem;
    text-align: left;
  }
  .sec_center .box_link .ttl::after {
    margin: 15px auto 15px 0;
    width: 90px;
  }
  .sec_center .box_link .ttl:not([href=""]) span{
    width: 100%;
    padding: 0;
    background-size:7px 7px;
  }
  .sec_center .box_link .txt{
    line-height: 1.536;
    font-size: 14px;
    font-size: 1.4rem;
  }
  .sec_center .box_link dl dt{
    width: 4em;
  }
  .sec_center .box_link .btn{
    padding: 10px 0 13px;
    margin: 15px auto 0;
    max-width: 275px;
    background: url(/common/img/ico_arrow_b.svg) no-repeat right 18px center;
    background-size:7px 7px;
    background-color: rgba(255,255,255,0.5);
  }
  .sec_center .box_link .btn span{
    padding:3px 0 3px 30px;
    line-height: 1.3;
    background-size: 14.5px 18px;
  }
  .sec_center .box_link .btn span::after{
    display: none;
  }  
}
/*»î„Óˆó¸æ*/
.sec_center .box_activity li{
  display: table;
  width: 100%;
}
.sec_center .box_activity a{
  display: table-cell;
  vertical-align: middle;
  height: 313px;
  background: url(/cooperation/img/bg_activity.png) no-repeat center center;
  background-size: cover;
  text-align: center;
}
.sec_center .box_activity p.ttl{
  margin-bottom: 25px;
  color: #fff;
  font-size: 28px;
  font-size: 2.8rem;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 1);
}
.sec_center .box_activity p.link{
  display: inline-block;
  width: 330px;
  padding: 20px 0;
  line-height: 1;
  background: url(/common/img/ico_arrow_b.svg) no-repeat right  40px center; 
  background-size: 8px 11px;
  background-color: rgba(255,255,255,0.8);
}
@media screen and (max-width :768px){
  .sec_center .box_activity a{
    height: 270px;
    background-image: url(/cooperation/img/bg_activity_sp.png);
    background-position: top center;
  }
  .sec_center .box_activity p.ttl{
    margin-bottom: 15px;
    font-size: 22.5px;
    font-size: 2.25rem;
    line-height: 1.222;
  }
  .sec_center .box_activity p.link{
    width: 90%;
    max-width: 275px;
    padding: 20px 0;
    background-position: right 18px center;
    background-size:5px 7px;
  }  
}
/* ===============================================
# sec_project
=============================================== */
.sec_project{
  padding-bottom: 50px;
}
.sec_project .cmn_ttl_index.topline{
  padding-top: 80px;
  margin-bottom: 0;
}
.sec_project .cmn_ttl_index.topline::before{
  height: 68px;
}
.sec_project .cmn_btn_general{
  background-color: #fdfbf5;
  border-color: #cccbc7;
  min-width: 288px;
}
.sec_project .cmn_gallery{
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width :768px){
  .sec_project{
    padding-bottom: 40px;
  }
  .sec_project .cmn_ttl_index.topline{
    padding-top: 54px;
  }
  .sec_project .cmn_ttl_index.topline .ttl{
    font-size: 23px;
    font-size: 2.3rem;
  }
  .sec_project .cmn_ttl_index.topline::before{
    height: 46px;
  }
  .sec_project .cmn_btn_general{
    min-width: 77.6%;
  }  
}