@charset "UTF-8";
@font-face {
  font-family: "genno", sans-serif;
  /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Noto_Sans_JP /NotoSansJP-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "genno", sans-serif;
  /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Noto_Sans_JP /NotoSansJP-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "baskerville";
  /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "cardo";
  /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Cardo/Cardo-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "arial";
  /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
}
body {
  font-size: 17px;
  font-family: "genno", sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.75;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  background-color: #0A0A0A;
}

@font-face {
  font-family: "genno"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Noto_Sans_JP /NotoSansJP-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "genno"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Noto_Sans_JP /NotoSansJP-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "baskerville"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "cardo"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Cardo/Cardo-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "arial"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
}
.genno {
  font-family: "genno";
}

.bask {
  font-family: "baskerville";
}

.cardo {
  font-family: "cardo";
}

.arial {
  font-family: "arial";
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content {
  width: 490px;
  margin: 0 auto;
}
@media screen and (max-width: 489px) {
  .content {
    width: 100%;
  }
}

.inner {
  max-width: 1240px;
  margin: 0 auto;
}

a {
  transition: all 0.3s;
}

a:hover {
  transition: all 0.3s;
  opacity: 0.75;
}

.section-ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 50px;
}

/* 大見出し 英語（大）＋日本語（小） */
.bl-largeTitle-ja {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
}

.bl-largeTitle-en {
  font-size: 33px;
  letter-spacing: 0.05em;
  line-height: 1.15;
  font-family: "arial";
  font-weight: bold;
  text-align: center;
}

/* お問い合わせフォーム 必須・任意 */
.contact-required {
  font-size: 12px;
}

/*動き*/
.fadeIn {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  -webkit-animation-name: fadeDownAnime;
          animation-name: fadeDownAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  -webkit-animation-name: fadeLeftAnime;
          animation-name: fadeLeftAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  -webkit-animation-name: fadeRightAnime;
          animation-name: fadeRightAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 489px) {
  body {
    font-size: 14px;
  }
  .bl-largeTitle-en {
    font-size: 31px;
  }
}
.head {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  z-index: 100;
}

.head-logo {
  position: fixed;
  width: 112px;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  z-index: 999;
}
@media screen and (max-width: 999px) {
  .head-logo {
    width: 80px;
  }
}

.top-head {
  opacity: 0;
  -webkit-animation-name: headerAnime;
          animation-name: headerAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.top-headLogo {
  opacity: 0;
  -webkit-animation-name: headerlogoAnime;
          animation-name: headerlogoAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes headerAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes headerAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes headerlogoAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 15px;
  }
}
@keyframes headerlogoAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 15px;
  }
}
.head-contactBtn {
  margin-right: 42px;
  margin-top: 35px;
  position: relative;
  z-index: 999;
}
@media screen and (max-width: 999px) {
  .head-contactBtn {
    margin-right: 21px;
  }
}
.head-contactBtn a {
  font-size: 19px;
  padding: 11px 42px;
  border: 1px solid #fff;
  border-radius: 22px;
}
@media screen and (max-width: 999px) {
  .head-contactBtn a {
    font-size: 11px;
    padding: 11px 21px;
  }
}

/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position: fixed;
  z-index: 999;
  opacity: 0;
  /*はじめは透過0*/
  /*ナビの位置と形状*/
  top: -100%;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background-color: rgba(10, 10, 10, 0.8);
  /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
  opacity: 1;
  z-index: 999;
  top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: relative;
  z-index: 999;
  width: 100%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  display: none;
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#g-nav.panelactive ul {
  display: block;
}

/*リストのレイアウト設定*/
#g-nav li {
  list-style: none;
  text-align: center;
}

#g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1 {
  position: fixed;
  z-index: 9999;
  /*ボタンを最前面に*/
  top: 45px;
  left: 45px;
  cursor: pointer;
  width: 38px;
  height: 14px;
  opacity: 0;
  -webkit-animation-name: hamburgerAnime;
          animation-name: hamburgerAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes hamburgerAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 45px;
  }
}

@keyframes hamburgerAnime {
  0% {
    opacity: 0;
    top: -100%;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 45px;
  }
}
/*×に変化*/
.openbtn1 span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 0;
  height: 1px;
  background-color: #fff;
  width: 100%;
}

.openbtn1 span:nth-of-type(1) {
  top: 0;
}

.openbtn1 span:nth-of-type(2) {
  top: 7px;
}

.openbtn1 span:nth-of-type(3) {
  top: 14px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 7px;
  left: 0;
  transform: rotate(-25deg);
  width: 100%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3) {
  top: 7px;
  left: 0;
  transform: rotate(25deg);
  width: 100%;
}

.hamburger {
  display: none;
}

@media screen and (max-width: 999px) {
  .hamburger {
    display: block;
  }
  .sideNav {
    display: none;
  }
}
.sideNav {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  left: 14.16%;
}

.top-sideNav {
  position: fixed;
  top: 50%;
  transform: translate(-100%, -50%);
  transition: all 1s;
  left: 0;
  opacity: 0;
}

.top-sideNav.is-in {
  transition: all 1s;
  transform: translate(0, -50%);
  left: 14.16%;
  opacity: 1;
}

.sideNav-list .sideNav-list__item {
  margin-bottom: 14px;
}
.sideNav-list .sideNav-list__item::after {
  margin-bottom: 0;
}
.sideNav-list .sideNav-list__item a {
  font-size: 14px;
  font-weight: bold;
}

.foot {
  background-color: #D3D3D3;
  padding: 30px 0 15px;
}

.foot-flexWrap {
  width: 490px;
  margin: 0 auto;
  padding: 0 40px;
}

.foot-logo {
  width: 41%;
}

@media screen and (max-width: 489px) {
  .foot-logo {
    width: 41%;
    margin: 0 auto 20px;
  }
}
.foot-companyName {
  font-size: 25px;
  font-weight: bold;
  color: #0A0A0A;
  font-family: "baskerville";
}
@media screen and (max-width: 489px) {
  .foot-companyName {
    font-size: 20px;
  }
}

.foot-companyAddress {
  font-size: 14px;
  font-weight: bold;
  color: #0A0A0A;
  font-family: "baskerville";
}
@media screen and (max-width: 489px) {
  .foot-companyAddress {
    font-size: 12px;
  }
}

.footer-bottom {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 35px auto 0;
  font-size: 10px;
  color: #0A0A0A;
  font-family: "baskerville";
  font-weight: bold;
}

.policyLink {
  margin-right: 39px;
}

.bl-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-start {
  align-items: flex-start;
}

.ai-end {
  align-items: flex-end;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: flex-start;
}

.jc-end {
  justify-content: flex-end;
}

/*共通*/
.table {
  padding: 0 40px;
  display: block;
}

tbody{
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.table-tr {
  padding: 20.5px 0;
  border-bottom: 1px solid #fff;
}

.table-th {
  width: 32.9%;
  padding: 20.5px 0;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.table-td {
  padding: 20.5px 15px 20.5px 0;
  width: 67.1%;
  padding-left: 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
}

/*fv*/
.fv {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -99;
}
@media screen and (max-width: 489px) {
  .fv {
    width: 100vw;
  }
}

.main-name {
  position: relative;
  top: 18.66%;
}

.top-mainName {
  opacity: 0;
  -webkit-animation-name: topTxtAnime;
          animation-name: topTxtAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes topTxtAnime {
  0% {
    opacity: 0;
    right: -100%;
  }
  2% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}

@keyframes topTxtAnime {
  0% {
    opacity: 0;
    right: -100%;
  }
  2% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
.main-img {
  position: relative;
  top: 35%;
  z-index: -1;
}
.main-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.28);
  top: 0;
  left: 0;
}

.top-mainImg {
  opacity: 0;
  -webkit-animation-name: topImgAnime;
          animation-name: topImgAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes topImgAnime {
  0% {
    opacity: 0;
    margin-top: 100%;
  }
  2% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    margin-top: -20%;
  }
}

@keyframes topImgAnime {
  0% {
    opacity: 0;
    margin-top: 100%;
  }
  2% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    margin-top: -20%;
  }
}
.initial {
  width: 100%;
  margin-top: 100vh;
}

.catch {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 35px;
  margin: 0 auto 46px;
}
@media screen and (max-width: 489px) {
  .catch {
    font-size: 30px;
  }
}

.first-txt {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 216px;
  text-align: center;
  line-height: 2.35;
}

/*スクロールダウン全体の場所*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 10px;
  left: 50%;
  transition: all 0.3s;
  opacity: 0;
  -webkit-animation-name: scrollDownAnime;
          animation-name: scrollDownAnime;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
@media screen and (max-width: 489px) {
  .scrolldown2 {
    bottom: 100px;
  }
}

@-webkit-keyframes scrollDownAnime {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scrollDownAnime {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.scrolldown2.is-disappear {
  opacity: 0 !important;
  transition: all 0.5s !important;
}

/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  -webkit-animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
          animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@-webkit-keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
/*上から下にかけて丸が透過→不透明→透過する*/
@-webkit-keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 50px;
  background: #eee;
}

/*----------- feature ------------*/
.feature {
  background-color: rgba(106, 106, 106, 0.8);
  padding: 198px 0 112px;
}

.feature-list .feature-list__item {
  margin-bottom: 100px;
}
.feature-list .feature-list__item:last-of-type {
  margin-bottom: 0;
}

.feature-img {
  width: 100%;
}

.feature-listNo {
  margin-top: -78px;
  padding: 0 40px;
}
@media screen and (max-width: 489px) {
  .feature-listNo {
    margin-top: -55px;
  }
}

.feature-listNo__txt {
  font-family: "baskerville";
  font-size: 25px;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 489px) {
  .feature-listNo__txt {
    font-size: 22px;
  }
}

.feature-listNo__no {
  font-family: "cardo";
  font-size: 86px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 489px) {
  .feature-listNo__no {
    font-size: 65px;
  }
}

.feature-txtWrap {
  text-align: center;
  padding: 0 40px;
  letter-spacing: 0.1em;
  margin-top: 15px;
}

.featureTitle-s {
  font-size: 20px;
  font-weight: bold;
  color: #D3D3D3;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 489px) {
  .featureTitle-s {
    font-size: 16px;
  }
}

.featureTitle-l {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  margin: 5px auto 10px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 489px) {
  .featureTitle-l {
    font-size: 23px;
  }
}

.feature-txt {
  color: #D3D3D3;
  text-align: left;
}

/*----------- lessonCourse -----------*/
.lessonCourse {
  background-color: rgba(10, 10, 10, 0.8);
  border: 1px solid #707070;
  padding: 148px 40.5px 81px;
  position: relative;
  z-index: -1;
}

.course-list .course-list__item {
  width: 100%;
  margin-bottom: 28px;
  position: relative;
}
.course-list .course-list__item:last-of-type {
  margin-bottom: 0;
}

.course-img {
  width: 87.8%;
}

.courseTitle {
  position: absolute;
  bottom: 5px;
  right: 0;
}

.courseTitle-en {
  font-size: 15px;
  text-transform: uppercase;
  font-family: "baskerville";
  line-height: 1;
  text-align: right;
}
@media screen and (max-width: 489px) {
  .courseTitle-en {
    font-size: 13px;
  }
}

.courseTitle-ja {
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 489px) {
  .courseTitle-ja {
    font-size: 21px;
  }
}

/*----------- lecture -----------*/
.lecture {
  color: #0A0A0A;
  padding: 140px 0 88px;
  background-color: rgba(255, 255, 255, 0.8);
  height: fit-content;

}

.lecture .section-ttl{
  position: sticky;
  top: 20px;
}
/*
.lecture-list .lecture-list__item {
  margin-bottom: 100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.lecture-list .lecture-list__item:last-of-type {
  margin-bottom: 0;
}

#lecture .section-ttl.is-fix {
  position: fixed;
  top: 90px;
  height: 59.45px;
  left: 50%;
  transform: translateX(-50%);
}

#lecture.is-top .lecture-list__item01 {
  margin-top: 109.45px;
}

.lecture-list__item.is-fix {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 490px;
  height: 474.74px;
}
@media screen and (max-width: 489px) {
  .lecture-list__item.is-fix {
    width: 100%;
  }
}

.lecture-list__item01.is-disappear,
.lecture-list__item02.is-disappear {
  transition: all 1s;
  opacity: 0;
}

.lecture-list__item02.is-height {
  margin-top: 674.74px;
}

.lecture-list__item02.is-fix {
  margin-top: 109.45px;
}

.lecture-list__item03.is-height {
  margin-top: 1270.48px;
}

#lecture .section-ttl.is-disappear {
  transition: all 0.5s;
  opacity: 0;
}

.personal-wrap {
  position: relative;
}

.lectureName {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.44);
  padding: 15px 0 13px;
}

.lectureName-ja {
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
  line-height: 1;
  text-align: center;
  font-size: 25px;
}

.lectureName-en {
  font-family: "baskerville";
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  font-size: 21px;
}

.personal-data {
  padding: 0 40px;
  margin-top: 20px;
  letter-spacing: 0.1em;
}

.lecture-list__item04 {
  height: 100vh;
}
*/
.lecture-list .lecture-list__item {
  margin-bottom: 100px;
  position: relative;
  position: sticky;
  top: 100px;
  transition: all 1s;
}
.lecture-list .lecture-list__item:last-of-type {
  margin-bottom: 0;
}


.lecture-list__item.is-disappear {
  transition: all 1s;
  opacity: 0;
}

.personal-wrap {
  position: relative;
}

.lectureName {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.44);
  padding: 15px 0 13px;
}

.lectureName-ja {
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
  line-height: 1;
  text-align: center;
  font-size: 25px;
}

.lectureName-en {
  font-family: "baskerville";
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  font-size: 21px;
}

.lectureImg{
  width: 100%;
  padding-top: 50%;
  position: relative;
}

.lectureImg img{
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: top;
}

.lecture-list__item02 .lectureImg img{
  object-position:  left 0px top -149px;
}
.lecture-list__item03 .lectureImg img{
  object-position:  left 0px top -330px;
}

.lecture-list__item04 .lectureImg img{
  object-position: left 0 top -50px;
}
.lecture-list__item05 .lectureImg img{
  object-position: left 0 top -50px;
}
.lecture-list__item06 .lectureImg img{
  object-position: left 0 top -50px;
}
@media screen and (max-width: 489px) {
  .lecture-list__item02 .lectureImg img{
    object-position:  left 0px top -31vw;
  }
  .lecture-list__item03 .lectureImg img{
    object-position:  left 0px top  -67vw;
  }
}

.personal-data {
  padding: 0 40px 100px;
  margin-top: 20px;
  letter-spacing: 0.1em;
  height: calc(100vh - 350px);
  overflow: scroll;

}

.lecture-list__item04 {
  height: 100vh;
}
/*----------- system -----------*/
#system.is-height {
  margin-top: 2800px;
}

.system {
  padding: 170px 0;
  background-color: rgba(106, 106, 106, 0.8);
}

/*----------- message -----------*/
.message {
  padding: 133px 0 35px;
  background-color: rgba(10, 10, 10, 0.8);
}

.message-section-title {
  padding-left: 40px;
}
.message-section-title .bl-largeTitle-en {
  text-align: left;
}
.message-section-title .bl-largeTitle-ja {
  text-align: left;
}

.message-img {
  width: 49.73%;
}

.message-img .imgAdjust{
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
.message-img .imgAdjust img{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    /*object-position: left -67px top 0px;*/
}

  @media screen and (max-width: 489px) {
  .message-img {
    width: 35%;
    margin-right: 20px;
  }

  .message-img .imgAdjust img{
  scale: 1;
  /*object-position: left -37px top 0px;*/
}
  }

.message-txt {
  padding: 40px 40px 20px;
  font-size: 14px;
}

.message-sign {
  font-size: 14px;
  letter-spacing: 0.1em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 40px;
  margin-left: auto;
  text-align: right;
}

.message-name {
  font-size: 20px;
  font-weight: bold;
}

/*----------- company -----------*/
.company {
  background-color: rgba(10, 10, 10, 0.8);
  padding: 149.3px 0 0;
}

.googleMap {
  width: 100%;
  height: 251px;
}
.googleMap iframe {
  width: 100%;
  height: 100%;
}

/*access*/
.access {
  padding: 150px 0 71px;
  background-color: rgba(10, 10, 10, 0.8);
}

.access-detail {
  margin-top: 32px;
  padding: 0 40px;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.42;
}

/*----------- contact -----------*/
.contactBtn {
  background-color: rgba(152, 152, 152, 0.8);
  padding-bottom: 55px;
  padding-top: 96px;
}
.contactBtn a {
  color: #0A0A0A;
  display: block;
  width: 410px;
  padding: 61.5px 0;
  margin: 0 auto;
  background-color: #989898;
  border-radius: 93px;
  transition: all 2s;
}
@media screen and (max-width: 489px) {
  .contactBtn a {
    width: 83.6%;
    padding: 45px 0;
  }
}

.contactBtn a.is-in {
  transition: all 1s;
  color: #fff;
}

.contactBtn-en {
  font-family: "arial";
  font-weight: bold;
  line-height: 1;
  font-size: 33px;
  text-align: center;
  margin-bottom: 10px;
}

.contactBtn-ja {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.under-content {
  background-color: rgba(106, 106, 106, 0.8);
  padding: 180px 40px 150px;
  min-height: calc(100vh - 220px);
}

.under-mainImg {
  top: 3vw;
  z-index: -1;
}

.policy {
  font-size: 14px;
}

.policy-list .policy-list__item {
  margin-bottom: 25px;
}
.policy-list .policy-list__item:last-of-type {
  margin-bottom: 0;
}

.policy-companyName {
  text-align: right;
  margin-top: 60px;
  font-weight: bold;
  font-size: 17px;
}

.policy-signAddress {
  text-align: right;
  margin: 5px 0;
}

.policy-signName {
  text-align: right;
  font-size: 17px;
}

.form-ttl {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: bold;
}

.required {
  color: #FF0000;
  padding-left: 2px;
}

.contact__dl {
  padding: 15px 0;
  border-bottom: 1px solid #D3D3D3;
}
@media screen and (max-width: 999px) {
  .contact__dl {
    display: block;
  }
}

input[type=text i],
input[type=email i] {
  width: 259px;
  padding: 5px 0 5px 8px;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1;
  background-color: #FFFFFF;
  color: #0A0A0A;
}
@media screen and (max-width: 999px) {
  input[type=text i],
input[type=email i] {
    width: 100%;
  }
}

textarea {
  width: 259px;
  height: 217px;
  padding: 5px 18px;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1;
  background-color: #FFFFFF;
  color: #0A0A0A;
}
@media screen and (max-width: 999px) {
  textarea {
    width: 100%;
  }
}

::-moz-placeholder {
  color: #D3D3D3;
  line-height: 1.7;
}

::placeholder {
  color: #D3D3D3;
  line-height: 1.7;
}

.contact-select__dd {
  width: 259px;
  position: relative;
}
.contact-select__dd::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 8px solid #0a0a0a;
  border-bottom: 0;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}
@media screen and (max-width: 999px) {
  .contact-select__dd {
    width: 100%;
    margin: 10px 0 0;
  }
}

select, option {
  background-color: #FFFFFF;
  width: 100%;
  padding: 5px 0 5px 8px;
  color: #0A0A0A;
  font-size: 14px;
}

select {
  cursor: pointer;
}

.checkbox {
  display: block;
  font-size: 12px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}
.checkbox a {
  text-decoration: underline;
  font-size: 12px;
}

.checkbox:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateX(-100%);
  display: block;
  height: 13px;
  width: 13px;
  margin-top: -8px;
  border: 1px solid #FFFFFF;
}

.checkbox:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  display: block;
  height: 10px;
  width: 4px;
  margin-top: -7px;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  opacity: 0;
  transform: rotate(45deg) translate(-100%, 2px);
}

input[type=checkbox]:checked + .checkbox::after {
  opacity: 1;
}

.contact-btn_position {
  width: 336px;
  margin: 32px auto 0;
  position: relative;
  background-color: #DEDEDE;
  border-radius: 93px;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (max-width: 999px) {
  .contact-btn_position {
    width: 100%;
  }
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #0a0a0a;
  border-right: 0;
  top: 50%;
  right: 28.5px;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-btn_position:hover {
  transition: all 0.3s;
  opacity: 0.75;
}

input[type=submit] {
  width: 100%;
  color: #0A0A0A;
  padding: 25.5px 0 25.5px 43px;
  font-weight: bold;
}

.thanks-txt {
  text-align: center;
  margin-bottom: 50px;
  font-size: 14px;
}

.btn-thanks {
  width: 336px;
  margin: 32px auto 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-thanks::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #0a0a0a;
  border-right: 0;
  top: 50%;
  right: 28.5px;
  transform: translateY(-50%);
}
.btn-thanks a {
  display: block;
  width: 100%;
  color: #0A0A0A;
  padding: 25.5px 0 25.5px 43px;
  background-color: #DEDEDE;
  border-radius: 93px;
}
/*# sourceMappingURL=style.css.map */
@media screen and (max-width: 489px) {
  .foot-flexWrap {
    width: 100%;
    display: block;
  }
}