/***************************************

jh1.css

***************************************/ 
:root {
  --Spring_Main_Color: #44546a;
  --Spring_Jh1_En_Color: #dc0000;
  --Spring_Jh1_Mt_Color: #2f8ad0;
}

h1.p_title {
    position: relative;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: .2rem;
    line-height: 3rem;
    color: #036eb8;
    margin: 4rem auto 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1.p_title::before,
h1.p_title::after {
    background-color: #036eb8;
    content: "";
    height: 2px;
    width: 100px;
}

h1.p_title::before {
    margin-right: 2rem;
}

h1.p_title::after {
    margin-left: 2rem;
}

.br_sp {display: none}
.br_pc {display: block}


section h2 {
  padding: 0.5rem 1rem;
  border: 2px solid var(--Dark_Sub_Color);
  color: var(--Dark_Sub_Color);
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
  font-size: 1.6rem;
}
.main_message {
  padding-bottom: 0rem;
}

.lead_message p:first-of-type {
	margin: 1.5rem 0 .5rem;
    color: #036eb8;
}

section h2 {
	    padding: 0.5rem 1rem;
    border: 2px solid #036eb8;
    color: #036eb8;
    font-weight: 900;
    font-family: var(--Font_Weight_Bold);
    font-size: 1.6rem;
}

.cta_orange {
	display: flex;
    justify-content: center;
    width: 450px;
    margin: 0 auto;
}

.cta_orange a {
	background: #FF7C2F;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 50px;
    margin: 1rem auto;
    padding-right: 15px;
    border-radius: 25px;
    color: #fff;
    font-weight: 900;
    font-family: var(--Font_Weight_Bold);
    font-size: 20px;
    text-align: center;
    line-height: 150%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.cta_orange a::after {
	position: absolute;
    top: calc(45% - 10px);
    right: 15px;
    width: auto;
    height: auto;
    border: none;
    line-height: 1;
    font-weight: 900;
    font-family: var(--Font_Awesome);
    content: var(--Arrow_Right);
}

.contact_banner .button dl dd a {
	background: #FF7C2F;
}


@media screen and (orientation: portrait) and (max-width: 767px) {
    
    h1.p_title {
        font-size: 1.3rem;
        text-align: center;
        margin: 3rem auto 3rem;
    }
    
    h1.p_title::before,
h1.p_title::after {
    height: 1px;
    width: 50px;
}

h1.p_title::before {
    margin-right: 1rem;
}

h1.p_title::after {
    margin-left: 1rem;
}
    
	
	.br_sp {display: block}
.br_pc {display: none}
	
  section h2 {
    font-size: 1.2rem;
  }
	
	.cta_orange {
	width: 80%;
    margin: 0 auto;
	}
	
	
}





/* feature

============================ */
section.feature > div {
  width: 90%;
  margin: auto;
	letter-spacing: .1rem;
}
section.feature > div > p {
  font-size: 1.2rem;
}
section.feature .feature_list {
  display: flex;
  align-items: center;
  width: 100%;
}
section.feature .feature_list dt {
  display: block;
  height: 4rem;
  width: 4rem;
  margin-right: 2rem;
  border-radius: 50%;
  background: #036eb8;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  line-height: 4rem;
}
section.feature .feature_list dd {
  flex: 1;
}
section.feature .feature_list dd p {
  text-align: justify;
}
section.feature .feature_list dd p:first-child {
  color: #036eb8;
  font-size: 1.4rem;
  line-height: 1.2;
}
section.feature ul.note {
  text-align: right;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  section.feature > div {
    width: 96%;
  }
  section.feature .feature_list {
    display: flex;
    align-items: flex-start;
  }
  section.feature .feature_list dt {
    display: block;
    height: 3rem;
    width: 3rem;
    margin-top: 1rem;
    margin-right: 1rem;
    font-size: 1.6rem;
    text-align: center;
    line-height: 3rem;
  }
  section.feature .feature_list dd p:first-child {
    font-size: 1.2rem;
  }
  section.feature ul.note {
    text-align: justify;
  }
}
/* introduction

============================ */
section.introduction .tab_wrap {
  width: 90%;
  margin: auto;
}
section.introduction .tab_wrap > p {
  text-align: center;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}
section.introduction .tab_wrap > p::before, section.introduction .tab_wrap > p::after {
  content: "▼";
}
section.introduction .tab_group {
  width: 100%;
  margin: 0;
}
section.introduction .tab_group li {
  position: relative;
  padding-right: 1rem;
}
section.introduction .tab_group li::after {
  position: absolute;
  top: calc(50% - 0.6rem);
  right: 1rem;
  width: auto;
  height: auto;
  border: none;
  line-height: 1;
  font-weight: 900;
  font-family: var(--Font_Awesome);
  content: var(--Arrow_Down);
}
section.introduction .tab_group #en.tab_active {
  background-color: #ec6d81;
}
section.introduction .tab_group #mt.tab_active {
  background-color: #02a3c2;
}

section.introduction .tab_contents {
	letter-spacing: .1rem;
}

section.introduction .subject_point {
	display: flex;
	margin-bottom: 3rem;
}

section.introduction .subject_point .left_conte {
	width: 30%;
	margin-right: 2rem;
}

section.introduction .subject_point .left_conte figure {
	width: 100%;
	
}

section.introduction .subject_point .left_conte figure img {
	width: inherit;
}

section.introduction .en .subject_point dl.title {
	background-color: #ec6d81;
	color: #fff;
	padding: .3rem 1rem .5rem;
}

section.introduction .mt .subject_point dl.title {
	background-color: #02a3c2;
	color: #fff;
	padding: .3rem 1rem .5rem;
}

section.introduction .subject_point dl.title dt {
	font-size: 1.6rem;
	font-weight: 600;
}

section.introduction .subject_point dl.title dt span {
	font-size: .8rem;
	margin-left: 1rem;
}

section.introduction .subject_point dl.title dd {
	font-size: 1.1rem;
}

section.introduction .subject_point dl.outline {
	width: 70%;	
}

section.introduction .en .subject_point dl.outline dt {
	font-size: 1.1rem;
	color: #ec6d81;
	margin-bottom: 1rem;
}

section.introduction .mt .subject_point dl.outline dt {
	font-size: 1.1rem;
	color: #02a3c2;
	margin-bottom: 1rem;
}


@media screen and (orientation: portrait) and (max-width: 767px) {
  section.introduction .tab_wrap {
    width: 100%;
  }
	
	section.introduction .tab_contents {
		margin: 0 auto;
		width: 100%;
	}
	
	section.introduction .subject_point {
	display: block;
		margin-bottom: 2rem;
}
	
	section.introduction .subject_point .left_conte {
	width: 100%;
	margin-right: 0rem;
}
	
	section.introduction .subject_point dl.outline {
	width: 90%;	
		margin: 1rem auto;
}
  
}

/* course

============================ */

.en section.course .course_title {	
	border-left: 10px solid var(--Main_Color);
	margin-bottom: 2rem;
	padding: .5rem 0 .5rem 1rem;
	background: repeating-linear-gradient(45deg,#fad8d9, #fad8d9 2px, #fff 2px, #fff 5px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mt section.course .course_title {	
	border-left: 10px solid var(--Main_Color);
	margin-bottom: 2rem;
	padding: .5rem 0 .5rem 1rem;
	background: repeating-linear-gradient(45deg,#c6e7ef, #c6e7ef 2px, #fff 2px, #fff 5px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section.course .course_title h3 {
	font-size: 1.3rem;
	color: var(--Main_Color);
	font-weight: bold;
  font-family: var(--Font_Weight_Bold);	
	text-shadow: #fff 2px 2px;
}

section.course .course_title p.advanced {
	font-size: 1.2rem;
	margin: 0 .5rem 0 0rem;
	padding: .5rem;
	background-color: #08a49d;
	border-radius: 5px;
	color: #fff;
}

section.course .course_title p.standard {
	font-size: 1.2rem;
	margin: 0 .5rem 0 0rem;
	padding: .5rem;
	background-color: #FF9849;
	border-radius: 5px;
	color: #fff;
}

section.course .course_conte {
	display: flex;
}

section.course .course_conte .detail {
	flex: 1;
}

.en section.course .course_conte .detail h5 {
	color: #ec6d81;
	font-size: 1.1rem;
}

.mt section.course .course_conte .detail h5 {
	color: #02a3c2;
	font-size: 1.1rem;
}

section.course .course_conte .detail p {
	text-align: justify;
}

section.course .course_conte .chart {
	width: 310px;
	margin-left: 3rem;
}

section.course .course_conte .chart dl {
	width: 100%;
	display: flex;
	font-size: 1rem;
	border: 1px solid #fff;
}

.en section.course .course_conte .chart dl dt {
	background-color: #ec6d81;
	padding: .5rem 0 .5rem 0;
	color: #fff;
	width: 80px;
	text-align: center;
}

.mt section.course .course_conte .chart dl dt {
	background-color: #02a3c2;
	padding: .5rem 0 .5rem 0;
	color: #fff;
	width: 80px;
	text-align: center;
}

.en section.course .course_conte .chart dl dd {
	background-color: #fdecec;
	padding: .5rem 1rem;
	flex: 1;
}

.mt section.course .course_conte .chart dl dd {
	background-color: #e8f2f7;
	padding: .5rem 1rem;
	flex: 1;
}

section.course .course_conte p.asta {
	font-size: .9rem;
	text-indent: -1.5rem;
	margin-left: 1.5rem;
}

section.course .course_conte p.asta::before {
	content: "※";
	margin-right: .5rem;
}

@media screen and (orientation: portrait) and (max-width: 767px) {
	
	section.course .course_conte {
	display: block;
		width: 90%;
		margin: 0 auto;
}
	
	section.course .course_conte .chart {
	width: 100%;
	margin-left: 0;
		margin-bottom: 1rem;
}
	
}


/* curriculum

============================ */

.curriculum .accordion .lec_status {
	cursor: pointer;
    color: #036eb8;
}

.curriculum .accordion .lec_status::after {
	padding-left: 1rem;
    font-family: var(--Font_Awesome);
    content: "\f107";
    font-weight: 900;
}

.curriculum .accordion .acd_active .lec_status::after {
	padding-left: 1rem;
    font-family: var(--Font_Awesome);
    content: "\f106";
    font-weight: 900;
}

.curriculum .accordion .acd_header {
		margin-top: 1rem;
	}

.curriculum .acd_contents p {
	margin: 0;
}

.curriculum .acd_contents > p {
	font-size: .9rem;
}

.curriculum .acd_contents .period {
	margin: 1rem 0 3rem;;
	display: flex;
	border-bottom: 1px solid #555;
	padding-bottom: 1rem;
}

.curriculum .acd_contents .period > p {
	margin-right: 2rem;
	margin-top: .5rem;
}

.curriculum .acd_contents .period dl:nth-child(1) dt  {
	background-color: #FFE9E9;
}

.curriculum .acd_contents .period dl:nth-child(2) dt  {
	background-color: #FFF9EF;
}

.curriculum .acd_contents .period dl:nth-child(3) dt  {
	background-color: #ECFFEB;
}

.curriculum .acd_contents dl {
	display: flex;
	border-top: 1px solid #555;
	padding-top: 1rem;
	margin-top: 1rem;
}

.curriculum .acd_contents dl dt {
	width: 100px;
	padding: .3rem .5rem;
}

.curriculum .acd_contents dl dd ul.date_time li.day {
	display: flex;
	justify-content: space-between;
}

.curriculum .acd_contents dl dd ul.date_time li.day p {
	padding: 0 1rem 0 2rem;
}

.curriculum .acd_contents dl dd ul.date_time span.asta_red {
	font-size: .9rem;
	color: red;
	margin-right: .5rem;
}

.curriculum .acd_contents dl dd ul.date_time span.f_blue {
	color: #036eb8;
	font-weight: bold;
}

.curriculum .acd_contents dl dd ul.date_time li.day p:not(:last-child) {
	border-right: 1px solid #555;
}

.curriculum .acd_contents dl dd ul.date_time li.time {
	margin: 1rem 0 0 2rem;
	padding-top: 1rem;
	border-top: 1px solid #555;
	border-style: dotted;
}



@media screen and (orientation: portrait) and (max-width: 767px) {
	
	.curriculum .acd_contents {
		width: 90%;
		margin: 0 auto;
	}
	
	.curriculum .accordion .acd_header {
		margin-top: 2rem;
		text-align: center;
	}
	
	.curriculum .acd_contents .period {
	display: block;
}
	
	.curriculum .acd_contents dl dt {
	width: 30px;
}
	
	.curriculum .acd_contents dl dd ul.date_time li.day p {
	padding: 0 .6rem;
		text-align: center;
}
	
	.curriculum .acd_contents dl dd ul.date_time li.time {
	margin: .5rem 0 0 .5rem;
	padding-top: .5rem;
}
	
}


/* fee

============================ */

section.fee > div {
	width: 90%;
    margin: 1.5rem auto 2.5rem;
    letter-spacing: .1rem;
}

section.fee > div > dl.tttl_btn {
	display: flex;
	align-items: center;
}

section.fee dl.tttl_btn dt {
	display: flex;
	align-items: center;
	margin-right: 4rem;
}

section.fee dl dt .number {
 width: 4rem;
	height: 4rem;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 background:#036eb8;
 text-align:center;
	font-size: 2rem;
	margin-right: 1.5rem;
}

section.fee dl dt p {
	font-size: 1.8rem;
	font-weight: bold;
	margin: .5rem 0;
}

section.fee .Application_btn a {
	background: #FF7C2F;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 50px;
    margin: .5rem 0;
    padding: 0 5rem;
    border-radius: 25px;
    color: #fff;
    font-weight: 900;
    font-family: var(--Font_Weight_Bold);
    font-size: 1.2rem;
    text-align: center;
    line-height: 150%;
}

section.fee .Application_btn a:hover {
	opacity: .5;
}

section.fee .Application_btn a::after {
	position: absolute;
    top: calc(45% - 10px);
    right: 15px;
    width: auto;
    height: auto;
    border: none;
    line-height: 1;
    font-weight: 900;
    font-family: var(--Font_Awesome);
    content: var(--Arrow_Right);
}

section.fee div dl.deadline {
	margin-top: 2rem;
	margin-left: 5.5rem;
	border: 10px solid #deebf7;
	padding: .5rem 2rem 1.5rem;
	width: fit-content;
}

section.fee div dl.deadline dt {
	font-size: 1.2rem;
	font-weight: bold;
}

section.fee div p.caution {
	color: #036eb8;
	margin: 2rem 0 0 10.5rem;
	text-indent: -5.5rem;
}

section.fee span.red {color: red; font-weight: bold;}
section.fee span.font_l {font-size: 2rem; font-weight: bold; margin: 0 .5rem;}

section.fee div .tuition {
	margin-left: 5.5rem;
	display: flex;
}

section.fee div .tuition p {
	margin: 0;
	text-align: justify;
	 flex: 1;
}

section.fee div .tuition figure {
	margin-left: 3rem;
	width: auto;
	color: #036eb8;
}

section.fee div .tuition figure p.fee_name {
	margin-bottom: 5px;
}

section.fee div .tuition figure p.asta {
	font-size: .9rem;
	text-align: right;
}

section.fee div .tuition figure dl {
	display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 5px;
	margin-bottom: 5px;
}

section.fee div .tuition figure p.fee_name,
section.fee div .tuition figure dl dt,
section.fee div .tuition figure dl dd {
	border: 1px solid #036eb8;
	padding: .2rem 1.5rem;
	font-size: 1.1rem;
}

section.fee div .tuition figure dl dt {
	background-color: #deebf7;
}




@media screen and (orientation: portrait) and (max-width: 767px) {
	
	section.fee > div {
    margin: 1rem auto 2rem;
}
	
	section.fee > div > dl.tttl_btn {
	display: block;
}
	
	section.fee dl.tttl_btn dt {
	margin-right: 0rem;
}
	
	section.fee dl dt {
		margin-right: 0rem;
		margin-bottom: 0rem;
	}
	
	section.fee dl dt .number {
	width: 3rem;
	height: 3rem;
	font-size: 1.8rem;
	margin-right: 1rem;
}
	
	section.fee dl dt p {
	font-size: 1.6rem;
	margin: .5rem 0;
}
	
	section.fee .Application_btn a {
    height: 60px;
	margin: 0rem 0 0 0rem;
    padding: 0 0rem;
}
	
	section.fee div dl.deadline {
		margin-top: 1rem;
	margin-left: 0rem;
	padding: .2rem 1rem 1rem;
}
	
	section.fee div dl.deadline dt {
	font-size: 1.1rem;
		text-align: center;
}
	
	section.fee div dl.deadline dd {
		text-align: center;
	}
	
	section.fee div p.caution {
	font-size: .9rem;
	margin: 1rem 0 0 .2rem;
	text-indent: 0rem;
}
	
	section.fee span.font_l {font-size: 1.8rem; font-weight: bold; margin: 0 .2rem;}
	
	section.fee div .tuition {
	margin-left: 0rem;
	display: block;
}
	
	section.fee div .tuition figure {
		width: 90%;
	margin: 1rem auto 0rem;
}

}


/* route_g

============================ */

.route_g {
    margin-top: 3rem;
}

.route_g h4 {
    font-size: 1rem;
    padding: .5rem 0 .5rem 1rem;
  color: #fff;
  background: var(--Main_Color);
    letter-spacing: .05rem;
}

.route_g > p {
  padding: .5rem 0 .5rem 1rem;
  color: #fff;
  background: #999;
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
  font-size: 1.2rem;
    margin: 0rem 0rem 1rem;
}

.route_g > dl,
.route_g > div {
  display: flex;
  width: 96%;
  margin: 2rem auto;
}

.route_g > dl dt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1rem;
  border-right: 2px solid #999;
}

.route_g > dl dt ruby {
  padding-bottom: .5rem;
  color: var(--Main_Color);
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
  font-size: 2rem;
  ruby-position : under;
}

.route_g > dl dt ruby rt {
  ruby-position : under;
  font-size: .6rem;
}

.route_g > dl dd {
  flex: 1;
  padding-left: 1rem;
}

.route_g > dl dd p {
  margin: .2rem 0;
}

.route_g > dl dd p:last-of-type {
  color: var(--Main_Color);
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
}

.route_g > div > p {
  flex: 1;
  margin: 0;
  text-align: justify;
	line-height: 1.8rem;
}

.route_g > div > dl {
  width: 25rem;
  padding-left: 2rem;
}

.route_g > div > dl > dt {
  padding: .2rem;
  background: var(--Main_Color);
  color: #fff;
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
  text-align: center;
}

.route_g > div > dl > dd {
  padding: 1rem .5rem;
  border: 1px solid var(--Main_Color);
}

.route_g > div > dl > dd p {
  margin: 0;
  font-weight: 900;
  font-family: var(--Font_Weight_Bold);
  text-align: center;
}

.route_g > div > dl > dd dl {
  display: flex;
  flex-wrap: wrap;
  padding-top: .5rem;
}

.route_g > div > dl > dd dl dt {
  width: 100%;
  color: var(--Main_Color);
}

.route_g > div > dl > dd dl dt span {
  color: #666;
  font-size: .8rem;
}

.route_g > div > dl > dd dl dt::before {
  content: "●";
}

.route_g > div > dl > dd dl dd {
  width: 50%;
  font-size: .8rem;
}

.route_g > div > dl > dd dl dd::before {
  content: "・";
}



@media screen and (orientation: portrait) and (max-width: 767px){
    
    .route_g h4 {
    font-size: .95rem;
    padding: .3rem 0 .3rem 1rem;
    letter-spacing: 0rem;
}
	
	.route_g > div > dl > dt {
		margin-top: 1.5rem;
	}

  .table .subject div > dd dl dt {
    padding: .5rem 1rem;
    border-right: none;
	  background-color: #deebf7;
	  width: 100%;
	  margin-bottom: .5rem;
  }

  .table .subject div > dd dl dd {
    padding-top: 0;
    font-size: .9rem;
  }

  ul:has(.appli) {
    display: block;
    padding-bottom: 2rem;
  }

  .route_g > dl,
  .route_g > div {
    display: block;
	  margin: 1rem auto;
  }

  .route_g > dl dt {
    padding-right: 0;
    border-right: none;
  }

  .route_g > dl dd {
    padding-left: 0;
  }
	
	.route_g > dl dd p {
  margin: .8rem 0;
		text-align: justify;
}

  .route_g > div > p {
    font-size: 1rem;
	  line-height: 1.6rem;
  }

  .route_g > div > dl {
    width: 90%;
    margin: 1rem auto 0;
    padding-left: 0;
  }
	
	.route_g > div > dl > dd dl {
  display: block;
		width: fit-content;
		margin: 0 auto;
}
	
	.route_g > div > dl > dd dl dd {
  width: 100%;
  font-size: 1rem;
}
  
}


/* jh1

============================ */
p.jh1 {
  text-align: right;
}
p.jh1 a::after {
  padding-left: .5rem;
  font-weight: 900;
  font-family: var(--Font_Awesome);
  content: var(--Arrow_Right);
}

@media screen and (orientation: portrait) and (max-width: 767px) {
	
	p.jh1 {
		margin-right: 1rem;
	}
}

/* contact_btn

============================ */
.contact_banner.phone .phone_ikebukuro {
  display: none;
}