@charset "UTF-8";

/* -------------------------------------------
	新たに設定・改変したCSS（2024）
------------------------------------------- */
/* 教員用ページへのボタン無効設定 */
.pageHeader__link.-guide {
  /* pointer-events: none; */
  /* 研修用設定 */
  /* display: none; */
}

/* ページヘッダーエリアの設定 */
.pageHeader {
  height: 6.945vw;
  padding: 1.852vw 0.926vw 1.389vw;
}

@media (min-width: 1081px) {
  .pageHeader {
    height: 75px;
    padding: 20px 10px 15px;
  }
}

.pageHeader .pageTitle.-link.-red {
  color: #EE334E;
}

/* コンテンツエリアの設定 */
.main {
  /* flex-grow: 0; コンテンツエリアを上に寄せたい場合に使用*/
  height: initial;
}

/* ヘッダーエリアの設定 */
.page__header {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: flex-end;
  min-height: 8.334vw;
  padding: 0 0 2.315vw 6.6792vw;
}

@media (min-width: 1081px) {
  .page__header {
    min-height: 90px;
    padding: 0 0 25px 72px;
  }
}

.page__header.-red {
  background-color: #EE334E;
}

.page__header.-blue {
  background-color: #0081C8;
}

.page__title {
  line-height: 1;
}

.page__title em {
  font-size: 2.778vw;
}

@media (min-width: 1081px) {
  .page__title em {
    font-size: 30px;
  }
}

.pageCharacter {
  top: 7.408vw;
  right: 4.63vw;
}

@media (min-width: 1081px) {
  .pageCharacter {
    top: 80px;
    right: 50px;
  }
}

.pageCharacter .character {
  width: 12.038vw;
  height: 12.038vw;
}

@media (min-width: 1081px) {
  .pageCharacter .character {
    width: 130px;
    height: 130px;
  }
}

.character img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.character img:nth-child(1) {
  opacity: 1;
}

.character img:nth-child(2) {
  opacity: 0;
}

.character.active img:nth-child(1) {
  opacity: 0;
}

.character.active img:nth-child(2) {
  opacity: 1;
}

.pageCharacter .-balloon {
  flex-direction: column;
  top: -1.389vw;
  left: -11.575vw;
  width: 12.2392vw;
  padding-top: 0.463vw;
  min-height: 7.0376vw;
  font-size: 1.389vw;
  /* line-height: 1.4816vw; */
}

@media (min-width: 1081px) {
  .pageCharacter .-balloon {
    top: -15px;
    left: -125px;
    width: 132px;
    padding-top: 5px;
    min-height: 76px;
    font-size: 15px;
    /* line-height: 16px; */
  }
}

.pageCharacter .-balloon span {
  width: 5.556vw;
  color: #0081C8;
  font-size: 1.1112vw;
  line-height: 1;
  padding-top: 0.463vw;
}

@media (min-width: 1081px) {
  .pageCharacter .-balloon span {
    width: 60px;
    font-size: 12px;
    padding-top: 5px;
  }
}

/* コンテンツエリア（共通設定） */
.page__topic__content {
  display: flex;
  gap: 0.926vw;
  margin-top: 0;
  font-weight: bold;
  font-size: 2.9632vw;
  line-height: 3.8952vw;
}

@media (min-width: 1081px) {
  .page__topic__content {
    gap: 10px;
    margin-top: 0;
    font-size: 32px;
    line-height: 42px;
  }
}

.page__topic__content.alpha {
  margin-bottom: 2.778vw;
}

@media (min-width: 1081px) {
  .page__topic__content.alpha {
    margin-bottom: 30px;
  }
}

.page__topic__content.alpha span {
  flex: 1;
}

@media (min-width: 1081px) {
  .page__topic__content.alpha span {}
}

.page__topic__content.alpha p {
  flex: 1;
}

@media (min-width: 1081px) {
  .page__topic__content.alpha p {}
}

.page__topic__content .impSoundBtn.-hasRuby {
  top: 0.463vw;
}

@media (min-width: 1081px) {
  .page__topic__content .impSoundBtn.-hasRuby {
    top: 5px;
  }
}

.sound-button {
  width: 3.704vw;
  cursor: pointer;
}

@media (min-width: 1081px) {
  .sound-button {
    width: 40px;
  }
}

.page__topic__content span {
  flex: 1;
}

@media (min-width: 1081px) {
  .page__topic__content span {}
}

.page__topic__content p {
  flex: 1;
}

@media (min-width: 1081px) {
  .page__topic__content p {}
}

/* コンテンツエリア（映像バージョン） */
.video-container {
  display: flex;
  justify-content: center;
}

.video-container-inner {
  position: relative;
  width: 100%;
  max-width: 750px;
  aspect-ratio: 16 / 9;
}

#myVideo {
  width: 100%;
  /* max-width: 750px; */
  aspect-ratio: 16 / 9;
}

#subtitleToggle {
  display: flex;
  z-index: 1;
  position: absolute;
  right: 1.389vw;
  top: 0.926vw;
  /* bottom: 7.4074074074vw;　もと */
  align-items: center;
  width: 11.7482vw;
  height: 3.704vw;
  padding: 0 2.315vw 0 1.852vw;
  border-radius: 1.852vw;
  background-color: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 1.2964vw;
  line-height: 1;
}

@media (min-width: 1081px) {
  #subtitleToggle {
    right: 15px;
    top: 10px;
    /* bottom: 80px; もと */
    width: 127px;
    height: 40px;
    padding: 0 25px 0 20px;
    border-radius: 20px;
    font-size: 14px;
  }
}

#subtitleToggle i {
  display: block;
  width: 1.852vw;
  height: 1.4816vw;
  margin-right: 0.7408vw;
}

@media (min-width: 1081px) {
  #subtitleToggle i {
    width: 20px;
    height: 16px;
    margin-right: 8px;
  }
}

#subtitleToggle {
  cursor: pointer;
}

/* コンテンツエリア（話し合おうバージョン） */
.hint-title {
  display: flex;
  gap: 0.5rem;
  /* justify-content: center; */
  align-items: center;
  /* width: 37.04vw; */
  font-size: 2.4076vw;
  font-weight: bold;
  color: #0081C8;
  padding: 1.389vw 0;
  margin: 0 auto 1.852vw;
  border-radius: 100vh;
}

@media (min-width: 1081px) {
  .hint-title {
    /* width: 400px; */
    font-size: 26px;
    padding: 15px 0;
    margin: 0 auto 20px;
  }
}

.hint-icon {
  max-width: 2.315vw;
}

@media (min-width: 1081px) {
  .hint-icon {
    max-width: 25px;
  }
}

.hint-title.default {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 37.04vw;
  font-size: 2.4076vw;
  font-weight: bold;
  color: #fff;
  padding: 1.389vw 0;
  margin: 3.704vw auto 1.852vw;
  border-radius: 100vh;
  background-color: #0081C8;
}

@media (min-width: 1081px) {
  .hint-title.default {
    width: 400px;
    font-size: 26px;
    padding: 15px 0;
    margin: 40px auto 20px;
  }
}

.hint-title.default .hint-icon {
  max-width: 2.315vw;
}

@media (min-width: 1081px) {
  .hint-title.default .hint-icon {
    max-width: 25px;
  }
}

.page_column {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: 1.852vw;
}

@media (min-width: 1081px) {
  .page_column {
    gap: 20px;
  }
}

.saki_btn {
  display: flex;
  align-items: self-end;
  width: 18.52vw;
  position: absolute;
  bottom: 0px;
  right: 5%;
  filter: drop-shadow(0px 0px 3px gray);
  /* z-index: -1; */
}

@media (min-width: 1081px) {
  .saki_btn {
    width: 200px;
  }
}

.saki-click-btn {
  position: absolute;
  width: 13.89vw;
  top: 23%;
  left: 12.5%;
}

@media (min-width: 1081px) {
  .saki-click-btn {
    width: 150px;
  }
}

.hintTab {
  position: absolute;
  top: 0%;
  z-index: 1;
  transform: translate(20%, -50%);
  display: inline-block;
  color: #0076C3;
  font-size: 1.389vw;
  font-weight: bold;
  padding: 0.463vw 0.926vw;
  border-radius: 0.926vw;
  background-color: #F3FAFF;
}

@media (min-width: 1081px) {
  .hintTab {
    font-size: 15px;
    padding: 5px 10px;
    border-radius: 10px;
  }
}

.page__list__item {
  position: relative;
  display: flex;
  margin-top: 3.704vw;
}

@media (min-width: 1081px) {
  .page__list__item {
    margin-top: 40px;
  }
}

.page__list__item:not(:first-of-type) {
  margin-top: 0;
}

@media (min-width: 1081px) {
  .page__list__item:not(:first-of-type) {
    margin-top: 0;
  }
}

.item-ex {
  margin-top: 3.704vw !important;
}

@media (min-width: 1081px) {
  .item-ex {
    margin-top: 40px !important;
  }
}

.page__list__item.col2 {
  display: grid;
  gap: 5.556vw;
  justify-content: center;
  grid-template-columns: minmax(0, 500px) minmax(0, 500px);
}

@media (min-width: 1081px) {
  .page__list__item.col2 {
    gap: 60px;
  }
}

.page__list__item.col2 .hintTab {
  transform: translate(-5%, -50%);
}

.page__list__item.col2 .hint01,
.page__list__item.col2 .hint02 {
  display: block;
}

.page__list__item.col2 .hint01 span,
.page__list__item.col2 .hint02 span {
  margin: 0.926vw 0 0;
  display: block;
  text-align: center;
}

@media (min-width: 1081px) {

  .page__list__item.col2 .hint01 span,
  .page__list__item.col2 .hint02 span {
    margin: 10px 0 0;
  }
}

.page__list__item.col2 .hint01 img,
.page__list__item.col2 .hint02 img {
  /* width: 37.04vw; */
  display: block;
  margin: 0.926vw auto 0;
}

@media (min-width: 1081px) {

  .page__list__item.col2 .hint01 img,
  .page__list__item.col2 .hint02 img {
    width: 400px;
    margin: 10px auto 0;
  }
}

.page__list__item a {
  display: flex;
  position: relative;
  padding: 1.6668vw 6.482vw 1.6668vw 2.2224vw;
  border: 0.2778vw solid #0081C8;
  border-radius: 1.852vw;
  font-weight: bold;
  font-size: 2.2224vw;
  line-height: 1.6;
  width: 100%;
  box-shadow: 0.1852px 0.1852px 0.5556vw gray;
}

@media (min-width: 1081px) {
  .page__list__item a {
    padding: 18px 70px 18px 24px;
    border: 3px solid #0081C8;
    border-radius: 20px;
    font-size: 24px;
    box-shadow: 2px 2px 6px gray;
  }
}

.page__list__item a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 1.852vw;
  width: 3.704vw;
  height: 5.556vw;
  transform: translateY(-50%);
  background: url(../img/hint.svg) no-repeat center center;
  background-size: contain;
  content: "";
}

@media (min-width: 1081px) {
  .page__list__item a::after {
    right: 20px;
    width: 40px;
    height: 60px;
  }
}

/* .page__list__item+.page__list__item {
  margin-top: 0;
}

@media (min-width: 1081px) {
  .page__list__item+.page__list__item {
    margin-top: 0;
  }
} */

/* コンテンツエリア（スライドスタイルバージョン） */
:root {
  --slide01-01: url(../img/02-01.png);
  --slide01-02: url(../img/02-02.png);
  --slide01-03: url(../img/02-03.png);
  --slide01-01-c: url(../img/02-01-c.png);
  --slide01-02-c: url(../img/02-02-c.png);
  --slide01-03-c: url(../img/02-03-c.png);
}

.slide {
  position: relative;
  display: grid;
  gap: 2%;
  grid-template-columns: 1fr 60% 1fr;
  max-width: 1080px;
  margin: 4.63vw auto 0;
}

@media (min-width: 1081px) {
  .slide {
    margin: 50px auto 0;
  }
}

.slide-prev {
  filter: opacity(0.5);
  border: solid 0.2778vw #0076C3;
  border-radius: 0 1.852vw 1.852vw 0;
}

@media (min-width: 1081px) {
  .slide-prev {
    border: solid 3px #0076C3;
    border-radius: 0 20px 20px 0;
    border-left: none;
  }
}

.slide-prev.slide01-01 {
  background: var(--slide01-01);
  background-size: cover;
  background-position: top right;
}

.slide-prev.slide01-02 {
  background: var(--slide01-02);
  background-size: cover;
  background-position: top right;
}

.slide-prev.slide01-03 {
  background: var(--slide01-03);
  background-size: cover;
  background-position: top right;
}

.slide-prev.slide01-01-c {
  background: var(--slide01-01-c);
  background-size: cover;
  background-position: top right;
}

.slide-prev.slide01-02-c {
  background: var(--slide01-02-c);
  background-size: cover;
  background-position: top right;
}

.slide-prev.slide01-03-c {
  background: var(--slide01-03-c);
  background-size: cover;
  background-position: top right;
}

.slide-active {
  position: relative;
  z-index: 1;
  border: solid 0.2778vw #0076C3;
  border-radius: 1.852vw;
}

@media (min-width: 1081px) {
  .slide-active {
    border: solid 3px #0076C3;
    border-radius: 20px;
  }
}

.slide-active>img {
  border-radius: 1.852vw;
}

@media (min-width: 1081px) {
  .slide-active>img {
    border-radius: 20px;
  }
}

.slide-active div.slide-title {
  display: flex;
  align-items: center;
  gap: 0.926vw;
  position: absolute;
  /* width: 12.038vw; */
  font-size: 1.6668vw;
  text-align: center;
  color: #ffffff;
  padding: 0.926vw;
  border-radius: 0.926vw;
  background-color: #0076C3;
  border-radius: 0.926vw 0 0.926vw 0;
}

@media (min-width: 1081px) {
  .slide-active div.slide-title {
    gap: 10px;
    width: auto;
    padding: 10px;
    border-radius: 10px 0 10px 0;
  }
}

.slide-title-text {
  font-size: 1.6668vw;
  font-weight: bold;
}

@media (min-width: 1081px) {
  .slide-title-text {
    font-size: 18px;
  }
}

.slide-active h3.slide-hint {
  position: absolute;
  top: -2.2224vw;
  left: 50%;
  transform: translateX(-50%);
  width: 13.89vw;
  text-align: center;
  font-weight: bold;
  color: #0076C3;
  padding: 0.463vw;
  border-radius: 0.926vw;
  background-color: #F3FAFF;
}

@media (min-width: 1081px) {
  .slide-active h3.slide-hint {
    top: -24px;
    width: 150px;
    padding: 5px;
    border-radius: 10px;
  }
}

.slide-next {
  filter: opacity(0.5);
  border: solid 0.2778vw #0076C3;
  border-radius: 1.852vw 0 0 1.852vw;
}

@media (min-width: 1081px) {
  .slide-next {
    border: solid 3px #0076C3;
    border-radius: 20px 0 0 20px;
    border-right: none;
  }
}

.slide-next.slide01-01 {
  background: var(--slide01-01);
  background-size: cover;
  background-position: top left;
}

.slide-next.slide01-02 {
  background: var(--slide01-02);
  background-size: cover;
  background-position: top left;
}

.slide-next.slide01-03 {
  background: var(--slide01-03);
  background-size: cover;
  background-position: top left;
}

.slide-next.slide01-01-c {
  background: var(--slide01-01-c);
  background-size: cover;
  background-position: top left;
}

.slide-next.slide01-02-c {
  background: var(--slide01-02-c);
  background-size: cover;
  background-position: top left;
}

.slide-next.slide01-03-c {
  background: var(--slide01-03-c);
  background-size: cover;
  background-position: top left;
}

.slide-prev-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-77%, -50%);
  width: 4.63vw;
  filter: drop-shadow(0 0 2px gray);
}

.slide-next-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(77%, -50%);
  width: 4.63vw;
  filter: drop-shadow(0 0 2px gray);
}

@media (min-width: 1081px) {

  .slide-prev-btn,
  .slide-next-btn {
    width: 50px;
  }
}

/* スライド内吹き出し */
.point01-01-before,
.point01-02-before,
.point01-03-before,
.point01-04-before,
.point02-01-before,
.point02-02-before,
.point02-03-before,
.point02-04-before,
.point03-01-before,
.point03-02-before,
.point03-03-before,
.point03-04-before {
  width: 3.6vw;
  filter: drop-shadow(0px 0px 3px gray);
}

@media (min-width: 1280px) {

  .point01-01-before,
  .point01-02-before,
  .point01-03-before,
  .point01-04-before,
  .point02-01-before,
  .point02-02-before,
  .point02-03-before,
  .point02-04-before,
  .point03-01-before,
  .point03-02-before,
  .point03-03-before,
  .point03-04-before {
    width: 45px;
  }
}

.point01-01-before {
  position: absolute;
  top: 24%;
  left: 23%;
}

.point01-02-before {
  position: absolute;
  top: 47%;
  left: 54%;
}

.point01-03-before {
  position: absolute;
  top: 5%;
  left: 62%;
}

.point01-04-before {
  position: absolute;
  top: 27%;
  left: 80%;
}

.point02-01-before {
  position: absolute;
  top: 35%;
  left: 22%;
}

.point02-02-before {
  position: absolute;
  top: 38%;
  left: 40%;
}

.point02-03-before {
  position: absolute;
  top: 19%;
  left: 68.5%;
}

.point02-04-before {
  position: absolute;
  top: 38%;
  left: 65%;
}

.point03-01-before {
  position: absolute;
  top: 15%;
  left: 26%;
}

.point03-02-before {
  position: absolute;
  top: 47%;
  left: 47.5%;
}

.point03-03-before {
  position: absolute;
  top: 6%;
  left: 52%;
}

.point03-04-before {
  position: absolute;
  top: 15%;
  left: 65%;
}

.point01-01-before,
.point01-02-before,
.point01-03-before,
.point01-04-before,
.point02-01-before,
.point02-02-before,
.point02-03-before,
.point02-04-before,
.point03-01-before,
.point03-02-before,
.point03-03-before,
.point03-04-before {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin: center;
}

@keyframes anime1 {
  from {
    transform: scale(0.9, 0.9);
  }

  to {
    transform: scale(1, 1);
  }
}

.point01-01-after,
.point01-02-after,
.point01-03-after,
.point01-04-after,
.point02-01-after,
.point02-02-after,
.point02-03-after,
.point02-04-after,
.point03-01-after,
.point03-02-after,
.point03-03-after,
.point03-04-after {
  width: 13.2vw;
  visibility: hidden !important;
  filter: drop-shadow(0px 0px 3px gray);
}

@media (min-width: 1280px) {

  .point01-01-after,
  .point01-02-after,
  .point01-03-after,
  .point01-04-after,
  .point02-01-after,
  .point02-02-after,
  .point02-03-after,
  .point02-04-after,
  .point03-01-after,
  .point03-02-after,
  .point03-03-after,
  .point03-04-after {
    width: 170px;
  }
}

.point01-01-after.show,
.point01-02-after.show,
.point01-03-after.show,
.point01-04-after.show,
.point02-01-after.show,
.point02-02-after.show,
.point02-03-after.show,
.point02-04-after.show,
.point03-01-after.show,
.point03-02-after.show,
.point03-03-after.show,
.point03-04-after.show {
  visibility: visible !important;
}

.point01-01-after {
  position: absolute;
  top: 23%;
  left: 26%;
}

.point01-02-after {
  position: absolute;
  top: 20%;
  left: 34%;
}

.point01-03-after {
  position: absolute;
  top: 5%;
  left: 62%;
}

.point01-04-after {
  position: absolute;
  top: 35%;
  left: 69%;
}

.point02-01-after {
  position: absolute;
  top: 25%;
  /* 0110大柿変更　18→25 */
  left: 5%;
}

.point02-02-after {
  position: absolute;
  top: 40%;
  left: 37%;
}

.point02-03-after {
  position: absolute;
  top: 21%;
  left: 53%;
}

.point02-04-after {
  position: absolute;
  top: 55%;
  left: 45%;
}

.point03-01-after {
  position: absolute;
  top: 35%;
  left: 7%;
}

.point03-02-after {
  position: absolute;
  top: 50%;
  left: 27%;
}

.point03-03-after {
  position: absolute;
  top: 18%;
  left: 36%;
}

.point03-04-after {
  position: absolute;
  top: 15%;
  left: 65%;
}

.saki {
  position: absolute;
  right: 0;
  bottom: -1.5vw;
  z-index: 9999;
  width: 21vw;
  filter: drop-shadow(0px 0px 3px gray);
}

@media (min-width: 1280px) {
  .saki {
    width: 270px;
    bottom: -20px;
  }
}

img.saki-btn {
  position: absolute;
  top: 72%;
  left: 3%;
  width: 3.5vw;
}

@media (min-width: 1280px) {
  img.saki-btn {
    width: 50px;
  }
}

/* 下部タブリンク設定 */
.nav {
  z-index: 1;
  height: 3.704vw;
  margin-bottom: 1.852vw;
}

@media (min-width: 1081px) {
  .nav {
    height: 40px;
    margin-bottom: 20px;
  }
}

.nav__links {
  filter: drop-shadow(0 0 0.1852vw black);
  /* 研修用設定 */
  /* margin-right: 1.852vw; */
}

@media (min-width: 1081px) {
  .nav__links {
    filter: drop-shadow(0 0 2px black);
    /* 研修用設定 */
    /* margin-right: 20px; */
  }
}

.nav__link+.nav__link {
  margin: 0;
}

.nav__link.tab01,
.nav__link.tab02,
.nav__link.tab03,
.nav__link.tab04,
.nav__link.tab05 {
  margin-right: -1.852vw;
}

@media (min-width: 1081px) {

  .nav__link.tab01,
  .nav__link.tab02,
  .nav__link.tab03,
  .nav__link.tab04,
  .nav__link.tab05 {
    margin-right: -20px;
  }
}

.nav__link.tab01 {
  z-index: 500;
}

.nav__link.tab02 {
  z-index: 400;
}

.nav__link.tab03 {
  z-index: 300;
}

.nav__link.tab04 {
  z-index: 200;
}

.nav__link.tab05 {
  z-index: 100;
}

.nav__link a {
  font-size: 1.4816vw;
  width: 14.816vw;
  height: 5.9264vw;
  border-bottom: none;
  background-image: url('../img/tab-inactive.svg');
  background-size: cover;
  border-radius: 0;
  color: #EE334E;
  gap: 0.463vw;
}

@media (min-width: 1081px) {
  .nav__link a {
    font-size: 16px;
    gap: 5px;
    width: 160px;
    height: 64px;
  }
}

.nav__link a .icon-white {
  width: 2.315vw;
  height: 2.315vw;
  background-image: url(../img/tab-icon-white.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1081px) {
  .nav__link a .icon-white {
    width: 25px;
    height: 25px;
  }
}

.nav__link a .icon-red {
  width: 2.315vw;
  height: 2.315vw;
  background-image: url(../img/tab-icon-red.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1081px) {
  .nav__link a .icon-red {
    width: 25px;
    height: 25px;
  }
}

.nav__link a.active_tab_start {
  color: #fff;
  background-image: url('../img/tab-active-start.svg');
  background-size: cover;
}

.nav__link a.inactive_tab_start {
  background-image: url('../img/tab-inactive-start.svg');
  background-size: cover;
}

.nav__link a.active_tab {
  color: #fff;
  background-image: url('../img/tab-active.svg');
  background-size: cover;
}

.nav__link a.active_tab_left {
  background-image: url('../img/tab-inactive01.svg');
  background-size: cover;
}

.nav__link a.inactive_tab_end {
  background-image: url('../img/tab-inactive-end.svg');
  background-size: cover;
}

.nav__link a.active_tab_end {
  color: #fff;
  background-image: url('../img/tab-active-end.svg');
  background-size: cover;
}

.nav__link.-ex {
  margin-left: 4.63vw;
  /* 研修用設定 */
  /* display: none; */
}

@media (min-width: 1081px) {
  .nav__link.-ex {
    margin-left: 50px;
  }
}

.nav__link.-ex a {
  color: #fff;
  background-image: url(../img/tab-ex.svg);
  background-size: cover;
  /* 研修用設定 */
  /* pointer-events: none; */
}

.nav__link.-ex a span:first-child {
  display: block;
  font-size: 1.389vw;
  line-height: 1.5;
}

@media (min-width: 1081px) {
  .nav__link.-ex a span:first-child {
    font-size: 15px;
    line-height: 1.5;
  }
}

.nav__link.-ex a span:last-child {
  display: block;
  font-size: 1.2038vw;
  line-height: 1.5;
}

@media (min-width: 1081px) {
  .nav__link.-ex a span:last-child {
    font-size: 13px;
  }
}


/* -------------------------------------------
	ポップアップ
------------------------------------------- */
/* ポップアップ共通設定 */
.overlay {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.show {
  visibility: visible;
}

.popUp-outer {
  background-color: #fff;
  border-radius: 1.852vw;
  width: 80%;
  overflow: hidden;
}

@media (min-width: 1081px) {
  .popUp-outer {
    background-color: #fff;
    border-radius: 20px;
  }
}

.popUp-outer.sliderPop {
  width: 80%;
}

.popUp-outer.sliderPop .popUpImg {
  max-width: 800px;
}

@media (min-width: 1081px) {
  .popUp-outer.sliderPop {
    /* width: 60%; */
    width: fit-content;
  }
}

.popUp {
  position: relative;
  overflow-y: auto;
  max-height: 80vh;
  border-radius: 1.852vw;
  background-color: #fff;
}

@media (min-width: 1081px) {
  .popUp {
    border-radius: 20px;
  }
}

.popUp-content {
  padding: 2.315vw;
  text-align: center;
}

@media (min-width: 1081px) {
  .popUp-content {
    padding: 25px;
  }
}

.popUp-text {
  display: flex;
  justify-content: center;
  max-width: 1080px;
  margin: 0.926vw auto 0;
  font-size: 1.6668vw;
  font-weight: bold;
  text-align: left;
}

@media (min-width: 1081px) {
  .popUp-text {
    font-size: 18px;
    margin-top: 10px;
  }
}

.popUp-saki-text {
  font-size: 1.6668vw;
  font-weight: bold;
  text-align: left;
}

@media (min-width: 1081px) {
  .popUp-saki-text {
    font-size: 18px;
  }
}

.popUp-content.sakiTweet {
  position: relative;
  padding: 2.315vw 18.52vw 4.63vw 7.408vw;
  text-align: center;
}

@media (min-width: 1081px) {
  .popUp-content.sakiTweet {
    padding: 25px 200px 50px 80px;
  }
}

.popUp-content-title {
  /* display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 37.04vw;
  font-size: 1.852vw;
  font-weight: bold;
  color: #fff;
  padding: 0.926vw 0;
  margin: 0 auto;
  border-radius: 100vh;
  background-color: #0081C8; */
  display: flex;
  gap: 0.926vw;
  /* justify-content: center; */
  align-items: center;
  /* width: 37.04vw; */
  font-size: 2.5928vw;
  font-weight: bold;
  color: #0081C8;
  padding: 0 0 0.926vw;
  margin: 0 0 0.926vw -4.3522vw;
  border-radius: 100vh;
}

@media (min-width: 1081px) {
  .popUp-content-title {
    /* width: 400px;
    font-size: 20px;
    padding: 10px 0;
    margin: 0 auto; */
    /* width: 400px; */
    gap: 10px;
    font-size: 28px;
    padding: 0 0 10px;
    margin: 0 0 10px -47px;
  }
}

.popUp-title {
  display: flex;
  gap: 0.926vw;
  justify-content: center;
  font-weight: bold;
  font-size: 2.4076vw;
  line-height: 1.6;
}

@media (min-width: 1081px) {
  .popUp-title {
    gap: 10px;
    font-size: 26px;
  }
}

.popUp-title.blue {
  color: #0081C8;
}

.popUp-title span {
  /* flex: 1; */
}

@media (min-width: 1081px) {
  .popUp-title span {}
}

.popUp-subTitle {
  font-weight: bold;
  font-size: 1.852vw;
}

@media (min-width: 1081px) {
  .popUp-subTitle {
    font-size: 20px;
  }
}

.popUp-2columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.852vw;
  max-width: 99.948vw;
  margin: 1.852vw auto 0;
}

@media (min-width: 1081px) {
  .popUp-2columns {
    gap: 20px;
    max-width: 1080px;
    margin-top: 20px;
  }
}

.popUp-column {
  padding: 1.852vw;
  background-color: rgb(211, 211, 211);
}

@media (min-width: 1081px) {
  .popUp-column {
    padding: 20px;
  }
}

.popUp-column h3 {
  min-height: 6.482vw;
  font-size: 1.852vw;
  font-weight: bold;
  padding-bottom: 0.926vw;
}

@media (min-width: 1081px) {
  .popUp-column h3 {
    min-height: 70px;
    font-size: 20px;
    padding-bottom: 10px;
  }
}

.popUp-column .popUpIll {
  width: 27.78vw;
}

@media (min-width: 1081px) {
  .popUp-column .popUpIll {
    width: 300px;
  }
}

.popUp-3columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.852vw;
  max-width: 99.948vw;
  margin: 1.852vw auto 0;
}

@media (min-width: 1081px) {
  .popUp-3columns {
    gap: 20px;
    max-width: 1080px;
    margin-top: 20px;
  }
}

.popUp-3columns .popUp-column h3 {
  min-height: 3.704vw;
  font-size: 1.852vw;
  font-weight: bold;
  padding-bottom: 0.926vw;
}

@media (min-width: 1081px) {
  .popUp-3columns .popUp-column h3 {
    min-height: 40px;
    font-size: 20px;
    padding-bottom: 10px;
  }
}

/* ポップアップ閉じるボタン */
.popUpClose {
  position: absolute;
  top: 1.852vw;
  right: 1.852vw;
  max-width: 3.704vw;
  cursor: pointer;
  z-index: 1;
}

@media (min-width: 1081px) {
  .popUpClose {
    top: 20px;
    right: 20px;
    max-width: 40px;
  }
}

/* QRポップアップ設定 */
.qrImage {
  width: 40%;
}

/* タマちゃんポイントポップアップ設定 */
.popUp-point-icon {
  max-width: 3.1524vw;
}

@media (min-width: 1081px) {
  .popUp-point-icon {
    max-width: 34px;
  }
}

.popUp-point {
  padding: 2.315vw;
  /* padding: 3.231vw;
  border-radius: 1.852vw;
  border: 0.2778vw solid #0081C8; */
}

@media (min-width: 1081px) {
  .popUp-point {
    padding: 25px;
    /* padding: 35px;
    border-width: 3px;
    border-radius: 20px; */
  }
}

.popUp-point li {
  text-align: left;
  font-size: 1.852vw;
  font-weight: bold;
  padding-left: 1.6668vw;
  padding-bottom: 0.926vw;
  text-indent: -1.6668vw;
}

@media (min-width: 1081px) {
  .popUp-point li {
    font-size: 20px;
    padding-bottom: 10px;
  }
}

.popUp-point li:last-child {
  padding-bottom: 0;
}

img.sakiIll {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 13.89vw;
}

@media (min-width: 1081px) {
  img.sakiIll {
    width: 150px;
  }
}

/* ヒントポップアップ設定 */
.popUp-hint-icon {
  max-width: 1.852vw;
}

@media (min-width: 1081px) {
  .popUp-hint-icon {
    max-width: 20px;
  }
}

.popUpImg {
  max-width: 99.948vw;
  margin: 1.852vw auto 0;
}

@media (min-width: 1081px) {
  .popUpImg {
    max-width: 1080px;
    margin: 20px auto 0;
  }
}

/* タマちゃんのつぶやきポップアップ */
.page__dialog {
  display: flex;
  align-items: flex-start;
  margin: 1.852vw auto 0;
  max-width: 99.948vw;
}

@media (min-width: 1081px) {
  .page__dialog {
    margin: 20px auto 0;
    max-width: 1080px;
  }
}

.page__dialog .-text {
  position: relative;
  min-height: 11.112vw;
  margin-right: 4.167vw;
  padding: 1.852vw 2.778vw;
  border: 0.463vw solid #0081C8;
  border-radius: 3.704vw;
  font-weight: bold;
  font-size: 1.6668vw;
  text-align: left;
  line-height: 3.3336vw;
}

@media (min-width: 1081px) {
  .page__dialog .-text {
    min-height: 120px;
    margin-right: 45px;
    padding: 20px 30px;
    border: 5px solid #0081C8;
    border-radius: 40px;
    font-size: 18px;
    line-height: 36px;
  }
}

.page__dialog .-text~.-text {
  margin-top: 20px;
}

.page__dialog .-text::after {
  position: absolute;
  top: 3.704vw;
  right: -3.1564vw;
  width: 3.4282vw;
  height: 4.167vw;
  background: url(../img/character-balloon-1.svg) no-repeat center center transparent;
  background-size: contain;
  content: "";
}

@media (min-width: 1081px) {
  .page__dialog .-text::after {
    top: 40px;
    right: -34px;
    width: 37px;
    height: 45px;
  }
}


/* 教師用ページポップアップ */
.teacher-popUp .popUp {
  position: initial;
}

.popUp-outer.teacher-popUp {
  border-radius: 0;
}

.teacher-popUp .popUpImg {
  max-width: 100%;
  margin: 0;
}

/* -------------------------------------------
	スピーカーマーク位置調整
------------------------------------------- */
.page__topic__content .impSoundBtn.-hasRuby {
  top: 0.2778vw;
}

@media (min-width: 1081px) {
  .page__topic__content .impSoundBtn.-hasRuby {
    top: 3px;
  }
}

.page__list__item .impSoundBtn {
  top: 1.852vw;
}

@media (min-width: 1081px) {
  .page__list__item .impSoundBtn {
    top: 20px;
  }
}


/* -------------------------------------------
	教師用ページ
------------------------------------------- */
/* 教員用ページレイアウト */
.teacher-page {
  height: initial;
  margin-bottom: 4.63vw;
}

@media (min-width: 1081px) {
  .teacher-page {
    height: initial;
    margin-bottom: 50px;
  }
}

.teacher-page-body {
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
}

/* 画面右上アイコン */
.pageHeader__link.-guide i.icon-student {
  background-image: url(../img/icon-student.svg);
}

/* 各見出し */
.mid-title {
  position: relative;
  width: 100%;
  color: #fff;
  /* margin: 6.482vw 0 1.852vw; */
  font-size: 2.4076vw;
  font-weight: bold;
  padding: 1.852vw;
  background-color: #800F41;
  flex: 1;
}

@media (min-width: 1081px) {
  .mid-title {
    /* margin: 70px 0 20px; */
    font-size: 26px;
    padding: 20px;
  }
}

.plus-margin {
  /* margin-top: 9.0748vw; */
}

@media (min-width: 1081px) {
  .plus-margin {
    /* margin-top: 98px; */
  }
}


/* データダウンロード */
.data-download {
  display: grid;
  gap: 3.704vw;
  grid-template-columns: 50% 1fr;
  align-items: center;
}

@media (min-width: 1081px) {
  .data-download {
    gap: 40px;
  }
}

.data-download-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.downloads-lead {
  font-size: 1.9446vw;
  font-weight: bold;
  line-height: normal;
  /* margin-bottom: 1.852vw; */
  flex: 1;
}

@media (min-width: 1081px) {
  .downloads-lead {
    font-size: 21px;
    /* margin-bottom: 20px; */
  }
}

.dl-title {
  font-size: 1.852vw;
  font-weight: bold;
  line-height: 2;
  padding-left: 0.926vw;
  margin-bottom: 1.852vw;
  border-left: solid 0.926vw #800F41;
}

@media (min-width: 1081px) {
  .dl-title {
    font-size: 20px;
    padding-left: 10px;
    margin-bottom: 20px;
    border-left: solid 10px #800F41;
  }
}

/* .font-normal {
  font-size: 1.4816vw;
  font-weight: normal !important;
}

@media (min-width: 1081px) {
  .font-normal {
    font-size: 16px;
    font-weight: normal !important;
  }
} */

.page__downloads {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  width: initial;
  margin: initial;
}

@media (min-width: 1081px) {
  .page__downloads {
    gap: 0.926vw;
  }
}

.dl01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.dl02 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.dl03 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.dl-notice {
  font-size: 1.1112vw;
  line-height: 1.6;
  text-indent: -1.1112vw;
  padding-left: 1.1112vw;
  grid-column: 1 / 3;
  grid-row: 3/4;
}

@media (min-width: 1081px) {
  .dl-notice {
    font-size: 12px;
    text-indent: -12px;
    padding-left: 12px;
  }
}

.dl04 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}


.page__downloads .impBtn+.impBtn {
  margin-top: 0;
}

.impBtn.-large a,
.impBtn.-large button,
.impBtn.-large input {
  height: 3.704vw;
  padding: 0 0.926vw;
  border-radius: 0.926vw;
  font-size: 1.2038vw;
}

@media (min-width: 1081px) {

  .impBtn.-large a,
  .impBtn.-large button,
  .impBtn.-large input {
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
  }
}

.impBtn.-white a,
.impBtn.-white button,
.impBtn.-white input {
  border: 0.2778vw solid #0076C3;
}

@media (min-width: 1081px) {

  .impBtn.-white a,
  .impBtn.-white button,
  .impBtn.-white input {
    border: 3px solid #0076C3;
  }
}

.impBtn.-gray a,
.impBtn.-gray button,
.impBtn.-gray input {
  color: #838383;
  border: 0.2778vw solid #838383;
}

@media (min-width: 1081px) {

  .impBtn.-gray a,
  .impBtn.-gray button,
  .impBtn.-gray input {
    border: 3px solid #838383;
  }
}

.impBtn.-download i {
  right: 1.8518518519vw;
  width: 1.4814814815vw;
  height: 1.4197530864vw;
}

@media (min-width: 1081px) {
  .impBtn.-download i {
    right: 20px;
    width: 16px;
    height: 15.33px;
  }
}

.impBtn.-download.-gray i {
  background: url(../img/icon-download-gray.svg) no-repeat center center;
  background-size: contain;
}






/* 授業の流れ（5ステップ） */
.swiper-container {
  margin-inline: auto;
  max-width: 1000px;
  position: relative;
  /* padding: 2.778vw 5.556vw 0; */
  /* padding: 2.778vw 0 0; */
}

@media (min-width: 1081px) {
  .swiper-container {
    /* padding: 30px 60px 0; */
    /* padding: 30px 0 0; */
  }
}

.swiper {
  max-width: 1000px;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

/* 前への矢印 */
.swiper-button-prev {}

/* 次への矢印 */
.swiper-button-next {}

.swiper-button-next,
.swiper-button-prev {
  width: initial !important;
  color: #800F41 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 4.63vw !important;
}

@media (min-width: 1081px) {

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 50px !important;
  }
}

.step-slide {
  position: relative;
  padding: 0 4.63vw;
}

@media (min-width: 1081px) {
  .step-slide {
    padding: 0 50px;
  }
}

.step-btn {
  position: absolute;
  /* right: 1vw;
  bottom: 1.2vw; */
  right: 0;
  top: 0;
  width: 13.89vw;
  height: 13.89vw;
}

.step-btn {
  position: absolute;
  /* right: 1vw;
  bottom: 1.2vw; */
  right: 8%;
  top: 10%;
  width: 13.89vw;
  height: 13.89vw;
}

@media (min-width: 1081px) {
  .step-btn {
    width: 150px;
    height: 150px;
  }
}

.slide-text {
  display: grid;
  gap: 0.926vw;
  grid-template-columns: auto 1fr;
  padding: 1.852vw 0;
  margin: 0 6.482vw;
  font-size: 1.852vw;
  font-weight: bold;
  /* text-align: center; */
  /* text-indent: -1.852vw; */
  /* color: #800F41; */
  /* padding-left: 1.852vw; */
}

@media (min-width: 1081px) {
  .slide-text {
    gap: 10px;
    padding: 20px 0 20px 0;
    margin: 0 70px;
    font-size: 20px;
    /* text-indent: -20px; */
  }
}

.slide-text span {
  color: #800F41;
  font-size: 3.241vw;
  line-height: 0.7;
}

@media (min-width: 1081px) {
  .slide-text span {
    font-size: 35px;
  }
}

.slide-text span .play-icon {
  width: 3.241vw;
  display: inline-block;
  margin-top: -0.2778vw;
  margin-left: 0.926vw;
}

@media (min-width: 1081px) {
  .slide-text span .play-icon {
    width: 35px;
    margin-top: -3px;
    margin-left: 10px;
  }
}

/* .swiper-pagination {
  transform: translate3d(0, 1.852vw, 0) !important;
}

@media (min-width: 1081px) {
  .swiper-pagination {
    transform: translate3d(0, 20px, 0) !important;
  }
} */

.swiper-pagination-bullet {
  width: 0.926vw !important;
  height: 0.926vw !important;
}

@media (min-width: 1081px) {
  .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
  }
}

.swiper-pagination-bullet-active {
  background-color: #800F41 !important;
}


.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: initial !important;
  /* top: var(--swiper-pagination-top, 0) !important; */
  /* left: 0; */
  /* width: 100%; */
  /* z-index: 0; */
}

@media (min-width: 1081px) {

  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: initial !important;
    /* top: var(--swiper-pagination-top, 0) !important; */
    /* left: 0; */
    /* width: 100%; */
    /* z-index: 0; */
  }
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 0.926vw) !important;
}

@media (min-width: 1081px) {

  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px) !important;
  }
}


/* ＋アルファ映像 */
.alpha-download {
  display: grid;
  gap: 3.704vw;
  grid-template-columns: 50% 1fr;
}

@media (min-width: 1081px) {
  .alpha-download {
    gap: 40px;
  }
}

.alpha-download-right {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.alpha-download img {
  width: 100%;
}

.alpha-btn {
  width: 25.7636vw !important;
}

@media (min-width: 1081px) {
  .alpha-btn {
    width: 278.23px !important;
  }
}

.mb-none {
  margin-bottom: 0px !important;
}

.alpha-column {
  display: grid;
  gap: 1.852vw 3.704vw;
  grid-template-columns: 50% 1fr;
}

@media (min-width: 1081px) {
  .alpha-column {
    gap: 20px 40px;
  }
}

.alpha-column img {
  width: 100%;
}

.alpha-lead {
  font-size: 1.4816vw;
  margin-bottom: 1.852vw;
}

@media (min-width: 1081px) {
  .alpha-lead {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

.alpha-lead span {
  display: block;
  padding-top: 0.926vw;
}

@media (min-width: 1081px) {
  .alpha-lead span {
    padding-top: 10px;
  }
}

.contact {
  margin: 7.408vw auto 0;
  padding: 2.778vw;
  border: 0.5556vw solid #e0e0e0;
  background-color: #f9f9f9;
}

@media (min-width: 1081px) {
  .contact {
    margin: 80px auto 0;
    padding: 30px;
    border: 6px solid #e0e0e0;
  }
}

.lastColumn {
  display: grid;
  gap: 5.556vw;
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1081px) {
  .lastColumn {
    gap: 60px;
  }
}

.alpha-column,
.contact,
.lastColumn {
  margin-top: 5.556vw;
}

@media (min-width: 1081px) {

  .alpha-column,
  .contact,
  .lastColumn {
    margin-top: 60px;
  }
}

.alpha-column {
  padding: 0;
}

@media (min-width: 1081px) {
  .alpha-column {
    /* padding: 0; */
  }
}

.contact {
  padding: 3.704vw;
}

@media (min-width: 1081px) {
  .contact {
    padding: 40px;
  }
}

.alpha-headline,
.contact-headline {
  font-size: 2.315vw;
  font-weight: bold;
  line-height: normal;
  grid-column: 1 / 3;
  color: #800F41;
}

@media (min-width: 1081px) {

  .alpha-headline,
  .contact-headline {
    font-size: 25px;
  }
}

.contact-headline {
  text-align: center;
}

.contact-lead {
  font-size: 1.4816vw;
}

@media (min-width: 1081px) {

  .contact-lead {
    font-size: 16px;
  }
}

/* .contact-btn {
  display: block;
  padding: 0.926vw 1.852vw;
  margin: 1.852vw auto 0;
  width: fit-content;
  border-radius: 0.926vw;
  color: #fff;
  font-weight: bold;
  background-color: #7c7c7c;
}

@media (min-width: 1081px) {
  .contact-btn {
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 10px;
  }
} */

.contact-btn {
  width: 23.15vw;
  margin: 1.852vw auto 0;
}

@media (min-width: 1081px) {
  .contact-btn {
    width: 250px;
    margin: 20px auto 0;
  }
}

i.icon-contact {
  background: url(../img/icon-contact.svg) no-repeat center center !important;
}

.-purple {
  border-radius: 0.926vw;
  background-color: #800F41;
}

@media (min-width: 1081px) {
  .-purple {
    border-radius: 10px;
  }
}

.headline {
  font-size: 1.852vw;
  font-weight: bold;
  line-height: 2;
  padding-left: 0.926vw;
  /* margin-bottom: 1.852vw; */
  border-left: solid 0.926vw #800F41;
}

@media (min-width: 1081px) {
  .headline {
    font-size: 20px;
    padding-left: 10px;
    /* margin-bottom: 20px; */
    border-left: solid 10px #800F41;
  }
}

.column-column {
  display: grid;
  gap: 1.852vw;
  grid-template-columns: 50% 1fr;
}

@media (min-width: 1081px) {
  .column-column {
    gap: 20px;
  }
}

.column-column p {
  /* font-weight: bold; */
}

.column-column img {
  width: 100%;
}

.link {
  display: block;
  margin-top: 20px;
  font-weight: bold;
  color: #800F41;
}

/* モーダルカスタム */
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #800F41 !important;
}

/* 音声付き */
.add-sound01 {
  display: flex;
  gap: 0.926vw;
  margin-top: 0;
  margin-bottom: 1.852vw;
  margin-left: -4.63vw;
}

@media (min-width: 1081px) {
  .add-sound01 {
    gap: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: -50px;
  }
}

.add-sound02 {
  display: flex;
  gap: 0.926vw;
  margin: 6.482vw 0 1.852vw;
  margin-left: -4.63vw;
}

@media (min-width: 1081px) {
  .add-sound02 {
    gap: 10px;
    margin: 70px 0 20px;
    margin-left: -50px;
  }
}

.add-sound03 {
  display: flex;
  gap: 0.926vw;
  margin-top: 9.0748vw;
  margin-bottom: 1.852vw;
  margin-left: -4.63vw;
}

@media (min-width: 1081px) {
  .add-sound03 {
    gap: 10px;
    margin-top: 98px;
    margin-bottom: 20px;
    margin-left: -50px;
  }
}

.add-sound04 {
  display: flex;
  gap: 0.926vw;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0.926vw;
}

@media (min-width: 1081px) {
  .add-sound04 {
    gap: 10px;
    margin-top: 0;
    margin-bottom: 10px;
  }
}

.add-sound05,
.add-sound06 {
  display: flex;
  gap: 0.926vw;
  /* margin-top: 9.0748vw; */
  margin-bottom: 1.852vw;
  margin-left: -4.63vw;
}

@media (min-width: 1081px) {

  .add-sound05,
  .add-sound06 {
    gap: 10px;
    /* margin-top: 98px; */
    margin-bottom: 20px;
    margin-left: -50px;
  }
}