@charset "utf-8";

/*-----SP表示-----*/
/*SP_要素幅*/
#contents {
  width: 100%;
  min-width: 320px;
}

/*SP_トップへ戻る*/
#top a {
  width: 48px;
  height: 48px;
}

#top a:after {
  left: 25%;
  top: 40%;
}

/*SP_メインヴィジュアル*/
#main-visual {
  height: 80px;
  background: url( "/7cn/culture/cc/course/images/common/sp-main.jpg")  no-repeat;
}

/*SP_メイン*/
#main-text_box {
  margin: 15px auto 10px auto;
}

#main-text {
  font-size: 14px;
}

/*SP_受講にあたってのご案内*/
.info {
    position: relative;
    margin-bottom: 20px;
    width: 321.5px;
    border: 3px solid #FFC982;
    border-top: none;
    border-radius: 3px;
    outline: 0;
    cursor: pointer;
    margin: 0 auto;
  }
  
  .info .info-title {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #412020;
    background: #FFC982;
    cursor: pointer;
  }

  .info-title{
    position: relative;
    pointer-events: all;
  }
  
  .info-title:after {
    content: "";
    position: absolute;
    right: 25px;
    top: 28%;
    transition: all 0.5s ease-in-out;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 3px #412020;
    border-right: solid 3px #412020;
    border-radius: 1px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  .info-title.open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 37%;
  }

  .info-list {
    display: none;
    font-size: 17px;
  }

  .info-list li a {
    display: block;
    color: #412020;
  }

  .info-list li {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    font-weight: bold; 
    border-bottom: solid 2px #FFC982;
  }

  .info-list li:last-child {
    border-bottom: none;
  }

/*SP_フリースペース*/
#space {
  width: 100%;
}

#space_wrap {
  margin: 20px auto 0 auto;
  width: 85%;
  font-size: 18px;
}
#space_wrap p {
  font-size: 14px;
}

/*SP_見出し*/
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 0px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  line-height: 1;
}

/*SP_新着講座見出し*/
.title_01 {
  background-color: #b8464e;
  color: #FFF;
}

/*SP_講座ジャンル見出し*/
.title_02 {
  background-color: #c0be73;
  color: #FFF;
}

/*SP_ご案内見出し*/
.title_03 {
  margin-bottom: 20px;
  background-color: #FFC982;
  color: #412020;
}

/*SP_講座*/
#new-course {
  margin-bottom: 65px;
  padding: 20px 0px;
  width: 100%;
  background-color: rgba(184,70,78,0.2);
}

#genre .genre_img {
  width: 100%;
  padding-top: 100%;
}

  #new-course .new-course_img {
	width: 100%;
	padding-top: 100%;
  }

.course_box {
  margin: 30px auto;
  padding: 20px 10px;
  border-radius: 3px;
  background-color: #FFF;
  border-radius: 3px;
}

.course_box:last-of-type {
  margin-bottom: 0px;
}
.new-course_box {
	padding: 20px 10px;
}

.course_wrap {
  margin: 0 auto;
  width: 90%;
}

.img_wrap{
  margin-bottom: 20px;
  text-align: center;
}

.course_text {
  overflow: hidden;
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 font-size: 16px;
}

.course_contents {
  margin: 0 auto;
  width: 100%;
}

.icon {
  width: 90px;
  background-color: #FE723D;
  border-radius: 7px;
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
}

.course_title{
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
}

.course_instructor{
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.course_text{display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 15px;
  font-size: 14px;
}

.course-outline{
  text-align: center;
  font-weight: bold;
}

.outline_title {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 0px;
  background-color: #b8464e;
  border-radius: 3px 3px 0px 0px;
  color: #FFF;
  font-size: 14px;
  letter-spacing: 5px;
  text-align: center;
}

.outline_date {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 5px 10px;
  background-color: #FFF;
  border: 1.5px solid #b8464e;
  border-radius: 0px 0px 3px 3px;
  color: rgb(51, 51, 51);
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1.8;
  text-align: left;
}

/*SP_講座ジャンル*/
#genre {
  background-color: #FFF;
}

.genre_box {
  width: 85%;
}

.genre_box:last-of-type {
  margin-bottom: 40px;
}

#genre_wrap {
  background-color: #FFF;
}

.genre_contents {
  width: 100%;
}

.genre_img {
  width: 100%;
  height: auto;
}

/*SP_お申し込みの注意点、お申し込み方法*/
.info-area_box {
  margin-bottom: 25px;
}

.info-area_box:last-of-type {
  margin-bottom: 0px;
}

.info-area_text {
  margin: 0 auto;
  width: 85%;
  font-size: 13px;
  line-height: 1.8;
}

/*SP_footer*/
footer {
  display: flex;
  align-items: center;
  margin-top: 100px;
  width: 100%;
  height: 53px;
  background-color: #FFF;
}
#footer_box {
  margin: 0 auto;
  width: 85%;
}

.copyright-text {
  font-weight: bold;
}

.copy_01{
  font-size: 10px;
}

.copy_02 {
  font-size: 9px;
}

/*SP_トップへ戻る*/
#top {
  bottom: 53px;
}

/*---SP_340px以下の表示---*/
@media screen and (max-width:340px) {

  html, body {
    overflow-x: hidden;
  }

  .info {
    width: 100%;
  }

  .course_img {
    width: 90%;
    height: auto;
  }

  .course_contents {
    width: 90%;
  }

  .course_box {
    width: 90%;
  }
  .new-course_box {
    width: 100%;
	box-sizing: border-box;
  }

}

/*-----PC表示-----*/
@media screen and (min-width:768px) {

  /*PC_要素幅*/
  #contents {
    width: 1000px;
  }
  
  /*PC_トップへ戻る*/
  #top a {
    width: 52.5px;
    height: 52.5px;
  } 
  
  #top a:after {
    left: 27.5%;
    top: 40%;
  }
  
  /*PC_メインヴィジュアル*/
  #main-visual {
      height: 150px;
      background: url( "/7cn/culture/cc/course/images/common/pc-main.jpg")  no-repeat;
  }
  
  /*---PC_メイン---*/
  #main-text_box {
    margin: 35px auto;
  }
  
  #main-text {
    text-align: center;
    font-size: 18px;
  }

  #main a:hover{
    text-decoration: underline;
  }

  /*PC_受講にあたってのご案内*/
  .info {
      margin-bottom: 30px;
      width: 100%;
      border: none;
      pointer-events: none;
    }
    
    .info .info-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px;
      height: 60px;
      margin: 0;
      font-size: 30px;
      letter-spacing: 10px;
    }
  
    .info-title{
      border-radius: 3px;
      pointer-events: none;
    }
    
    .info-title:after {
      display: none;
    }
    
    .info-list {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 15px;
      font-size: 17px;
    }
  
    .info-list li a {
      display: block;
      font-size: 24px;
      letter-spacing: 5px;
      color: #412020;
      transition: .3s;
    }

    .info-list li {
      width: 32%;
      padding: 8px 0;
      border: 3px solid #FFC982;
      border-radius: 3px;
      pointer-events: all;
      transition: .3s;
    }

    .info-list li:hover  {
      background-color: #FFC982;
    }

    .info-list li:hover a {
      color: #FFF;
    }
  
    .info-list li:last-child {
      border-bottom: 3px solid #FFC982;
    }

  /*PC_フリースペース*/
  #space_wrap {
    width: 100%;
  }
  #space_wrap p {
    font-size: 18px;
  }
  
  /*PC_見出し*/
  .title_01, .title_02, .title_03 {
    height: 60px;
    font-size: 28px;
    letter-spacing: 5px;
    border-radius: 3px;
  }
  
  .title_01 {
    margin: 0 auto 15px auto;
    width: 95%;
  }
  
  .title_02 {
    margin-bottom: 35px;
  }

  .title_03 {
    margin-bottom: 25px;
  }
  
  /*PC_講座*/
  #new-course {
    width: 100%;
    margin-bottom: 75px;
    padding: 20px 0 0 0;
  }
  
  .course_wrap {
    padding: 20px 0px;
    width: 95%;
  }
  
  .course_box {
    display: flex;
    justify-content: space-between;
    margin: 0px auto;
    padding: 25px 19.5px;
    width: 911px;
  }

  .course_box:hover {
    opacity: .5;
  }
  
  .img_wrap{
    margin-bottom: 20px;
    text-align: left;
  }
  
  #new-course .new-course_img {
    width: 250px;
    height: 250px;
	padding: 0;
  }
  
  .course_contents {
    margin: 0;
    width: 632px;
  }
  
  .icon {
    padding: 2px 14px;
    background-color: #FE723D;
    border-radius: 7px;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
  }
  
  .course_title{
    margin: 10px 0;
	font-size: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  
  .course_instructor{
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .course_text{
    margin-bottom: 25px;
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }
  
  .course-outline{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .outline_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0px;
    width: 233.5px;
    height: 56.5px;
    background-color: #b8464e;
    border-radius: 3px 0px 0px 3px;
    color: #FFF;
    letter-spacing: 5px;
    font-size: 18px;
  }
  
  .outline_date {
    display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0px;
    height: 53.5px;
    padding: 0px 45px;
    background-color: #FFF;
    border: 1.5px solid #b8464e;
    border-radius: 0px 3px 3px 0px;
    color: rgb(51, 51, 51);
    text-align: left;
    letter-spacing: 2px;
    font-size: 15px;
  }
  
  /*PC_新着講座*/
  .new-course_box {
    margin-bottom: 20px;
  }

  .new-course_text {
  	height: 42px;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .outline_date {
    width: 395.5px;
  }

  .outline_date span {
    width: 430px;
  }
  
  /*PC_講座ジャンル*/
  #genre {
    background-color: #FFF;
  }
  
  .genre_con {
    margin-bottom: 70px;
  }
  
  .genre_con:last-of-type {
    margin-bottom: 95px;
  }
  
  .genre_box {
    width: 1000px;
    height: 293px;
    margin: 0 0 50px 0;
    padding: 0px;
  }
  
  .genre_wrap {
    padding: 0px;
    width: 100%;
  }
  
  .genre_contents {
    width:672px;
  }
  
  #genre .genre_img {
  	width: 293px;
	height: 293px;
	padding: 0;
  }
  
  .genre_text {
    margin-bottom: 15px;
    height: 93px;
    font-size: 13px;
    line-height: 1.8;
  }
  
  .genre_outline_date {
    width: 434.5px;
  }
  
  /*PC_フリースペース*/
  #space {
    width: 100%;
  }

  #space_wrap {
    margin: 30px auto 0 auto;
  }
  
  /*PC_お申し込みの注意点、お申し込み方法*/
  .info-area_box {
    margin-bottom: 35px;
  }
  
  /*PC_footer*/
  footer {
    margin-top: 80px;
    height: 90px;
  }
  #footer_box {
    margin: 0 auto;
    width: 100%;
  }
  
  .copy_01, .copy_02{
    text-align: center;
    font-size: 15px;
  }

  /*PC_トップへ戻る*/
  #top {
    bottom: 20px;
  }
    
  }