/*
* EDUCATIONS COMMON STYLE
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

html {
  min-height: 100dvh;
  height: 100%;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  font-size: 0.875rem;
  /* 14px */
  height: 100%;
  overflow: hidden;
}

/* SCROLL BAR */
/* Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  /* スクロールバーの幅 */
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  /* スクロールバーのつまみの色 */
  border-radius: 5px;
  /* スクロールバーのつまみの角丸 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* スクロールバーのトラックの色 */
}

/* Firefox */
/* Firefox 64以降は -moz- プレフィックスが不要ですが、古いバージョンのサポートが必要な場合は付与してください */
/* Firefox 64以前の場合 */
/* これらのプロパティは Firefox でのみ適用されます */
/* Firefox 64以降ではネイティブのスクロールバースタイルが適用されます */
.scrollbar-firefox {
  scrollbar-color: #888 #f1f1f1;
  scrollbar-width: thin;
  /* スクロールバーの幅 */
}

/* HEADER */
.educations-header {
  width: 100%;
  height: auto;
  background-color: #fff;
  position: absolute;
  top: 0;
  z-index: 4;
}

.educations-header-inner {
  display: grid;
  grid-template-columns: 30% 1fr;
  /* grid-template-rows: 50px 1fr; */
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  padding: 0.5em;
  background-color: #fff;
}

.educations-header-info {
  display: grid;
  gap: 0.5em;
  align-items: center;
  height: 100%;
  justify-content: center;
}

.educations-header-links {}

.educations-header-links.two-links {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: end;
}

.educations-header-logo {
  max-width: 100px;
  width: auto;
  max-height: 50px;
  height: auto;
}

.educations-header-title {
  text-align: left;
  font-size: 1.25rem;
  margin: 0;
}

.educations-header-title.sp-show {
  text-align: center;
  display: block;
  grid-area: 2 / 1 / 3 / 3;
  border-top: 1px solid #dddddd;
  padding: 1rem 0;
}

.educations-header-title.pc-show {
  display: none;
  grid-area: 1 / 2 / 2 / 3;
}

.educations-header-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.educations-header-link {
  height: calc(100% - 1em);
  background-color: #3ca9df;
  color: #fff;
  border: 1px solid #3ca9df;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  /* 40% : 60% */
  transition: all .2s;
}

.buttons-sound {
  min-width: 50px;
  max-width: 50px;
  width: 20%;
  height: 100%;
}

.button-sound {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button-sound.is-hidden {
  display: none;
}

.image-button-sound {
  min-width: 50px;
  width: 100%;
  height: 100%;
}

#wplc-chat-button {
  background-color: #333333 !important;
}

/* HEADERここまで */

/* MAIN */
.educations-main {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: calc(100% - 80px);
  overflow: hidden;
}

.educations-mv-wrapper {
  min-width: 100%;
  min-height: 80%;
  height: 100%;
  aspect-ratio: 2.11 / 1;
}

.educations-mv {
  width: 100%;
  height: 100%;
}

.educations-mv-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* FOOTER */
.educations-footer {
  width: 100%;
  background-color: #c06685;
}

.educations-footer-inner {
  padding: 0.75rem 1rem;
}

.educations-footer-inner.--link {
  display: grid;
  gap: 0.75rem;
  grid-template: auto / repeat(auto-fit, minmax(min-content, calc(20% - 0.75rem)));
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

.educations-footer-inner.--copyright {
  display: block;
}

.educations-footer p {
  text-align: center;
  height: 100%;
}

.educations-footer-link {
  display: block;
  color: #fff;
  border-radius: 35px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 0%;
  padding: 1rem 2rem;
  transition: all .5s;
  white-space: nowrap;
}

.educations-footer-link:hover {
  color: #c06685;
  background-color: #fff;
}

/* FOOTER ここまで */

/* 画像モード判定用 */
.image-format {
  display: none;
}

/* YOUTUBE */
.screen {
  position: relative;
  position: absolute;
  /* aspect-ratio: 16/9; */
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 1;
  background-image: none;
  transition-property: opacity;
  transition-duration: 1000ms;
  z-index: 0;
}

.screen-movie {
  width: 100%;
  height: 100%;
}

.thumbnail-screen-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* VIDEOJS */
.video-js .vjs-tech {
  visibility: visible !important;
}

.data-player-item {
  width: 100%;
  height: 100%;
}

.data-player-item .video-js {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.data-player-item [data-enable-devicemotion] {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.is-fullscreen {
  z-index: 99999 !important;
}

.is-fullscreen .vjs-control-bar {
  padding: 0 14px;
  height: 5.5em;
}

.is-fullscreen .vjs-control-bar .vjs-control:before {
  font-size: 24px;
  line-height: 1.67;
}

.is-fullscreen .vjs-control-bar .vjs-volume-bar {
  margin: 1.8em 0.45em
}

.is-fullscreen .vjs-control-bar .vjs-progress-control {
  padding-bottom: 1.5em;
}

.is-fullscreen .vjs-control-bar .vjs-time-control {
  line-height: 4em;
}

.no-data-player-message {
  color: red;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-player-item {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.video-js {
  width: 100%;
  height: 100%;
}

/* videojs 音声コントロール関係を非表示にする */
.video-js .vjs-mute-control {
  display: none;
}

.video-js .vjs-volume-panel {
  display: none;
}

/* videojs カスタムボタン */
.movie-control-buttons {
  display: none;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
}

.movie-control-buttons.is-hidden {
  display: none;
}

/* コントロールボタンアイコン */
.control-icon {}

/* コントロールボタン */
.control-button {
  cursor: pointer;
}

/* 再生・一時停止ボタン */
.play-pause-button {
  justify-self: center;
  font-size: 1.2rem;
}

/* /VIDEOJS ここまで */

/* LOADING 画面 */
.screen-loading {
  width: 100%;
  height: 100%;
  background-color: #ede9de;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen-loading.is-hidden {
  display: none;
}
.screen-loading-inner {
}
.screen-swing div {
  border-radius: 50%;
  float: left;
  height: 1em;
  width: 1em;
}
.screen-swing div:nth-of-type(1) {
  /* background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%); */
  /* background: linear-gradient(to right, #385c78 0%, #325774 100%); */
  background-color: #693e82;
}
.screen-swing div:nth-of-type(2) {
  /* background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%); */
  /* background: linear-gradient(to right, #325774 0%, #47536a 100%); */
  background-color: #0950a9;
}
.screen-swing div:nth-of-type(3) {
  /* background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%); */
  /* background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%); */
  background-color: #0075c2;
}
.screen-swing div:nth-of-type(4) {
  /* background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%); */
  /* background: linear-gradient(to right, #744c55 0%, #954646 100%); */
  background-color: #529e35;
  /* background-color: #55A18E; */
}
.screen-swing div:nth-of-type(5) {
  /* background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%); */
  /* background: linear-gradient(to right, #9c4543 0%, #bb4034 100%); */
  background-color: #55A18E;
}
.screen-swing div:nth-of-type(6) {
  /* background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%); */
  /* background: linear-gradient(to right, #c33f31 0%, #d83b27 100%); */
  background-color: #D179A1;
}
.screen-swing div:nth-of-type(7) {
  /* background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%); */
  /* background: linear-gradient(to right, #da3b26 0%, #db412c 100%); */
  background-color: #e66d7c;
}
.screen-shadow {
  clear: left;
  padding-top: 1.5em;
}
.screen-shadow div {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  float: left;
  width: 1em;
  height: .25em;
  border-radius: 50%;
  background: #e3dbd2;
}
.screen-shadow .screen-shadow-l {
  /* background: #d5d8d6; */
  background-color: #876b97;
}
.screen-shadow .screen-shadow-r {
  /* background: #eed3ca; */
  background-color: #eb929d;
}
@-webkit-keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@-webkit-keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
}
@keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0)
  }
}
@-webkit-keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.57em);
    transform: translateX(-1.75em);
  }
}
@keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.75);
    transform: translateX(-1.75em);
  }
}
@-webkit-keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.screen-swing-l {
  -webkit-animation: ball-l .425s ease-in-out infinite alternate;
  animation: ball-l .425s ease-in-out infinite alternate;
}
.screen-swing-r {
  -webkit-animation: ball-r .425s ease-in-out infinite alternate;
  animation: ball-r .425s ease-in-out infinite alternate;
}
.screen-shadow-l {
  -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
  animation: shadow-l-n .425s ease-in-out infinite alternate;
}
.screen-shadow-r {
  -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
  animation: shadow-r-n .425s ease-in-out infinite alternate;
}
/* /LOADING 画面 ここまで */

/* 音声許可用のモーダル */
.sound-permission {
  position: fixed;
  /* 上下左右の中央に配置 */
  inset: 0;
  margin: auto;
  aspect-ratio: 2 / 1;
  width: auto;
  height: auto;
  min-width: 650px;
  max-width: 700px;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  z-index: 10000;
  padding: 2rem 1rem;
}

.sound-permission i {
  margin-bottom: 0.5rem;
}

.sound-permission i:before {
  font-size: 5rem;
}

.sound-permission-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 2rem;
}

.sound-permission-button {
  font-size: 1.25rem;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all .5s;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  transition: all .2s;
}

.sound-permission-button.sound--on {
  color: #000;
  background-color: #fff;
}

.sound-permission-button.sound--off {}

.sound-permission-button .image-button-sound {
  width: 50px;
}

.sound-permission-button:hover,
.sound-permission-button:active,
.sound-permission-button:focus {
  color: #000;
  background-color: #fff;
}

.sound-permission-button.sound--on:hover,
.sound-permission-button.sound--on:active,
.sound-permission-button.sound--on:focus {
  letter-spacing: 0.2px;
  font-weight: bold;
}

.sound-permission.is-hidden {
  display: none;
}

/* 再生許可用のモーダル */
.play-permission {
  position: fixed;
  /* 上下左右の中央に配置 */
  inset: 0;
  margin: auto;
  aspect-ratio: 3 / 2;
  width: 100%;
  height: 70%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #fff;
  z-index: 60;
  padding: 2rem 1rem;
}

.play-permission.is-hidden {
  display: none;
}

.play-permission i {
  margin-bottom: 0.5rem;
}

.play-permission i:before {
  font-size: 5rem;
}

.play-permission-text {
  text-align: center;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.start-button {
  width: 150px;
  height: 100px;
  background-color: #ff0000;
  /* 赤色 */
  border-radius: 20px;
  /* 角を丸く */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.play-icon {
  width: 0;
  height: 0;
  border-left: 25px solid white;
  /* 三角形を作る */
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-bottom: 10px;
}

.start-text {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

/* .play-permission-buttons {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
}

.play-permission-button {
  font-size: 1.25rem;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all .5s;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  transition: all .2s;
}

.play-permission-button .image-button-play {
  width: 50px;
  margin-left: auto;
}

.play-permission-button:hover,
.play-permission-button:active,
.play-permission-button:focus {
  color: #000;
  background-color: #fff;
}
*/

/* MODAL */
/* モーダルの基本スタイル */
.modal-content {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  z-index: 1000;
  max-width: 300px;
  width: 80%;
  aspect-ratio: 16 / 9;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
}

/* モーダルヘッダーのスタイル */
.modal-header {
  cursor: move;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* モーダルの閉じるボタン */
.modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content.is-hidden {
  display: none;
}

.modal-content iframe {
  border: none;
  /* iframeの枠を削除 */
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* 縦画面時に表示される警告メッセージ */
.rotate-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  z-index: 9999;
}

.rotate-message-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  height: 100%;
}

/* PC縦長ウインドウの時に表示される警告メッセージ */
.narrow-message {
  display: block;
}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 768px) {
  body {
    font-size: 1rem;
    /* 16px */
  }

  /* HEADER */
  .educations-header {
    /* height: calc(80px - 1em); */
  }

  .educations-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 100%;
    grid-column-gap: 0.5rem;
  }

  .educations-header-info {
    gap: 2.5em;
    grid-template-columns: auto minmax(300px, 1fr);
  }

  .educations-header-logo {}

  .educations-header-title.sp-show {
    display: none;
  }

  .educations-header-title.pc-show {
    display: block;
  }

  .educations-header-links {}

  .educations-header-buttons {}

  .educations-header-link {
    padding: 1rem 1.5rem;
  }

  .buttons-sound {}

  /* MODAL */
  .modal-content {
    width: 800px;
    max-width: 40%;
    bottom: 90px;
    left: 50px;
    transform: none;
  }

  /* 音声許可用のモーダル */
  .sound-permission {}

  .sound-permission-buttons {}

  .sound-permission-button.sound--off {}

  .sound-permission-button .image-button-sound {}

  /* FOOTER */
  .educations-footer-inner {
    /* padding: 1rem 2rem; */
  }
}

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

@media (orientation: landscape) {

  /* デバイスが横向きの場合の記述 */
  .educations-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 100%;
    grid-column-gap: 0.5rem;
  }

  .educations-header-info {
    grid-template-columns: auto minmax(200px, 1fr);
  }

  .educations-header-title.sp-show {
    display: none;
  }

  .educations-header-title.pc-show {
    display: block;
  }

  .educations-header-buttons {}

  .educations-main {
    min-height: auto;
  }

  .educations-footer {
    gap: 1rem;
  }
}

@media (orientation: portrait) {
  /* デバイスが縦向きの場合の記述 */
}

/* タッチデバイス向けのスタイル */
@media only screen and (hover: none) {
  /* hover: none はタッチデバイスを示す条件 */
}