/***************************************
style.css
***************************************/
.br_sp {display: none;}
.br_pc {display: block;}

section + section {
  margin: 4rem auto;
}


.middle_banner {
  padding-top: 2rem;
}

.pagelink_list li.link a {
	display: block;
    position: relative;
    padding: .5rem 2rem;
    border: 0px solid var(--Main_Color);
    color: var(--Main_Color);
    font-size: 1.2rem;
}
.pagelink_list li.link a::after {
	display: none;
}

/*--------------
SP
----------------*/
@media screen and (orientation: portrait) and (max-width: 767px){
	
	.br_sp {display: block;}
.br_pc {display: none;}

  #main_content > section {
    width: 96%;
    margin-right: auto;
    margin-left: auto;
  }


  ul.box.col2 + ul {
    margin-top: 0;
  }

  ul.box.col2:last-of-type li {
    margin-bottom: 0
  }

  .plan_course_box .box.col2 {
    flex-wrap: wrap;
  }

  .plan_course_box .box.col2 li {
    width: 100%;
    margin-bottom: 2rem;
  }


  .plan_detail {
    margin-bottom: 4rem;
  }

  .plan_detail .h4ttl {
    margin: 1rem 0 .5rem;
  }

  .plan_arrow::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border: 50px solid transparent;
    border-top-color: rgba(0,94,177,.2);
    border-bottom-width: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "";
  }

  .plan_course_box {
    margin-top: 1rem;
    padding: 1rem;
  }


  .grade-j1_info {
    width: 90%;
    margin: 0 auto 10% auto;
    padding: 5%;
    background-color: #7e7175; color:#fff;
  }

  .grade-j1_info .inbox {
    width: 90%;
    margin: 0 auto;
    padding: 5px;
    border: #fff 1px solid;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
  }

  .grade-j1_info .p1 {
    font-size: 1.2rem;
  }

  .grade-j1_info .p2 {
    font-size: .8rem;
  }

}


/* 受講キャンペーン
============================*/ 
.campaign_box {
  margin-bottom: 2rem;
  border: #3370ba 2px solid;
  background: #fff;
  color: #333;
}

.campaign_box .campaign_ttl {
  display: block;
  margin: 0 auto 1rem;
  padding: 0.3rem 1rem;
  background: #3370ba;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
}

.campaign_box .campaign_ttl .sp {
  display: none;
}

.campaign_box .campaign_txt {
  margin: 1em auto;
  color: rgb(195, 75, 0);
  font-weight: bold;
  font-size: 1.4rem;
  font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", sans-serif;
}

.campaign_box .campaign_item {
  display: table;
  margin: 0 auto 1rem;
  font-size: 1.6rem;
}

.campaign_box .campaign_item li {
  padding-left: 1rem;
  text-indent: -1rem;
}

.campaign_box .campaign_txt span, .campaign_box .campaign_item li span {
  padding: 2px;
  background: linear-gradient(transparent 70%, #fae606 60%);
  color: #a00d0d;
  font-weight: bold;
  font-size: 1.1rem;
}

.campaign_box .note {
  margin-left: 1rem;
}

.campaign_detaillink a {
  display: table;
  margin: 1rem auto;
  padding: 0.5rem 2rem;
  border-radius: .5rem;
  background: #3370ba;
  color: #fff;
  font-size: 1.4rem;
}

@media screen and (orientation: portrait) and (max-width: 767px){
  .campaign_box {
    margin: 1.2rem 0;
    padding: 0;
  }
  .campaign_box .campaign_ttl {
    display: block;
    margin: 0 auto 1em;
    padding: 0.3em 1em;
    font-size: 1.4rem;
  }
  .campaign_box .campaign_ttl .sp {display: block;}
  .campaign_box .campaign_txt {
    margin: 0 7rem;
    font-size: 1rem;
    text-align: center;
  }
  .campaign_box .campaign_item {
    display: table;
    margin: 0 .7rem 1rem;
    font-size: 1.2rem;
  }
  .campaign_box .note {
    margin-left: 0;
  }
}

/* Information
============================*/
.info_box {
  width: 90%;
  margin: 2rem auto;
  padding: 1rem;
  border: #3370ba 2px solid;
}

.info_box dt {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0 .5rem;
  font-size: 1.4rem;
  background-color:#ff0;
}

.info_box dd p.info_title {
  font-size: 1.2rem;
  color: var(--Dark_Sub_Color);
  font-weight: bold;
}

.info_box p span.caution {
  color: #f00;
  font-weight: bold;
}

.info_box > p {
  margin: 0;
}

@media screen and (orientation: portrait) and (max-width: 767px){
  .info_box {
    width: 96%;
  }

  .info_box dt {
    font-size: 1.2rem;
  }

  .info_box dd p.info_title {
    font-size: 1rem;
  }

}



/* support pack
============================*/ 
.support_pack h4 {
  font-size: 1.4rem;
  color: var(--Dark_Sub_Color);
}

.support_pack h4 + p {
  font-size: 1.2rem;
}

.support_pack .switch  {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.support_pack .switch dt {
  width: 20rem;
  height: 4rem;
  margin: .5rem;
  padding: .5rem 2rem .5rem .5rem;
  color: #fff;
  font-size: 1.4rem;
  background:
    linear-gradient(45deg,  transparent 0, var(--Dark_Sub_Color) 0),
    linear-gradient(135deg, transparent 0, var(--Dark_Sub_Color) 0),
    linear-gradient(225deg, transparent 50%, var(--Dark_Sub_Color) 50%),
    linear-gradient(315deg, transparent 50%, var(--Dark_Sub_Color) 50%);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  line-height: 3rem;
}

.support_pack .switch dd p {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}

.support_pack > .note {
  margin-bottom: 2rem;
}



@media screen and (orientation: portrait) and (max-width: 767px){

  .support_pack th:nth-of-type(1) {
    width: 7rem;
  }

  .support_pack .switch  {
    display: block;
  }

  .support_pack .switch dt {
    width: 100%;
    height: 2rem;
    margin: 0;
    padding: .5rem;
    font-size: 1.1rem;
    line-height: 1.3rem;
    background-size: 100%;
    text-align: center;
  }

  .support_pack .switch dd {
    margin: 0;
    padding: 1rem;
    border: #8b0910 2px solid;
  }

  .support_pack .switch dd p {
    font-size: 1rem;
  }

}



/* course
============================*/ 

#course span.pc {
  display: inline;
}

#course span.none {
  display: none;
}

#course .note li {
  text-align: justify;
}


@media screen and (orientation: portrait) and (max-width: 767px){

  #course span.sp {
    display: inline;
  }

  #course span.pc {
    display: none;
  }

  #course span.none {
    display: none;
  }

}


/* recommend_plan
============================*/ 

.plan_detail h4 {
  color: var(--Dark_Sub_Color);
  font-size: 1.2rem;
}

.rcmd_table {
  width: 100%;
  min-height: 10rem;
  text-align: center;
}

.rcmd_table th, .rcmd_table td {
  border: 3px solid #fff;
  vertical-align: middle;
}

.rcmd_table thead th {
  border: none;
  background-color: #fff;
  color: var(--Dark_Sub_Color);;
  font-size: 1rem;
}

.rcmd_table thead th:first-of-type {
  background-color: #fff;
}

.rcmd_table tbody th {
  padding: 1rem 0;
  background-color: var(--Dark_Sub_Color);;
  color: #fff;
  font-size: 1rem;
}

.rcmd_table.sub5 tbody th {
  width: 5%;
}

.rcmd_table.sub4 tbody th {
  width: 17%;
}

.rcmd_table.sub4_th2 tbody th {
  width: 10;
}

.rcmd_table.sub3 tbody th {
  width: 19%;
}

.rcmd_table tbody td {
  padding:.5rem 0;
  border-radius: 1.2rem;
  background-color: #deebf7;
  font-size: .8rem;
}

.rcmd_table.sub5 tbody td {
  width: 19%;
}

.rcmd_table.sub4 tbody td {
  width: 21%;
}

.rcmd_table.sub4_th2 tbody td {
  width: 20%;
}

.rcmd_table.sub3 tbody td {
  width: 27%;
}

.rcmd_table tbody td span {
  font-weight: bold;
  font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", sans-serif;
}

.rcmd_table tbody td span::before {
  content: "[";
}

.rcmd_table tbody td span::after {
  content: "]";
}

.rcmd_table tbody td.no_content {
  background-color: #eee;
}

.rcmd_table + ul {
  padding-bottom: 2rem;
  font-size: .7rem;
}


@media screen and (orientation: portrait) and (max-width: 767px){

  .rcmd_table {
    font-size: .7rem;
    writing-mode: vertical-lr;
  }
  
  .rcmd_table tbody th, .rcmd_table tbody td {
    writing-mode: horizontal-tb;
  }
  
  .rcmd_table tbody th {
    min-height: 2rem;
    max-height: 4rem;
    font-size: .8rem;
  }
  
  .rcmd_table tbody td {
    min-height: 4rem;
    max-height: 8rem;
  }

  .rcmd_table thead th {
    font-size: .8rem;
  }
  
}



span.later {
  color: #aaa;
}



/* course_table
============================*/ 

.course_table.plan thead tr th:nth-of-type(1) {
  width: 15%;
}

.course_table.plan thead tr th:nth-of-type(2) {
  width: 45%;
}

.course_table.plan thead tr th:nth-of-type(3) {
  width: 20%;
}

.course_table.plan thead tr th:nth-of-type(4) {
  width: 20%;
}

.course_table.plan dt::before {
  content: "【";
}

.course_table.plan dt::after {
  content: "】";
}

.course_table.plan dd {
  margin-left: 1rem;
}

.course_table.plan tbody tr td:nth-of-type(3) {
  text-align: center;
}

.course_table.plan tbody tr td:nth-of-type(4) {
  text-align: center;
}



/* certificate
============================*/

#certificate h3 {
  margin: 2rem 0 .5rem 0;
  font-size: 1.4rem;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
}

#certificate h3::before {
  content: "■";
}

#certificate section + section {
  margin: 3rem auto;
}

#certificate section > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#certificate section > div p {
  width: 60%;
  margin: 1rem 2rem;
}

#certificate section > div img {
  width: 30%;
  margin: 0;
}

#certificate iframe {
  display: block;
  width: 450px;
  margin: 1rem auto;
  aspect-ratio: 16 / 9;
}

#certificate section > div dl {
  margin: 0 0 2rem 0;
}

#certificate section > div dl dt {
  margin: .5rem 0;
  font-size: 1.2rem;
  color: #00578A;
}

/* 近日公開 */

#certificate .soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  margin: 1rem auto;
  aspect-ratio: 16 / 9;
  border: 1px solid #ccc;
 color: #ccc;
}





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

  #certificate h3 {
    font-size: 1.2rem;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
  }

  #certificate section > div {
    display: block;
    width: 100%;
  }

  #certificate section > div p {
    width: 100%;
    margin: 0;
  }
  
  #certificate section > div img {
    display: block;
    width: 70%;
    margin: 0 auto 1rem auto;
  }

  #certificate iframe {
    margin: auto;
    width: 90%;
  }

  #certificate section > div dl dt {
    font-size: 1rem;
  }

  /* 近日公開 */

  #certificate .soon {
    margin: auto;
    width: 90%;
  }

}




/* middle_banner
============================*/

.middle_banner {
  padding-top: 2rem;
}

.middle_banner .contact_banner {
  z-index: 1;
}

.middle_banner.small .inner .button dl:last-of-type,
.middle_banner.small .inner .what_can,
.middle_banner.small .inner .flow {
  display: none;
}

.middle_banner.small .contact_banner .button {
  align-items: end;
}

.middle_banner.small .contact_banner .button dl.first_btn {
  width: auto;
  padding-bottom: 0;
}

.middle_banner.small .contact_banner .button dl.first_btn::after {
  background-image: none;
}

.middle_banner.small .contact_banner .button dl.first_btn dt br {
  display: block;
}

/* route_g
============================*/

.pagelink_list li.route_g a {
  background-color: var(--Main_Color);
  color: #fff;
}

.pagelink_list li.route_g a::after {
  content: "\f105";
}

/* ebook
============================*/

.pagelink_list li.ebook a {
  background-color: var(--Main_Color);
  color: #fff;
}

.pagelink_list li.ebook a::after {
  content: "\f518";
}



/* contact banner
============================*/

.contact_banner.phone .phone_ikebukuro {
  display: none;
}