/*****************************************************************************
CSS only for academy news
*****************************************************************************/

img {
  max-width: 100%;
  height: auto;
}

.Page--white .CategoryNav {
  border-bottom: 1px solid #D6D6D6;
}
.Page__title > span {
  display: block;
}

.Container {
  max-width: 976px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Container {
    margin: 0 20px;
  }
}

/* InfoList
-----------------------------------------*/
.News {
  margin-top: 65px;
}

.InfoList {
  border-top: 1px solid #d6d6d6;
}

.InfoList__link {
  display: grid;
  grid-template-areas: "imgArea textArea" "imgArea leadArea";
  grid-template-columns: 217px 1fr;
  grid-template-rows: max-content 1fr;
  gap: 10px 30px;
  margin-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (max-width: 767px) {
  .InfoList__link {
    grid-template-areas: "imgArea textArea" "leadArea leadArea";
    grid-template-columns: 35% 1fr;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
  }
}

a.InfoList__link:link    { color: #000; text-decoration: none; }
a.InfoList__link:visited { color: #000; text-decoration: none; }
a.InfoList__link:hover   { color: #000; text-decoration: none; opacity: 0.8; }
a.InfoList__link:focus   { color: #000; text-decoration: none; opacity: 0.8; }
a.InfoList__link:active  { color: #000; text-decoration: none; opacity: 0.8; }

.InfoList__text {
  grid-area: textArea;
}
.InfoList__title {
  margin-bottom: 10px;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  .InfoList__title {
    margin-bottom: 0;
    font-size: 3.75vw;
  }
}
@media screen and (max-width: 320px) {
  .InfoList__title {
    font-size: 14px;
  }
}
.InfoList__date {
  color: #999;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.InfoList__lead {
  grid-area: leadArea;
  font-size: 16px;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .InfoList__lead {
    font-size: 14px;
  }
}

.InfoList__img {
  grid-area: imgArea;
}
.InfoList__img img {
  border: 1px solid #d6d6d6;
}

/* Title
-----------------------------------------*/
.SecTitle {
  margin-bottom: 39px;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: var(--color-primary01);
  color: #fff;
  font-size: 20px;
}
.SecTitle > span {
  display: inline-block;
  position: relative;
  padding-left: 16px;
}
.SecTitle > span::before {
  content: '';
  display:inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 5px;
  height: 67%;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .SecTitle > span::before {
    width: 4px;
  }
}

.SubTitle {
  position: relative;
  margin: 3em 0 1.4em;
  padding: 2px 0 2px 19px;
  font-size: 20px;
}
.SubTitle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-primary01);
}

.CatTitle {
  margin: 1.5em 0 .4em;
  color: var(--color-primary01);
  font-size: 18px;
  font-weight: bold;
}

/* Content
-----------------------------------------*/
.Content {
  padding: 0 80px;
}
@media screen and (max-width: 767px) {
  .Content {
    padding: 0;
  }
}
.Content sup {
  font-size: small;
  line-height: 1;
  vertical-align: text-top;
}

.Content__head {
  margin-bottom: 55px;
  padding-top: 86px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Content__head {
    padding-top: 50px;
  }
}
.Content__title {
  margin-bottom: 14px;
  color: var(--color-primary01);
  font-size: 32px;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .Content__title {
    font-size: 22px;
  }
}
.Content__date {
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

.Content__lead {
  font-size: 16px;
}
.Content__lead > p,
.Content__lead > ul,
.Content__lead > ol {
  margin-bottom: 2.2em;
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .Content__lead > p,
  .Content__lead > ul,
  .Content__lead > ol {
    margin-bottom: 1.2em;
  }
}
.Content__lead > *:last-child {
  margin-bottom: 0;
}

.Content__sec {
  margin-top: 70px;
  font-size: 16px;
}
.Content__sec > p,
.Content__sec > ul,
.Content__sec > ol {
  margin-bottom: 20px;
  line-height: 1.9;
}
.Content__sec > *:last-child {
  margin-bottom: 0;
}

.DiscList li {
  padding-left: 1em;
  text-indent: -1em;
}
.DiscList li::before {
  content: '・';
}
.DiscList.DiscList--memo li::before {
  content: '※';
}
.NumList {
  list-style-type: decimal;
  list-style-position: inside;
}
.NumList li {
  padding-left: 1em;
  text-indent: -1em;
}

/* ImgArea
-----------------------------------------*/
.ImgArea {
  margin: 2.2em 0;
}
@media screen and (max-width: 767px) {
  .ImgArea {
    margin: 1.2em 0;
  }
}
.ImgArea--center {
  text-align: center;
}
.ImgArea a {
  display: inline-block;
}

.ImgArea a:hover  { opacity: .8; }
.ImgArea a:focus  { opacity: .8; }
.ImgArea a:active { opacity: .8; }

.ImgArea__caption {
  margin-top: 7px;
  font-size: 14px;
  text-align: center;
}

/* ImgList
-----------------------------------------*/
.ImgList {
  display: grid;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  .ImgList {
    gap: 20px 15px;
  }
}
.ImgList li {
  text-align: center;
}

.ImgList--col2 {
  grid-template-columns: repeat(2, calc((100% - 20px) / 2));
}
@media screen and (max-width: 767px) {
  .ImgList--col2 {
    grid-template-columns: repeat(2, calc((100% - 15px) / 2));
  }
}

.ImgList--col3 {
  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
}
@media screen and (max-width: 767px) {
  .ImgList--col3 {
    grid-template-columns: repeat(2, calc((100% - 15px) / 2));
  }
}

.ImgList--col2 > .ImgList__main {
  grid-column: 1 / 3;
}
.ImgList--col3 > .ImgList__main {
  grid-column: 1 / 4;
}
@media screen and (max-width: 767px) {
  .ImgList--col3 > .ImgList__main {
    grid-column: 1 / 3;
  }
}

.ImgList__caption {
  margin-top: 7px;
  font-size: 14px;
  text-align: center;
}

/* .TblData
-----------------------------------------*/
.TblData {
  margin: 2.2em 0;
  border: 1px solid #d6d6d6;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .TblData {
    margin: 1.2em 0;
  }
}
.TblData table {
  width: 100%;
  font-size: 16px;
  line-height: 1.7;
}
.TblData th {
  padding: 10px 15px;
  border: 1px solid #fff;
  background-color: #d6d6d6;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
}
.TblData td {
  padding: 10px 15px;
  border-right: 1px dashed #999;
  border-bottom: 1px solid #d6d6d6;
  vertical-align: middle;
}
.TblData td:last-child {
  border-right: none;
}
.TblData tr:last-child td {
  border-bottom: none;
}

@media screen and (max-width: 767px) {
  .TblData--spWide th,
  .TblData--spWide td {
    display: block;
    width: 100%;
  }
}

/* BtnArea
-----------------------------------------*/
.BtnArea {
  text-align: center;
  margin: 24px 0 40px;
}

.NextBtn + .NextBtn {
  margin-top: 32px;
}

.NextBtn a {
  display: inline-block;
  position: relative;
  width: 696px;
  max-width: 100%;
  padding: 1.02em 2.3em 1.02em 1.8em;
  border-radius: 100vmax;
  background-color: #aaa;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
}
@media screen and (max-width: 976px) {
  .NextBtn a {
    width: 560px;
    font-size: 22px;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn a {
    width: 460px;
    font-size: 14px;
  }
}

.NextBtn a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.125em;
  width: .95833em;
  height: .95833em;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 976px) {
  .NextBtn a::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}
.NextBtn a:link    { color: #fff; text-decoration: none; }
.NextBtn a:visited { color: #fff; text-decoration: none; }
.NextBtn a:hover   { color: #fff; text-decoration: none; }
.NextBtn a:focus   { color: #fff; text-decoration: none; }
.NextBtn a:active  { color: #fff; text-decoration: none; }

.NextBtn--active a {
  background-color: #f5515a;
  box-shadow: 3px 5px #e62933;
  pointer-events: auto;
}
.NextBtn--active a:hover  { background-color: rgb(245 81 90 / .8); }
.NextBtn--active a:focus  { background-color: rgb(245 81 90 / .8); }
.NextBtn--active a:active { background-color: rgb(245 81 90 / .8); }

.NextBtn span {
  display: block;
}
.NextBtn small {
  display: block;
  font-size: 18px;
}
@media screen and (max-width: 976px) {
  .NextBtn small {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn small {
    font-size: 11px;
  }
}

/* LinkArea
-----------------------------------------*/
.LinkArea {
  text-align: center;
}
.LinkArea > .Linklist {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}