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

style.css

*************************************/
h1.h1ttl {
  display: none;
}

/* 終了告知

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

article#main_content .main_img {
	position: relative;
}

article#main_content .main_img p {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	 transform: translate(-50%,-50%);
  color: #fff;
  font-size: 1.8rem;
	border: 3px solid #036eb8;
	border-radius: 2rem;
	padding: 2rem 4rem;
}

article#main_content .main_img img {
	filter: brightness(20%);
}

@media screen and (orientation: portrait) and (max-width: 767px) {
	
	article#main_content .main_img p {
		width: 85%;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
  color: #fff;
  font-size: 1.5rem;
	border: 3px solid #036eb8;
	border-radius: 1.5rem;
	padding: 1rem 1rem;
}
}



/* main_message

============================ */
.main_message_ttl span {
  font-size: 1.2rem;
}
.main_message_txt span.super {
  vertical-align: super;
  font-size: .6rem;
}
.main_message ul {
  margin-top: 2rem;
}
.main_message li {
  padding-left: .9rem;
  text-indent: -.9rem;
  font-size: .9rem;
}
.main_message li::before {
  content: "※";
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .main_message_ttl span {
    font-size: 1rem;
  }
  .main_message li {
    padding-left: .8rem;
    text-indent: -.8rem;
    font-size: .8rem;
  }
}
/* tab_contents

============================ */
.link_wrap .link_list li:nth-of-type(5), .link_wrap .link_list li:nth-of-type(6) {
  visibility: hidden;
}
.tab_wrap h3 {
  margin: 1rem;
  margin-left: 0;
  color: var(--Dark_Sub_Color);
  font-size: 1.6rem;
}
.tab_wrap dl.fee {
  max-width: 30rem;
  margin: 1rem auto;
  padding: 1rem;
  background: #c00;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}
.tab_wrap dl.fee dt::before {
  content: "【";
}
.tab_wrap dl.fee dt::after {
  content: "】";
}
.tab_wrap dl.fee p {
  margin: 0;
}
.tab_wrap dl.fee span {
  color: #ff0;
  font-size: 2rem;
}
[id^="grade_"] > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tab_contents .ebook {
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  text-align: center;
}
.tab_contents .ebook p {
  width: 60%;
  line-height: 1.2;
}
.tab_contents .ebook p a {
  display: block;
  position: relative;
  padding: 1rem 1rem 1rem 0;
  border-radius: 0.5rem;
  background: var(--Main_Color);
  color: #fff;
}
.tab_contents .ebook p a::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: "\f518";
}
.tab_contents .ebook p a:hover {
  opacity: .7;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .tab_wrap {
    margin: 1rem .5rem;
  }
  .tab_wrap h3 {
    margin: 1rem 0;
  }
  .tab_wrap div.fee {
    font-size: 1rem;
  }
  .tab_contents .ebook {
    font-size: 1rem;
  }
  .tab_contents .ebook p {
    width: 94%;
  }
  .tab_contents .ebook p a::after {
    top: calc(50% - 0.5rem);
  }
}
/* lecture

============================ */
.lecture {
  width: 50rem;
  margin: 2em auto;
  border: solid 1px #001545;
}
.lecture .type {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  background: #001545;
  border-bottom: solid 1px #001545;
}
.lecture h4 {
  flex: 1;
  height: auto;
  padding: 0 .5rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.2;
}
.lecture h4 :not(ruby) span {
  font-size: 1rem;
  vertical-align: middle;
}
.lecture h4 span.recommend {
  display: inline-block;
  width: 4rem;
  background: #ffd966;
  color: #000;
  font-size: .8rem;
  text-align: center;
}
.lecture h5 {
  margin-bottom: 1rem;
  color: #999;
  font-size: 1.2rem;
}
.lecture .type ul, .lecture .type ul li {
  margin: 0;
  padding: 0;
}
.lecture .type ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
  height: 3.6rem;
  font-size: .8rem;
}
.lecture .type li {
  width: 3.6rem;
  height: 1.2rem;
  padding: .5rem;
  color: #fff;
  text-align: center;
}
.lecture .type li.type_en {
  background: #f00;
}
.lecture .type li.type_ma {
  background: #00f;
}
.lecture .type li.type_ja {
  background: #008000;
}
.lecture .type li.type_sc {
  background: #954e0f;
}
.lecture .type li.type_hi {
  background: #afa900;
}
.lecture .type li.type_re {
  background: #7d7d7d;
}
.lecture > div:not(.type) {
  margin: 1rem 2rem;
}
.lecture .level {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
}
.lecture .level dl {
  flex: 1;
}
.lecture .level dl dt {
  min-height: 2rem;
  padding: .2rem .5rem;
  background-color: #e9ebf5;
}
.lecture .level dl dd {
  padding: .5rem 1rem;
}
.lecture .level dl:nth-of-type(2) dd {
  color: #c00;
}
.lecture .level dl:not(:last-of-type) dd {
  padding-top: .7rem;
}
.lecture .level dl dd ul {
  display: flex;
  justify-content: flex-start;
  margin: auto;
}
.lecture .level dl dd ul li {
  width: 2.4rem;
  padding: .2rem;
  border: 1px solid #ccc;
  text-align: center;
  opacity: .3;
}
.lecture .level dl dd ul li:nth-of-type(even) {
  width: 1rem;
  padding: .2rem 0;
  border-right: none;
  border-left: none;
}
.lecture .level dl dd ul li.on {
  background-color: #ff0;
  opacity: 1;
}
.lecture .intro {
  text-align: justify;
}
.lecture .intro ol, .lecture .intro ol li {
  margin: 0;
  padding: 0;
}
.lecture .intro ol {
  margin: 0 0 1rem 2rem;
  list-style-type: decimal;
}
.lecture .intro ul.note {
  display: block;
}
.lecture .intro dl {
  margin-bottom: 1rem;
  padding: .2rem;
}
.lecture .intro dt {
  font-size: 1.1rem;
}
.lecture .intro dd {
  margin-bottom: .1rem;
}
.lecture .date dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .2rem;
  background-color: #e9ebf5;
  font-size: .9rem;
}
.lecture .date dt {
  width: 5rem;
  margin: .5rem;
  background: #999;
  color: #fff;
  text-align: center;
}
.lecture .date div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
  margin: 0 !important;
}
.lecture .date dd {
  margin: .1rem;
  line-height: 1;
}
.lecture .date dd span:first-of-type {
  display: inline-block;
  width: 8rem;
}
.lecture .date dd span:nth-of-type(2) {
  display: inline-block;
  padding-left: .5rem;
  color: #c00;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .lecture {
    width: 100%;
    margin: 1rem auto;
  }
  .lecture.oneday_todai {
    width: 96%;
  }
  .lecture h4 :not(ruby) span {
    display: block;
  }
  .lecture h4 span.recommend {
    display: block;
  }
  .lecture h5 {
    font-size: 1.1rem;
  }
  .lecture .type {
    margin-bottom: 0;
  }
  .lecture .type li {
    width: 3rem;
  }
  .lecture div:not(.type) {
    margin: .2rem .2rem 1rem .2rem;
  }
  .lecture .level {
    gap: .2rem
  }
  .lecture .level dl {
    font-size: .9rem;
  }
  .lecture .level dl dd {
    padding: .5rem .2rem;
  }
  .lecture .level dl:not(:last-of-type) dd {
    padding-top: .8rem;
  }
  .lecture .intro p {
    margin: .5rem;
  }
  .lecture .date dt {
    width: 4rem;
  }
  .lecture .date dd span:first-of-type {
    display: inline-block;
    width: 7rem;
  }
}
/* table layout

-------------------------*/
.tableLayout {
  margin: 2rem;
}
.tableLayout h4 {
  margin: 0 auto;
  font-size: 1.1rem;
}
.tableLayout p {
  margin: 0 auto;
  font-size: .9rem;
}
.tableLayout table {
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  margin: 0 auto;
  border: 2px solid #001545;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  table-layout: fixed;
}
.tableLayout table thead tr th {
  z-index: 50;
  padding: .2rem;
  border: 1px solid #fff;
  background-color: #001545;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
}
.tableLayout table tbody tr th, .tableLayout table thead tr th:first-child {
  position: -webkit-sticky;
  position: -ms-sticky;
  position: sticky;
  left: -1px;
  z-index: 100;
  width: 7rem;
  border: 1px solid #fff;
  background-color: #001545;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
}
.tableLayout table td {
  width: 9rem;
  height: 3rem;
  overflow-wrap: break-word;
  padding: .2rem;
  border: 1px solid #001545;
  background: #fff;
  vertical-align: middle;
}
@media all and (-ms-high-contrast:none) {
  .tableLayout table th {
    left: auto !important;
    background-clip: padding-box !important;
  }
  .tableLayout table td {
    background-clip: padding-box !important;
  }
}
@supports (-ms-ime-align:auto) {
  .tableLayout table td, .tableLayout table th {
    background-clip: padding-box !important;
  }
  .tableLayout table thead th {
    border-top: none !important;
  }
  .tableLayout table {
    position: relative;
    z-index: index 10;
  }
}
@-moz-document url-prefix() {
  .tableLayout table td, .tableLayout table th {
    background-clip: padding-box !important;
  }
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .tableLayout {
    margin: 2rem 0;
  }
  .tableLayout table tbody tr th, .tableLayout table thead tr th:first-child {
    width: 4rem;
  }
  /* class4 */
  .tableLayout.class4 table {
    width: 40rem;
  }
  /* class3 */
  .tableLayout.class3 table {
    width: 31rem;
  }
  /* class2 */
  .tableLayout.class2 table {
    width: 22rem;
  }
  /* class1 */
  .tableLayout.class1 table {
    width: 13rem;
  }
}
/* confirm

-------------------------*/
#lec_j1_04 .appli .confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 1rem;
  border: 1px solid #ccc;
}
#lec_j1_04 .appli .confirm input {
  transform: scale(1);
}
#lec_j1_04 .appli .confirm p {
  width: 90%;
  margin: 1rem;
  font-size: 1rem;
}
#lec_j1_04 .appli .confirm p span {
  color: #f00;
}
#lec_j1_04 .appli a.disabled, #lec_j1_04 .appli a.disabled:hover {
  border: none;
  background: #ccc;
  color: #fff;
  cursor: default;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  #lec_j1_04 .appli {
    margin: 0;
  }
  #lec_j1_04 .appli .confirm {
    padding: 0rem;
  }
  #lec_j1_04 .appli .confirm input {
    margin: 1rem;
  }
  #lec_j1_04 .appli .confirm p {
    margin: 1rem;
    font-size: .8rem;
  }
}
/* tt list (kekyu.html)

-------------------------*/
.tt_list {
  margin-bottom: 3rem;
}
.tt_list h4 {
  margin: 0 auto;
  font-size: 1.2rem;
}
.tt_list h4::before {
  content: "●";
}
.tt_list p {
  margin: 0 auto;
  padding-left: 1rem;
  font-size: 1rem;
}
.tt_list div {
  display: flex;
  justify-content: flex-start;
}
.tt_list dl {
  height: auto;
  margin: 1rem .5rem;
  padding: 0;
  font-size: .8rem;
}
.tt_list dt {
  padding: .5rem;
  background-color: #001545;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
}
.tt_list dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.5rem;
  border-right: 2px solid #001545;
  border-left: 2px solid #001545;
  border-bottom: 1px solid #001545;
}
.tt_list dd:last-of-type {
  border-bottom: 2px solid #001545;
}
.tt_list dd span {
  display: block;
}
.tt_list dd span:nth-of-type(1) {
  margin-right: .5rem;
  text-decoration: underline;
}
.tt_list dd span:nth-of-type(2) {
  width: 10.5rem;
  margin-left: auto;
  text-align: right;
}
.tt_list ul {
  display: block;
}
.tt_list li::before {
  content: "※";
}
.tt_list li {
  width: 100% !important;
  padding-left: 1rem;
  text-indent: -1rem;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .tt_list p {
    font-size: .9rem;
  }
  .tt_list div {
    display: block;
  }
  .tt_list dd span:nth-of-type(1) {
    text-decoration: none;
  }
  .tt_list ul {
    width: 100%;
  }
  .tt_list li {
    padding-left: .8rem;
    text-indent: -.8rem;
    font-size: .8rem;
  }
}