/*Lity*/
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  max-width: calc(100vh/3*4) !important; /*横幅が変わる もともと964px*/
}

/* テキストページロードアニメ */
#mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgb(255, 255, 255);
  top: 0;
  left: 0;
  z-index: 10;
  visibility: hidden;
}
#mask.open {
  opacity: 1;
  visibility: visible;
}
/* ベースの本体 */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255);
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* 以下にローディングアニメーションCSS */

/* sample loader */
.loader,
.loader:after {
  border-radius: 50%;
  width: 120px;
  height: 120px;
}
.loader {
  font-size: 10px;
  border-top: 12px solid #6bb6ff;
  border-right: 12px solid #6bb6ff;
  border-bottom: 12px solid #6bb6ff;
  border-left: 12px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* common */
@font-face {
  /*フォントの名前*/
  font-family: "DreaMagic2_0_font";
  /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
  src: url("../font/DreaMagic2_0_font.woff") format("woff");
  /* src: url("https://smile-english.online/font/DreaMagic2_0_font.woff") format("woff"); */
}
@font-face {
  font-family: "Times_New_Roman";
  src: url("../font/Times_New_Roman.woff") format("woff");
  /* src: url("https://smile-english.online/font/Times_New_Roman.woff") format("woff"); */
}
html,
body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative;
  user-select: none;
}
a {
  cursor: pointer;
  text-decoration: none;
  color: rgb(0, 0, 0);
}
i {
  font-size: 20px;
}
h1 {
  font-size: 23px;
  margin: 0;
  padding-top: 0.5em;
}
h2 ,
h3 {
  margin: 0;
}
p {
  font-size: 20px;
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
rt { 
  margin-bottom: 0.4em;             /* Firefox 65		Edge 18  に効く*/
  transform: translateY(-0.4em);    /* Chrome 72	Safari 12  IE 11  に効く*/
}
.w-30px {
  width: 30px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
}
.width-20 {
  width: 20%;
}
.width-25 {
  width: 25%;
}
.width-30 {
  width: 30%;
}
.width-40 {
  width: 40%;
}
.width-45 {
  width: 45%;
}
.width-50 {
  width: 50%;
}
.width-60 {
  width: 60%;
}
.width-70 {
  width: 70%;
}
.width-75 {
  width: 75%;
}
.width-80 {
  width: 80%;
}
.width-90 {
  width: 90%;
}
.width-100 {
  width: 100%;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-70 {
  margin-top: 70px;
}
.m-auto {
  margin: 0 auto;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-70 {
  margin-bottom: 70px;
}
.mb-100 {
  margin-bottom: 100px;
}
.mr-15 {
  margin-right: 15px;
}
.ml-15 {
  margin-left: 15px;
}
.p-40 {
  padding: 40px;
}
.pt-10 {
  padding-top: 10px;
}
.bold {
  font-weight: bold;
}
.font-normal {
  font-weight: normal;
}
.js-check {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 6;
}
img { 
  max-width: 100%;
  vertical-align: bottom;
}
#container .swiper-slide > img {
  height: calc(100vh - 65px);
  vertical-align: bottom;
}
.relative {
  position: relative;
}
.quiz button {
  width: auto;
  height: 50px;
}
.star {
  padding: 0;
  margin: 0px 10px;
  font-size: 30px;
  color: rgb(243, 49, 49);
  background: rgb(255, 255, 255);
}
.lesson-number {
  font-size: 40px;
  letter-spacing: 4px;
}
.font-family-y {
  font-family: "游ゴシック体";
}
.font-family-d {
  font-family: "DreaMagic2_0_font";
}
.font-family-t {
  font-family: "Times_New_Roman";
}
.copy-right {
  position: absolute;
  bottom: 30px;
  right: 15px;
  font-family: "Times_New_Roman";
}
.withdrawal {
  position: absolute;
  bottom: 60px;
  right: 15px;
  padding: 3px 6px;
  font-size: 25px;
  background: rgb(243, 44, 44);
  border-radius: 10px;
  font-family: "Times_New_Roman";
}
.withdrawal a {
  display: block;
  color: rgb(255, 255, 255);
}
.copy-right-movie {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: "Times_New_Roman";
}
.set {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 7px;
  border-bottom-left-radius : 10px;
  border-bottom-right-radius : 10px;
  border: 5px solid rgb(255, 255, 255);
  border-top: none;
  z-index: 1;
}
.notice-bell {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
}
.exclamation_mark {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
}
.return .notice-bell {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
}
.return .exclamation_mark {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
}
.clear {
  box-shadow: none !important;
}
.b-red {
  background: rgb(243, 44, 44);
}
.b-orange {
  background: rgb(233, 98, 8);
}
.b-yellow {
  background: rgb(255, 217, 0);
}
.b-green {
  background: rgb(105, 209, 92);
}
.b-blue {
  background: rgb(71, 120, 235);
}
.b-purple {
  background: rgb(188, 121, 219);
}
.yellow {
  color: #f6e206;
}
.red {
  color: rgb(221, 10, 10);
}
.orange {
  color: rgb(221, 87, 10);
}
.silver {
  color: #e3eaed;
}
.white {
  color: white;
}
.blue {
  color: rgb(85, 176, 230);
}
.i-red {
  color: rgb(235, 104, 104);
}
.i-orange {
  color: rgb(255, 167, 109);
}
.i-yellow {
  color: rgb(255, 217, 0);
}
.i-green {
  color: rgb(119, 240, 103);
}
.i-blue {
  color: rgb(131, 168, 255);
}
.i-purple {
  color: rgb(223, 152, 255);
}
.box {
  text-align: center;
  height: 100vh;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.flex-w {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.flex-c {
  display: flex;
  flex-direction: column;
  position: relative;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
nav > ul > li:last-of-type {
  margin: 0 10px 0 3px;
}
nav > ul > li:first-of-type {
  margin: 0 auto 0 10px;
}
.previous {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 25px;
  padding: 5px 15px;
  border: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.8);
  color: rgb(255, 255, 255);
  z-index: 1;
}
/* メッセージ */
.alert {
  margin: 20px auto;
}
.alert .alert-message {
  font-size: 16px;
  margin: 0;
}
.warning {
  padding: 10px 15px;
  color: rgb(175, 45, 45);
  background: rgb(250, 226, 226);
  border: 1px solid rgb(255, 150, 150);
  border-radius: 10px;
}
.success {
  padding: 10px 15px;
  color: rgb(12, 110, 12);
  background: rgb(224, 241, 222);
  border: 1px solid rgb(118, 206, 137);
  border-radius: 10px;
}

/* メガメニュー */
.menu nav img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.nav-open .menu {
  display: block;
  opacity: 1;
}
#menu li {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  align-items: center;
  margin: 15px auto;
}
.menu {
  width: 50%;
  padding: 30px 0px;
  background-color: rgba(255, 255, 255, 1);
  transition: all .6s;
  opacity: 1;
  position: absolute;
  top: 70px;
  left: 0;
  display: none;
  animation: amime 0.7s forwards;
  z-index: 5;
}
.menu:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 32px;
  margin-left: -11px;
  border: 15px solid transparent;
  border-bottom: 15px solid #ffffff;
}
.menu #close {
  border: none;
  background: none;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.menu .return a {
  width: 70px;
  height: 70px; 
  background: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.menu .return i {
  font-size: 35px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
  background-color: rgb(0, 0, 0);
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s;
  cursor: pointer;
}
.nav-open .black-bg {
  opacity: 0.3;
  visibility: visible;
}

.main-navi {
  margin-left: 10px;
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 1;
}
.main-navi .return a {
  width: 65px;
  height: 65px;
  background: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.main-navi .return i {
  font-size: 35px;
}
/* メガメニューここまで */

.band {
  border-bottom-left-radius : 10px;
  border-bottom-right-radius : 10px;
  border: 5px solid rgb(255, 255, 255);
  border-top: none;
}
.swiper-container {
  width: 100%;
}
.swiper-slide ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 60px;
  align-items: center;
}
.swiper-slide li {
  margin: 0 3px;
  padding: 0;
  align-content: center;
} 
.swiper-slide i {
  line-height: 40px;
}
.flex img {
  width: 80%;
  height: auto;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.flex-w img {
  width: 80%;
  height: auto;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.main {
  max-width: 1000px;
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  padding: 30px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.info {
  padding: 0 40px 30px;
}
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100vh - 90px);
  height: calc(100vh - 90px);
}
.main-video {
  height: calc(100vh - 60px);
  padding: 30px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-video h1 {
  padding-top: 0;
}
.main-video .songs-img {
  width: 500px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.main-video .mole-img {
  width: 600px;
  margin-top: 30px;
  margin-bottom: 30px;
}
/* load画面 */
#container {
  width: calc(100vh/3*4);
  height: 100vh !important;
  position: relative;
  display: block;
  margin: 0 auto;
  background: rgb(255, 255, 255);
}
/* login */
.login {
  width: 100%;
}
.login img {
  max-width: 35%;
  height: auto;
}
.login form > .form-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px auto;
}
.login form label {
  width: 160px;
  text-align: left;
  font-size: 22px;
}
.login form input {
  width: 40%;
  height: 35px;
  font-size: 30px;
  padding-left: 10px;
}
.forget {
  color: rgb(71, 120, 235);
  transition: 0.3s;
  font-family: "meiryo"
}
.forget:hover {
  color: rgb(0, 60, 200);
}
.privacy-agree {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.privacy-agree input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.login form .save input {
  width: 30px;
  height: 30px;
  font-size: 25px;
  margin-right: 20px;
}
.login form .save label {
  width: auto;
  font-size: 25px;
}
/* initial_email */
.message {
  width: 550px;
  margin: 0 auto;
}
.login .message form > .form-box {
  display: block;
  align-items: center;
  justify-content: center;
  margin: 25px auto;
  text-align: left;
}
.login .message form label {
  width: 160px;
  text-align: left;
  font-size: 22px;
}
.login .message form input {
  width: calc(100% - 17px);
  height: 35px;
  font-size: 30px;
  padding-left: 10px;
}
.message .privacy-agree input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.login h2 {
  margin: 20px 0;
  font-size: 25px;
}
.login p {
  margin-bottom: 30px;
  font-size: 16px;
}
.under-line {
  text-decoration: underline;
}
.navi > ul {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}
.navi > ul > li {
  margin: 0 20px;
}
/* reset pass */
.pass-select {
  text-align: left;
  margin: 5px auto;
}
.message form input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* thanksメッセージ */
.registration-text {
  width: 80%;
  margin: 0 auto;
}
.registration-text h2 {
  text-align: center;
}
.registration-text p {
  margin-bottom: 15px;
  font-size: 16px;
}
.registration-btn {
  width: 125px;
  padding: 8px 10px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  background: rgb(71, 120, 235);
  border-radius: 10px;
  border: 1px solid rgb(153, 153, 153);
  transition: 0.3s;
}
.registration-btn.red {
  background: rgb(226, 46, 46);
}
.registration-btn:hover,
.new-card:hover {
  background: rgb(0, 60, 200);
}
.registration-btn.red:hover {
  background: rgb(187, 28, 28);
}
/* 情報登録 */
.member-registration-form {
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.member-registration-form.flex-center {
  justify-content: center;
}
.member-registration-form-box {
  width: 48%;
  margin-bottom: 20px;
}
.member-registration form label {
  font-size: 18px;
}
.member-registration form input {
  display: block;
  width: 100%;
  height: 45px;
  font-size: 30px;
  box-sizing: border-box;
}
.member-registration form input[type="checkbox"] {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
}
.member-registration .agree {
  /* width: 85%; */
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin: 5px auto;
}
.member-registration .agree label {
  width: auto;
}
#password,
#password2,
#passcode,
#passcode2 {
  padding: 5px 30px 5px 10px;
}
.fa-eye,
.fa-eye-slash {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
/* logout */
.logout {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.logout a {
  color: rgb(85, 176, 230);
  font-size: 15px;
  transition: 0.3s;
}
.logout a:hover {
  color: rgb(100, 98, 185);
}
/* lesson page */
.lesson,
.vimeo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.lesson a {
  display: block;
  /* padding: 0.4rem 0.4rem; */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.lesson-contents {
  width: 70%;
}
#item {
  position: relative;
  z-index: 1;
}
#item .lesson li > a:first-of-type {
  width: 105px;
  text-align: left;
  padding: 0.6rem 0 0.4rem 1.5rem;
}
#item .lesson li:first-of-type > a:first-of-type {
  text-align: center;
  padding: 0.62rem 0.65rem 0.38rem 0.87rem;
}
#item .lesson li > div {
  margin: 0;
  padding: 0.6rem 1rem 0.4rem 1rem;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  cursor: pointer;
}
#item .flex {
  width: 115px;
  padding: 0.5rem 0.4rem;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.none {
  visibility: hidden;
}
.lesson progress {
  width: 75px;
  margin-left: 10px;
}
.lesson p {
  font-size: 18px;
}
.lesson .flex {
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 5px;
}
.lesson .btn-design {
  top: 60px;
}
.lesson i {
  font-size: 20px;
}
.lesson li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 95%;
  margin: 5px auto;
  font-size: 28px;
}
.lesson > li > div {
  width: 92px;
  text-align: left;
}
/* 購入可能 */
.price-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 70%; /* .book-shelf imgのサイズ */
  height: calc(20% + 3px);
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.price {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font: 24px bold;
  font-family: "Zen Maru Gothic", "游ゴシック体";
  color: rgb(255, 0, 0);
}
/* 購入済み */
.gray-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 5px);
  background-color: rgba(0, 0, 0, 0.5);
}
.bought {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  font: 24px bold;
  color: rgb(255, 255, 255);
  z-index: 1;
}
.book-shelf > .buy.book {
  border-bottom: none;
}
.book-shelf .buy input {
  width: 15px;
  height: 15px;
  margin: 10px 0 0 0;
}
.book-shelf .buy img {
  transform : none; 
}
/* 電子テキストプランを表示 */
.plan-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-top: 30px;
  font-family: "Zen Maru Gothic", "游ゴシック体";
}
.plan-table .thead {
  border-right: none;
  background: rgb(192, 192, 192);
}
.plan-table .thead:hover {
  background-color: rgb(192, 192, 192);
}
.plan-table tr {
  border-bottom: solid 1px #eee;
  border-right: solid 1px #eee;
}
.plan-table tr:hover {
  background-color: #d4e6ee;
}
.plan-table th,
.plan-table td {
  text-align: center;
}
.plan-table td:first-child {
  background: #e9727e;
}
.plan-table a {
  display: block;
  width: 40px;
  margin: 0 auto;
  font-size: 16px;
  color: rgb(255, 255, 255);
  background: rgb(226, 46, 46);
  border-radius: 10px;
  border: 1px solid rgb(153, 153, 153);
  transition: 0.3s;
}
.plan-table a:hover {
  background: rgb(187, 28, 28);
  cursor: pointer;
}
/* 購入 */
.purchase {
  width: 100%;
  margin-top: 30px;
  font-family: "Zen Maru Gothic", "游ゴシック体";
  border-collapse: collapse;
}
.purchase thead {
  background-color: rgb(192, 192, 192);
}
.purchase th,
.purchase td {
  text-align: center;
  border: 1px solid rgb(160, 160, 160);
}
.subtotal {
  width: 100%;
  margin-top: 30px;
  font-size: 18px;
  font-family: "Zen Maru Gothic", "游ゴシック体";
  border-collapse: collapse;
}
.subtotal td {
  text-align: right;
  border: 1px solid rgba(255, 255, 255, 0);
}
.procedure {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-family: "Zen Maru Gothic", '游ゴシック体';
}
.procedure > .red {
  margin-right: 20px;
  width: 100px;
}
.procedure > button {
  margin-left: 20px;
}
/* カード登録 */
.new-card {
  display: inline-block;
  padding: 2px 5px;
  margin-bottom: 2px;
  font-size: 16px;
  color: rgb(255, 255, 255);
  background: rgb(71, 120, 235);
  border-radius: 10px;
  border: 1px solid rgb(153, 153, 153);
  transition: 0.3s;
}
.card-create {
  text-align: center;
  font-family: "Zen Maru Gothic", "游ゴシック";
}
/* bookshelf */
.book-shelf {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.book-shelf > .book {
  width: 30%;
  text-align: center;
  padding: 0 1%;
  margin-top: 10px;
  border-bottom: 12px solid rgb(175, 107, 67);
}
.book-shelf img {
  width: 70%;
  height: auto;
  display: inline-block;
  transform : perspective(200px) rotateX(3deg); 
  vertical-align: bottom;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.swiper-wrapper {
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
/* textpage */
.face {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.frame-active {
  animation: frame-anime 1s;
  outline: 2px solid rgb(97, 131, 224)
}
@keyframes frame-anime {
}
.btn {
  width: 40px;
  height: 40px;
  background: linear-gradient(-30deg,  #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  border: none;
  border-radius: 50%;
}
.main-frame {
  width: 100%;
  height: 15px;
  display: flex;
  z-index: 2;
}
.main-frame > div {
  width: 10%;
  height: 15px;
  margin: 0 2px;
}
.main-frame > div:first-of-type {
  width: 10%;
  height: 15px;
  margin: 0 2px 0 0;
}
.main-frame > div:last-of-type {
  width: 10%;
  height: 15px;
  margin: 0 0 0 2px;
}
/* bookshelf modal */
.book-modal.book-modal-show {
  visibility: visible;
  opacity: 1;
}
.book-modal {
  width: calc(100% - 40px);
  max-width: 800px;
  padding: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgb(255, 255, 255);
  visibility: hidden;
  box-sizing: border-box;
  opacity: 0;
  transition: 0.3s;
  z-index: 2;
}
.book-modal #book-modal-close {
  border: none;
  background: none;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.book-modal-inner {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.book-modal-inner input {
  font-size: initial;
  padding: initial;
  margin: initial;
  height: initial;
}
.book-modal-inner p {
  font-size: 18px;
}
.book-modal-inner img {
  width: 50%;
}
.book-black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
  transition: all 0.7s;
  cursor: pointer;
}
/* songs for smile  mole*/
.movie {
  width: 700px;
}
.vimeo button {
  margin: 20px auto 0 auto;
}
.vimeo a {
  margin: 20px auto 0 auto;
}
.vimeo a i {
  line-height: 40px;
  margin: auto 12px;
}
.video-lesson-num {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0 auto;
  padding: 0;
  font-size: 60px;
  width: 100%;
  text-align: center;
  /* font-family: 'Times New Roman', Times, serif; */
}
.video-lesson-num-up {
  width: 100%;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0 auto;
  padding: 0;
  font-size: 40px;
  text-align: center;
}
.shadow-white {
  text-shadow:
  1px 0 0  rgb(255, 255, 255),
  0 1px 0  rgb(255, 255, 255),
  -1px 0 0 rgb(255, 255, 255),
  0 -1px 0 rgb(255, 255, 255);
}
.shadow-blue {
  text-shadow:
  1px 0 0  rgb(25, 0, 255),
  0 1px 0  rgb(25, 0, 255),
  -1px 0 0 rgb(25, 0, 255),
  0 -1px 0 rgb(25, 0, 255);
}
.shadow-black {
  text-shadow:
  1px 0 0  rgb(0, 0, 0),
  0 1px 0  rgb(0, 0, 0),
  -1px 0 0 rgb(0, 0, 0),
  0 -1px 0 rgb(0, 0, 0);
}
.video-lesson-num > .mole {
  color: rgb(0, 190, 25);
}
.video-lesson-num > .songs {
  color: rgb(255, 255, 255);
}
.video-lesson-num > .chants {
  color: rgb(100, 100, 100);
}
.video-lesson-num > .yoga {
  color: rgb(230, 230, 230);
}
.white-back {
  background: rgba(255, 255, 255, 0.6);
}
.movie-contens {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
/* quiz-shape */
.gray-out {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.circle-word:nth-of-type(odd) {
  background: rgb(255, 107, 181);
}
.circle-word:nth-of-type(even) {
  background: rgb(255, 187, 221);
}
.circle-text:nth-of-type(odd) {
  background: rgb(255, 129, 79);
}
.circle-text:nth-of-type(even) {
  background: rgb(252, 198, 82);
}
.circle-list:nth-of-type(odd) {
  background: rgb(30, 190, 30);
}
.circle-list:nth-of-type(even) {
  background: rgb(168, 255, 168);
}
.quiz-shape {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.quiz-shape .flex-w {
  width: calc(100% - 195px);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}
.quiz-shape h2.list {
  width: 190px;
  font-size: 30px;
  letter-spacing: 1.2px;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  text-shadow:
  2px 0 0 rgb(30, 190, 30),
  0 2px 0  rgb(30, 190, 30),
  -2px 0 0  rgb(30, 190, 30),
  0 -2px 0  rgb(30, 190, 30);
}
.quiz-shape h2.word {
  width: 190px;
  font-size: 30px;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  text-shadow:
  2px 0 0 rgb(255, 0, 106),
  0 2px 0  rgb(255, 0, 106),
  -2px 0 0  rgb(255, 0, 106),
  0 -2px 0  rgb(255, 0, 106);
}
.quiz-shape h2.text {
  width: 190px;
  white-space: nowrap;
  letter-spacing: 1.6px;
  font-size: 30px;
  color: rgb(255, 255, 255);
  text-shadow:
  2px 0 0 rgb(248, 146, 63),
  0 2px 0  rgb(248, 146, 63),
  -2px 0 0  rgb(248, 146, 63),
  0 -2px 0  rgb(248, 146, 63);
}
.medal-flex {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.medal-flex .medal-open {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1px;
}
.dummy {/* メダルが入る前の点 */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
}
.example-text {
  font-size: 28px;
}
.quiz-select-box1 ul {
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.quiz-select-box1 li {
  width: 48%;
  height: 50px;
  margin-bottom: 10px;
  background: rgb(241, 129, 157);
  border-radius: 20px;
}
.quiz-select-box2 ul {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.quiz-select-box2 li {
  width: 48%;
  height: 50px;
  margin-bottom: 10px;
  background: rgb(133, 97, 190);
  border-radius: 20px;
}
.quiz-select-box3 ul {
  width: 100%;
  /* heightはコントローラーで記載 学年によりテキストクイズが増減 */
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.quiz-select-box3 li {
  width: 48%;
  height: 50px;
  margin-bottom: 10px;
  background: rgb(248, 146, 63);
  margin: 0;
  border-radius: 20px;
}
.quiz-select-box4 ul {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.quiz-select-box4 li {
  width: 48%;
  height: 50px;
  margin-bottom: 10px;
  background: rgb(30, 190, 30);
  border-radius: 20px;
}
.quiz-title {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: rgb(255, 255, 255);
}
.quiz-title p {
  font-size: 30px;
  margin: 0 5px;
}
.quiz-select-box1 .quiz-title p {
  margin: 0 0 0 10px;
}
.quiz-title img {
  width: 35px;
  height: auto;
  box-shadow: none;
}
.quiz-title i {
  font-size: 30px;
}
.quiz-word-list {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: rgb(255, 255, 255);
}
.quiz-word-list p {
  font-size: 30px;
  margin: 0 5px;
}

/* quiz */
.quiz {
  position: relative;
}
.quiz .question-img {/* 問題 */
  width: 150px;
  height: 150px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.question img {/* 選択肢 */
  border-radius: 10px;
  width: 170px;
  height: 170px;
  background: rgb(245, 245, 245);
}
.inline-block {
  display: inline-block;
}
.no-pointer {
  pointer-events: none;
}
.count-bar {/* 発声カウントダウンバー img*/
  display: flex;
  align-items: flex-end;
  position: absolute;
  left: -54px;
  bottom: 0;
  visibility: hidden;
}
.count-bar2 {/* 発声カウントダウンバー text*/
  display: flex;
  align-items: flex-end;
  position: absolute;
  left: 23%;
  bottom: -55px;
  visibility: hidden;
}
.count-bar3 {/* 発声カウントダウンバー text*/
  display: flex;
  align-items: flex-end;
  position: absolute;
  left: 23%;
  bottom: -55px;
  visibility: hidden;
}
.green-bar {/* 発声カウントダウンバー */
  width: 10px;
  height: 45px;
  background: rgb(105, 209, 92);
  margin: 0 3px;
  order: 0;
}
.yellow-bar{/* 発声カウントダウンバー */
  width: 10px;
  height: 30px;
  background: rgb(255, 217, 0);
  margin: 0 3px;
  order: 1;
}
.red-bar {/* 発声カウントダウンバー */
  width: 10px;
  height: 15px;
  background: red;
  margin: 0 3px;
  order: 2;
}
.quiz .btn {/* 10門クイズ再生ボタン 問題のほう*/
  width: 100px;
  height: 100px;
}
.quiz i {/* 10門クイズ再生ボタン 問題のほう*/
  font-size: 40px;
}
.next-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  transition: 0.5s;
}
.next-scroll.erase {
  opacity: 0;
}
.next-scroll i {
  font-size: 40px;
  color: rgb(100, 100, 100);
}
.rear {
  width: 100%;
  text-align: left;
  /* position: absolute; */
  /* bottom: 30px; */
  /* bottom: 150px; */
  /* left: 40px; */
}
.rear a {
  display: inline-block;
  padding: 6px 15px;
  /* border: 1px solid rgb(153, 153, 153); */
  border: 2px solid rgb(236, 29, 117);
  background: rgb(255, 90, 140);
  color: rgb(255, 255, 255);
  border-radius: 30px;
}
.understand-rear {
  width: calc(100% - 40px);
  position: absolute;
  bottom: 30px;
  /* bottom: 40px; */
  left: 40px;
}
.understand-rear a {
  display: inline-block;
  padding: 6px 15px;
  /* border: 1px solid rgb(153, 153, 153); */
  border: 2px solid rgb(236, 29, 117);
  background: rgb(255, 90, 140);
  color: rgb(255, 255, 255);
  border-radius: 30px;
}
.match {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 1;
}
.match a {
  display: block;
  padding: 15px 20px 3px;
  /* border: 1px solid rgb(153, 153, 153); */
  border: 2px solid rgb(0, 183, 0);
  background: rgb(55, 190, 60);
  color: rgb(255, 255, 255);
  border-radius: 30px;
}
.around {
  width: 100%;
  /* position: absolute; */
  position: static;
  margin-top: 35px;
  /* bottom: 30px; */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.decision {
  user-select: none;
}
.around .next,
.decision a {
  display: block;
  padding: 15px 20px 3px;
  border: 1px solid rgb(153, 153, 153);
  border-radius: 30px;
}
.around .next {
  border: 2px solid rgb(0, 183, 0);
  background: rgb(55, 190, 60);
  color: rgb(255, 255, 255);
}
.around .back {
  display: block;
  padding: 6px 15px;
  border: 2px solid rgb(236, 29, 117);
  background: rgb(255, 90, 140);
  color: rgb(255, 255, 255);
  /* border: 1px solid rgb(153, 153, 153); */
  border-radius: 30px;
}
.response {/* 発声返還後スタイル */
  width: 430px;
  height: 327.6px;
  margin: 15px auto 0 auto;
  text-align: center;
}
.response-text {
  width: 100%;
  font-size: 45px;
  padding: 10px 0;
  background: rgb(255, 255, 200);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.understand-answer {
  display: inline-block;
  text-align: center;
  padding: 15px 20px 3px;
  background: rgb(255, 250, 185);
  border: 1px solid rgb(153, 153, 153);
  border-radius: 30px;
  margin: 30px auto 0;
}
.flex-w.quiz {
  width: 70%;
  margin: 15px auto;
}
.flex-w.quiz img {
  width: 150px;
  height: 150px;
}
input {
  font-size: 30px;
  padding: 5px;
  height: 30px;
}
.answer {
  /* width はjsで指定 */
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.answer div:nth-of-type(1),
.answer div:nth-of-type(2),
.answer div:nth-of-type(3),
.answer div:nth-of-type(4),
.answer div:nth-of-type(6),
.answer div:nth-of-type(7),
.answer div:nth-of-type(8),
.answer div:nth-of-type(9) {/* answer divの右線消す */
  border-right: none;
}
.answer .border:nth-of-type(1),
.answer .border:nth-of-type(6) {/* answer borderの左角丸 */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.answer .border:nth-of-type(5),
.answer .border:nth-of-type(10) {/* answer borderの右角丸 */
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.answer > div:nth-of-type(1) > .b-yellow,
.answer > div:nth-of-type(6) > .b-yellow {/* answer＞divの左角丸(黄色) */
  border-top-left-radius: 10px;
}
.answer > .border:nth-of-type(5) > .b-yellow,
.answer > .border:nth-of-type(10) > .b-yellow {/* answer＞divの右角丸(黄色) */
  border-top-right-radius: 10px;
}
.answer img {
  width: 150px;
  height: 150px;
  vertical-align: bottom;
}
.text-box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.border {
  border: 1px solid rgb(0, 0, 0);
  box-sizing: border-box;
  margin-bottom: 10px;
}
.border-bottom {
  border-bottom: 1px solid rgb(0, 0, 0);
}
p.border-bottom {
  padding: 5px 0;
}
.check-answer {
  width: 50%;
  text-align: center;
  font-size: 30px;
  margin-left: auto;
  background: rgb(132, 204, 176);
  border-radius: 10px;
}
.scroll {
  width: 100%;
  height: calc(100vh - 200px);
  padding-right: 10px;
  overflow: scroll;
  overflow-x: hidden;
}
.scroll::-webkit-scrollbar {
  height: 5px;
  width: 5px;
  border-radius: 10px;
  background: rgb(207, 207, 207);
}
.scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: 0 0 4px #aaa inset;
}
.scroll::-webkit-scrollbar-thumb {
  background: rgb(155, 155, 155);
  border-radius: 10px;
  background: rgb(71, 120, 235);
}
.big-question {
  margin-bottom: 80px;
}
main.main .question-title {
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
  padding-top: 10px;
}
.question-title p {
  font-size: 25px;
}
.question-title:first-of-type {
  margin-top: 0px;
}
.question-title span,
.question span {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0px;
  text-align: center;
  line-height: 30px;
  font-size: 25px;
  border-radius: 5px;
  background: rgb(166, 199, 226);
  margin-right: 10px;
} 
.question-text {/* テキストクイズ問題文 */
  display: flex;
  margin-bottom: 40px;
}
.question-text p {
  margin-bottom: 15px;
  font-size: 25px;
}
.question-text span {
  width: auto;
  padding: 0px;
  text-align: left;
  font-size: 30px;
  background: rgb(255, 255, 255);
} 
.radiobutton {
  display: none;
}
.question-text label {
  display: inline-block;
  font-size: 30px;
  border: 1px solid rgb(230, 230, 230);
  padding: 5px 10px;
  margin: 3px 3% 3px 0;
}
.radiobutton:checked + label {
  box-shadow: 0 0 0 6px rgb(105, 209, 92);
  border-radius: 10px;
}
.contents-understanding,
.contents-sound-src {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  font-family: "Zen Maru Gothic", "游ゴシック体";
  font-size: 20px;
}
.contents-understanding.mt-40 {
  margin-top: 40px;
}
/* .contents-understanding.mt-60 {
  margin-top: 60px;
} */
.contents-understanding img {
  width: 100%;
  height: auto;
}
.contents-understanding .fix {/* 内容理解 ボタン*/
  width: 80px;
  height: 80px;
  font-size: 30px;
}
.contents-understanding .fix i {/* 内容理解 選択肢*/
  font-size: 20px;
}
.contents-understanding .fix > i {/* 内容理解 問題文*/
  font-size: 30px;
}
.contents-understanding .flex .btn {/* 10門クイズ 選択肢 音声認識 */
  width: 100px;
  height: 100px;
}
.contents-understanding .flex .btn i {/* 10門クイズ 選択肢 音声認識 */
  font-size: 50px;
}
.contents-understanding .choice button {/* 10門クイズ 選択肢123 */
  width: auto;
  height: 50px;
  margin: 0 auto;
}
.scroll .contents-understanding label {
  display: inline-block;
  font-size: 25px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 10px;
  padding: 7px 17px;
  margin: 0;
}
.scroll label {
  display: inline-block;
  font-size: 25px;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 10px;
  padding: 10px 15px;
  margin: 5px 0 5px 3%;
}
.contents-understanding .flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.contents-understanding .flex-w {
  width: 100%;
  justify-content: center;
  align-self: center;
  flex-wrap: nowrap;
}
.contents-understanding .flex-c p {/* 内容理解*/
  width: 150px;
  font-size: 25px;
  padding: 3px 12px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  color: rgb(0, 0, 0);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 25px;
  border: 1px solid rgb(0, 0, 0);
}
.judgment-voice {
  width: 300px;
  margin: 40px auto 0 auto;
  text-align: center;
  font-size: 35px;
  overflow-wrap: break-word;
  position: relative;
}
.voice > button {
  margin: 0 25px;
}
.d-none {
  display: none;
}
.align {
  display: flex;
  justify-content: center;
  align-items: center;
}
.choice {
  width: 100%;
}
.choice > ul {
  width: 100%;
}
.choice > ul > li {
  width: 50%;
  margin: 20px auto;
  font-size: 40px;
  padding: 5px 20px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.choice > ul > li + li {
  margin: 20px auto 0 auto;
}
.contents-understanding .choice > ul > li {
  width: 45px;
  height: 45px;
  margin: 0px auto;
  font-size: 30px;
  padding: 5px ;
  line-height: 45px;
  text-align: center;
}
.check {
  font-family: "Times_New_Roman", "Zen Maru Gothic", "游ゴシック体", "Yu Gothic";
  display: none;
}
.check p {
  font-size: 24px;
}
/* type */
.type img {
  width: 70%;
  height: auto;
  margin-top: 15px;
  border-radius: 0px;
}
.form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 430px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}
#type-img {
  max-width: 430px;
}
.form input {
  display: block;
  width: 90%;
  height: 40px;
  padding: 5px;
  font-size: 40px;
  margin-right: auto;
  /* font-family: "DreaMagic2_0_font"; */
}
#input_text {
  box-sizing: border-box;
  height: 54px;
}
.judge {
  position: relative;
}
#recordingslist {
  display: flex;
  align-items: center;
}
/* ○✕ */
.correct,
.incorrect {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  visibility: hidden;
  z-index: 3;

}
.correct i {
  font-size: 150px;
  color: rgba(255, 0, 0, 0.6);
}
.correct-img-voice {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  visibility: hidden;
  z-index: 3;
}
.correct-img-voice i {
  font-size: 150px;
  color: rgba(255, 0, 0, 0.6);
}
.batsu {
  width: 150px;/*枠の大きさ*/
  height: 150px;/*枠の大きさ*/
  position: relative;
  opacity: 0.6;
}
.batsu::before,
.batsu::after{
  content: "";
  display: block;
  width: 100%;/*バツ線の長さ*/
  height: 15px;/*バツ線の太さ*/
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}
.batsu::after{
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}
.choice .correct i {
  font-size: 80px;
  z-index: 3;
}
.choice .incorrect .batsu {
  width: 90px;/*枠の大きさ*/
  height: 90px;/*枠の大きさ*/
  position: relative;
}
.choice .batsu::before,
.choice .batsu::after{
  content: "";
  display: block;
  width: 100%;/*バツ線の長さ*/
  height: 10px;/*バツ線の太さ*/
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}
.choice .batsu::after{
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}
.form .correct,
.form .incorrect {
  top: 50%;
  left: -12%;
}
.form .correct i {
  font-size: 80px;
  z-index: 3;
}
.form .incorrect .batsu {
  width: 90px;/*枠の大きさ*/
  height: 90px;/*枠の大きさ*/
  position: relative;
}
.form .batsu::before,
.form .batsu::after{
  content: "";
  display: block;
  width: 100%;/*バツ線の長さ*/
  height: 10px;/*バツ線の太さ*/
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}
.form .batsu::after{
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}
.judgment-voice .correct,
.judgment-voice .incorrect {
  top: 50%;
  left: -75px;
}
.judgment-voice .correct i {
  font-size: 100px;
}
.judgment-voice .incorrect .batsu {
  width: 100px;/*枠の大きさ*/
  height: 100px;/*枠の大きさ*/
  position: relative;
}
.judgment-voice .batsu::before,
.judgment-voice .batsu::after {
  content: "";
  display: block;
  width: 100%;/*バツ線の長さ*/
  height: 9px;/*バツ線の太さ*/
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}
.judgment-voice .batsu::after{
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}
/* ○✕ */

/* 背景 */
.bg-mori {
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/MoleTown_BG.jpg);
}
.bg-yellow {
  background: rgb(243, 216, 62);
  padding: 35px;
}
.bg-songs {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Songs_for_Smile_BG.png);
}
.bg-chants {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Chants_BG.png);
}
.bg-yoga {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Smile_Yoga_Time_BG.png);
}
.bg-jam {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Josh-and-Moguzo-BG.png);
}
.bg-world {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/World_Tour_BG.png);
}
.bg-LA {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/LA_Report_BG.png);
}
.bg-ryogo {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Ryogo_in_Boston_BG.png);
}
.bg-channel {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Smile_Channel_BG.png);
}
.bg-jade {
  height: 100%;
  min-height: calc(100vh - 60px);
  background-size: cover;
  background-position: center;
  background-image: url(../img/Jade_In_Australia_BG.png);
}
.bg-orange {
  background: rgb(243, 142, 11);
}
.bg-gray {
  background: rgb(240, 240, 240);
}
.bg-wood {
  background-image: url(../img/bs-bg.png);
  background-repeat: repeat;
}
/* ボタンデザイン */
.btn-design {
  font-size: 20px;
  font-weight: 700;
  height: 30px;
  width: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #000000;
}
.btn-design > i {
  text-shadow: -1px -1px 1px rgb(199, 199, 199), 1px 1px 2px #353535;
}
.btn-design-radius-gradient-wrap {
  display: inline-block;
  padding: 6px;
  transition: all 0.3s;
  border-radius: 50%;
  background: #e3eaed;
  background: linear-gradient(to bottom, #cfcfcf 0%, #e8f7fd 37%, #96a1a5 100%);
}
.btn-red {
  background: linear-gradient(to bottom,rgb(202, 81, 81) 0%,  rgb(255, 133, 133) 37%, rgb(201, 93, 93) 100%);
}
.btn-orange {
  background: linear-gradient(to bottom,rgb(223, 120, 106) 0%,  rgb(255, 167, 109) 37%, rgb(214, 107, 74) 100%);
}
.btn-yellow {
  background: linear-gradient(to bottom,rgb(241, 165, 114) 0%,  rgb(255, 217, 0) 37%, rgb(236, 164, 91) 100%);
}
.btn-green {
  background: linear-gradient(to bottom,rgb(84, 175, 96) 0%,  rgb(119, 240, 103) 37%, rgb(67, 172, 72) 100%);
}
.btn-blue {
  background: linear-gradient(to bottom,rgb(83, 121, 177) 0%,  rgb(131, 168, 255) 37%, rgb(100, 98, 185) 100%);
}
.btn-purple {
  background: linear-gradient(to bottom,rgb(132, 83, 177) 0%,  rgb(223, 152, 255) 37%, rgb(138, 74, 175) 100%);
}
.btn-understaund {
  background: linear-gradient(-30deg,rgb(83, 121, 177) 0%,  rgb(131, 168, 255) 37%, rgb(100, 98, 185) 100%);
}

a.btn-design-radius-gradient {
  border-radius: 50%;
  background: #e3eaed;
  background: -webkit-linear-gradient(top, #e3eaed 0%, #f2f5f6 100%);
  background: linear-gradient(to bottom, #e3eaed 0%, #f2f5f6 100%);
}
a.btn-design-radius-gradient:active {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.set > .btn-design-radius-gradient-wrap {
  margin: 3px;
}
.btn-design.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* スワイプ矢印 */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: none !important;
}
.swiper-button-prev { 
  background: url(../img/image_l.png) no-repeat center;
  background-size: 25px 25px !important; 
  opacity: 0.3;
}
.swiper-button-next { 
  background: url(../img/image_r.png) no-repeat center;
  background-size: 25px 25px !important;
  opacity: 0.3;
}
/* 本棚 */
.arrow .swiper-button-prev {
  margin-top: 10px;
  position: absolute;
  left: 0px;
  opacity: 0.7;
}
.arrow .swiper-button-next {
  margin-top: 10px;
  position: absolute;
  right: 0px;
  opacity: 0.7;
}
/* 購入 */
.buy-list.arrow .swiper-button-prev {
  margin-top: -10px;
  position: absolute;
  left: 0px;
  opacity: 0.7;
  transform: translateY(-50%);
}
.buy-list.arrow .swiper-button-next {
  margin-top: -10px;
  position: absolute;
  right: 0px;
  opacity: 0.7;
  transform: translateY(-50%);
}
.movie .swiper-button-prev {
  opacity: 1;
}
.movie .swiper-button-next {
  opacity: 1;
}
/* look設定ボタン */
.switch {
  display: flex;
  align-items: center;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0 auto;
}
.switch p {
  margin-right: 10px;
  font-size: 20px;
}
.switch_label {
  width: 60px;
  position: relative;
  display: inline-block;
}
.switch_content {
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 30px;
  height: 31px;
  overflow: hidden;
}
.switch_content:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  top: 0;
  left: 0;
  border: 1.5px solid #E5E5EA;
  border-radius: 30px;
  background-color: #fff;
}
.switch_content:after {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  border-radius: 30px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.switch_input {
  display: none;
}
.switch_circle {
  display: block;
  top: 2px;
  left: 2px;
  position: absolute;
  -webkit-box-shadow: 0 2px 6px #999;
          box-shadow: 0 2px 6px #999;
  width: 27px;
  height: 27px;
  /* -webkit-border-radius: 20px; */
          border-radius: 30px;
  background-color: #fff;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.switch_input:checked ~ .switch_circle {
  left: 31px;
}
  
.switch_input:checked ~ .switch_content:after {
  background-color: #4BD964;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.swiper-button-disabled {
  display: none !important;
}
.progress-thin-base {
  display: block;
  background-color: #f5f5f5;
  width: 100%;
  height: 8px;
  margin-left: 10px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
/* プログレスバー色がついている部分（色の指定は別） */
.progress-bar {
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
/* しましましている部分 */
.progress-border {
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: repeating-linear-gradient(45deg, rgb(0, 255, 228), rgb(30, 85, 30) 40%, rgb(92, 255, 228));
  opacity: 0.2;
  animation: stripes-move 420s infinite linear;
}
.progress-end {
  height: 100%;
  border-radius: 3px;
  filter: blur(0.3px);
  background: linear-gradient(to right, rgb(224, 39, 39), rgb(243, 174, 46),rgb(241, 241, 77),rgb(88, 216, 95),rgb(54, 219, 219),rgb(103, 38, 209));
}
/* しましまアニメーション */
@keyframes stripes-move {
  0% { background-position-x: 0; }
100% { background-position-x: 10000px; }
}
/* ブログレスバーの色 */
.bg-info {
  background-color:#24dab2;
  border-radius: 3px;
}
/* モーダル(内容理解・テキストクイズ) */
#modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgb(160, 160, 160);
}
.modal-check {
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 500px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  margin: auto;
  opacity: 0;
  transition: all .6s;
  background: rgb(132, 204, 176);
  border-radius: 10px;
  z-index: 5;
}
.modal-open .modal-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  opacity: 1;
  z-index: 5;
}
.modal-open .black-bg {
  opacity: 0.5;
  visibility: visible;
}
/* モグマップ */
.map_all {
  position: fixed;
  /* position: absolute; */
  top: 0;
  right: 0;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  z-index: 0;
  opacity: 0;
  transition: 1s;
  background: rgba(0, 0, 0, 0.4);
}
.map {
  margin: auto;
  display: inline-flex;
  align-items: center;
  width: 100vh;
  height: 100vh;
}

/* map */
/* .mogu1 {
  position: absolute;
  top: 53.5%;
  right: 11.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu2 {
  position: absolute;
  top: 76.5%;
  right: 15.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu3 {
  position: absolute;
  top: 60%;
  right: 27.3%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu4 {
  position: absolute;
  top: 34.2%;
  right: 34.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu5 {
  position: absolute;
  top: 57.5%;
  right: 43.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu6 {
  position: absolute;
  top: 41%;
  right: 58.2%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu7 {
  position: absolute;
  top: 17.5%;
  right: 54.1%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu8 {
  position: absolute;
  top: 30%;
  right: 11%;
  width: 9%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu9 {
  position: absolute;
  top: 56%;
  right: 72.2%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu10 {
  position: absolute;
  top: 77.2%;
  right: 79.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
}
.mogu11 {
  position: absolute;
  top: 43%;
  right: 86.5%;
  width: 11%;
  height: auto;
  background: rgb(223, 223, 223);
} */
.seal {
  display: none;
  opacity: 0;
}
/* .mogu {
  display: none;
  position: absolute;
  top: 30%;
  right: 16%;
  width: 9%;
  height: auto;
  background: rgb(223, 223, 223);
  opacity: 0;
} */
.top-anime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 30%;
  height: auto;
  margin: auto;
  /* background: rgb(223, 223, 223); */
  opacity: 0;
}
.ready .top-anime {
  transform-origin: 0 50%;
  animation: top-anime 5s forwards;
  z-index: 3;
}
@keyframes scale-anime {
    0% { opacity: 1; transform: scale(0);}
  100% { opacity: 1; transform: scale(1);}
}
@keyframes top-anime {
    0% { opacity: 1; transform: translateY(-1000px) translateX(-50%);}
   68% { opacity: 1; transform: translateY(-50%) translateX(-50%);}
   85% { opacity: 1;}
  100% { opacity: 0;}
}
.master-medal {
  position: absolute;
  width: 30%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  display: none;
  opacity: 0;
  transform-origin: 0 50%;
  z-index: 2;
}
/* @keyframes top-anime {
    0% { opacity: 1; transform: scale(0) rotateY(1800deg) translateY(-1000px) translateX(-50%);}
   68% { opacity: 1; transform: scale(1) rotateY(0deg) translateY(-50%) translateX(-50%);}
   85% { opacity: 1;}
  100% { opacity: 0;}
} */

/* gifアニメ */
#flower { /* quiz.bladeで実装 */
  position: absolute;
  left:0;
  top:0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  overflow: hidden;
  z-index: 1;
}
#flower img {
  position: absolute;
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.medal {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  display: none;
  opacity: 0;
  animation: medal-anime 5s;
  transform-origin: 0 50%;
  z-index: 2;
}
.master-medal-bg {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  background-image: url(../img/medal-A.png);
  background-size: cover;
  opacity: 0.3;
  /* z-index: 2; */
}


/* @keyframes medal-anime {
  0% {opacity: 0; transform: rotateY(0) translateY(-50%) translateX(-50%);}
  5% {opacity: 0; transform: rotateY(1260deg) translateY(-50%) translateX(-50%);}
 40% {opacity: 1;}
 50% {opacity: 1; transform: rotateY(0) translateY(-50%) translateX(-50%);}
 75% {opacity: 1; transform: rotateY(0) translateY(-50%) translateX(-50%);}
100% {opacity: 0; transform: rotateY(0) translateY(-50%) translateX(-50%); }
} */
@keyframes medal-anime {
    0% { opacity: 1; transform: translateY(-1000px) translateX(-50%);}
   35% { opacity: 1; transform: translateY(-50%) translateX(-50%);}
   80% { opacity: 1;}
  100% { opacity: 0;}
}

/* correction */
.correction-container {
  max-width: 1000px;
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  padding: 30px 40px;
}
.correction {
  margin-top: 40px;
  width: 100%;
  font-family: "Times_New_Roman";
}
.correction-title {
  padding: 0;
  margin-bottom: 10px;
  color: rgb(30, 180, 170);
  font-size: 50px;
  text-align: center;
}
.correction input {
  font-size: initial;
  font-family: inherit;
  padding: initial;
  height: initial;
}
.correction button {
  font-family: inherit;
  display: inline-block;
  padding: 8px 10px;
  background: rgb(255, 217, 0);
  border-radius: 10px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: 0.3s;
  outline: none;
  border: none;
}
.correction button:hover {
  background: rgb(237, 202, 0);
}
.file-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.file-form label,
.file-form p,
.file-form button {
  margin: 10px 10px 0 0;
  font-size: 16px;
}
#file {
  position: absolute;
  opacity: 0;
  width: 10px;
}
.file-select-btn {
  display: inline-block;
  padding: 8px 10px;
  background: rgb(71, 120, 235);
  border-radius: 10px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: 0.3s;
}
.file-select-btn:hover,
.file-select-btn:focus {
  background: rgb(0, 60, 200);
}
.accordion_header {
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /* transition-duration: 0.2s; */
}
.accordion_inner + .accordion_header {
  margin-top: 5px;
}
.accordion-orange {
  background: rgb(233, 98, 8);
}
.accordion-yellow {
  background: rgb(255, 217, 0);
}
.accordion-green {
  background: rgb(105, 209, 92);
}
.accordion-purple {
  background: rgb(188, 121, 219);
}
.accordion_inner {
  display: none;
  padding: 10px;
  box-sizing: border-box;
}
.accordion-inner-orange {
  border-left: 2px solid rgb(233, 98, 8);
  border-right: 2px solid rgb(233, 98, 8);
  border-bottom: 2px solid rgb(233, 98, 8);
}
.accordion-inner-yellow {
  border-left: 2px solid rgb(255, 217, 0);
  border-right: 2px solid rgb(255, 217, 0);
  border-bottom: 2px solid rgb(255, 217, 0);
}
.accordion-inner-green {
  border-left: 2px solid rgb(105, 209, 92);
  border-right: 2px solid rgb(105, 209, 92);
  border-bottom: 2px solid rgb(105, 209, 92);
}
.accordion-inner-purple {
  border-left: 2px solid rgb(188, 121, 219);
  border-right: 2px solid rgb(188, 121, 219);
  border-bottom: 2px solid rgb(188, 121, 219);
}
.accordion_inner p {
  font-size: 16px;
}
.accordion_inner p + p {
  margin-top: 5px;
}
.accordion_inner ul {
  padding-left: 20px;
  margin-top: 5px;
}
.accordion_inner ul li {
  line-height: 30px;
  list-style-type: disc;
}
.accordion_inner rt {
  margin-bottom: 0.1em;             /* Firefox 65		Edge 18  に効く*/
  transform: translateY(-0.1em);    /* Chrome 72	Safari 12  IE 11  に効く*/
}
.letter-exclamation-mark {
  width: 16px;
  margin-right: 3px;
  vertical-align: text-bottom;
}
.correction table {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse;
}
.correction tr:nth-child(odd) {
  /* background: rgb(225, 225, 225); */
  background: rgba(71, 120, 235, .2);
  /* background: rgba(233, 98, 8, .2); */
  /* background: rgba(105, 209, 92, .2); */
  /* background: rgba(255, 217, 0, .2); */
  /* background: rgba(188, 121, 219, .2); */
}
.correction tr:nth-child(1) {
  /* background: rgb(225, 225, 225); */
  background: rgb(255, 255, 255);
}
.correction th:nth-child(1) {
  /* background: rgba(233, 98, 8, .7); */
  background: rgb(233, 98, 8);
}
.correction th:nth-child(2) {
  /* background: rgba(255, 217, 0, .7); */
  background: rgb(255, 217, 0);
}
.correction th:nth-child(3) {
  /* background: rgba(105, 209, 92, .7); */
  background: rgb(105, 209, 92);
}
.correction th:nth-child(4) {
  /* background: rgba(188, 121, 219, .7); */
  background: rgb(188, 121, 219);
}
.correction th {
  padding: 5px;
  color: rgb(255, 255, 255);
}
.correction td {
  padding: 15px 5px;
}
.correction td img {
  max-width: 50%;
  max-height: 100px;
}
.text-red {
  color: rgb(255, 0, 0);
  font-weight: bold;
}
.text-green {
  color: rgb(0, 150, 0);
  font-weight: bold;
}
.correction nav {
  /* ページネーション */
  margin: 20px 0;
  display: flex;
  justify-content: center;
  font-family: "Zen Maru Gothic", Arial, Helvetica, sans-serif;
}
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
  font-family: initial;
}
.pagination .page-item {
  margin: 0;
}
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: rgb(71, 120, 235);
  border-color: rgb(71, 120, 235);
}
.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: rgb(71, 120, 235);
  background-color: #fff;
  border: 1px solid #dee2e6;
}

@media(max-width: 1179px){
  .main-navi .return a {
    width: 40px;
    height: 40px;
  }
  .main-navi .return i {
    font-size: 25px;
  }
}
/* 1025px以上1366px以下の時のスタイル */
@media (min-width:1025px) and ( max-width:1366px) {
  body {
    position: relative;
  }
  .ml-30 {
    margin-left: 30px;
  }
  .copy-right {
    position: absolute;
    bottom: 30px;
    right: 15px;
    font-family: "Times_New_Roman";
  }

  .main-container.under {
    align-items: flex-start;
    height: calc(100vh - 90px);
  }
  .understand-rear {
    bottom: 80px;
  }
  .match {
    bottom: 80px;
  }
  .next-scroll {
    bottom: 80px;
  }
  .next-scroll i {
    font-size: 40px;
  }
}

/* 768px以上1024px以下の時のスタイル */
@media (min-width:768px) and ( max-width:1024px) {
  .main {
    min-height: calc(100vh - 90px);
  }
  .ml-30 {
    margin-left: 30px;
  }
  .main-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
  }
  .book-shelf {
    box-sizing: border-box;
  }
  .answer img {
    width: 130px;
    height: 130px;
  }
  .text-box {
    width: 130px;
    height: 130px;
  }
  .member-registration-form {
    width: 90%;
  }
  .member-registration form label {
    font-size: 18px;
  }
  .member-registration form input {
    font-size: 24px;
  }
  .count-bar2 {/* 発声カウントダウンバー text*/
    left: 22.5%;
  }

  .main-container.under {
    align-items: flex-start;
    height: calc(100vh - 90px);
  }
  .understand-rear {
    bottom: 80px;
  }
  .understand-rear a {
    font-size: 12px;
  }
  .match {
    bottom: 80px;
  }
  .match a {
    padding: 10px 20px 3px;
    font-size: 12px;
  }
  .next-scroll {
    bottom: 80px;
  }
  .next-scroll i {
    font-size: 30px;
  }
}

@media (max-width: 1023px) {
  .main-navi .return a {
    width: 35px;
    height: 35px;
  }
  .main-navi .return i {
    font-size: 25px;
  }
}

/* 767px以下の時のスタイル */
@media(max-width:767px){
  /* login */
  .login img {
    max-width: 250px;
    height: auto;
  }
  .login form > .form-box {
    width: 85%;
    display: block;
    text-align: left;
  }
  .login form label {
    font-size: 22px;
  }
  .login form input {
    width: calc(100% - 17px);
    font-size: 20px;
  }
  /* initial_email */
  .message {
    width: 90%;
    margin: 0 auto;
  }
  .login .message form > .form-box {
    width: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 25px auto;
    text-align: left;
  }
  .login .message form label {
    width: 160px;
    text-align: left;
    font-size: 22px;
  }
  .login .message form input {
    width: calc(100% - 17px);
    /* height: 30px; */
    font-size: 20px;
  }
  .message .privacy-agree input[type="checkbox"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .member-registration .agree {
    width: 90%;
  }
  .auto-text {
    width: 90%;
    margin: 0 auto;
  }
  .navi > ul {
    display: block;
  }
  .navi > ul > li {
    margin: 20px 0;
  }
  /* thanks mail */
  .registration-text {
    width: 90%;
    margin: 0 auto;
  }
  .registration-text h2 {
    text-align: left;
  }
  /* member */
  .member-registration form label {
    font-size: 18px;
  }
  /* reset pass */
  .pass-select {
    text-align: left;
    margin: 5px auto;
  }
  .message form input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  /*  bookshelf */
  .book-modal-inner p {
    font-size: 16px;
  }
  .btn-design {
    font-size: 20px;
    font-weight: normal;
    height: 25px;
    width: 25px;
  }
  .btn-design-radius-gradient-wrap {
    padding: 4px;
  }
  .btn-design-radius-gradient-wrap i {
    font-size: 15px;
  }
  #container {
    height: auto !important;
  }
  #container .swiper-slide > img {
    height: auto;
  }
  img { 
    max-width: 100%;
    height: auto;
  }
  .bg-gray {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
  }
  #container .swiper-slide > img {
    width: auto;
    /* height: calc(100vh - 300px); */
    height: calc(100vh - 180px);
  }
  .box {
    height: auto;
  }
  .menu {
    width: 100%;
  }
  .menu:before {
    margin-left: -15px;
  }
  .main {
    padding: 30px 20px;
    min-height: calc(100vh - 90px);
  }
  /* correction */
  .correction-container{
    padding: 30px 20px;
    min-height: calc(100vh - 90px);
  }
  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
  }
  .main-container.under {
    align-items: flex-start;
    height: calc(100vh - 90px);
  }
  .understand-rear {
    bottom: 70px;
  }
  .understand-rear a {
    font-size: 12px;
  }
  .match {
    bottom: 70px;
  }
  .match a {
    padding: 10px 20px 3px;
    font-size: 12px;
  }
  .next-scroll {
    bottom: 70px;
  }
  .next-scroll i {
    font-size: 25px;
  }
  .lesson-text-img {
    display: none !important;
  }
  .lesson-contents {
    width: 100%;
  }
  .lesson-number {
    margin: 15px 0;
  }
  .circle-none {
    display: none;
  }
  .star {
    display: none;
  }
  /* quiz */
  .quiz-select-box1 ul {
    height: auto;
    display: block;
  }
  .quiz-select-box1 li {
    width: 100%;
    height: 60px;
  }
  .quiz-select-box2 ul {
    height: auto;
    display: block;
  }
  .quiz-select-box2 li {
    width: 100%;
    height: 60px;
  }
  .quiz-select-box3 ul {
    height: auto !important; /* コントローラーでスタイルを変更しているので!important必須 */
    display: block;
  }
  .quiz-select-box3 li {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
  }
  .quiz-select-box4 ul {
    height: auto;
    display: block;
  }
  .quiz-select-box4 li {
    width: 100%;
    height: 60px;
  }
  .quiz-select-box3 .quiz-list p, 
  .quiz-select-box4 .quiz-word-list p {
    font-size: 25px;
  }
  .master-medal-bg {
    width: 300px;
    height: 300px;
  }
  /* プラン */
  .price,
  .bought {
    font-size: 20px;
  }
  .plan-table .thead {
    display: none;
  }
  .plan-table tr {
    width: 100%;
    border-right: none;
    border-bottom: none;
  }
  .plan-table td {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .plan-contents td:first-of-type {
    display: flex;
    justify-content: center;
  }
  .plan-table td:first-child {
    background: #e9727e;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .plan-table td:last-child {
    margin-bottom: 10px;
  }
  .plan-table td:before {
    content: attr(data-label);
    /* float: left; */
    font-weight: bold;
    /* margin-right: 10px; */
  }
  .plan-table a {
    margin: 0;
  }

  /* mypage */
  .member-registration-form {
    width: 100%;
    display: block;
    margin-bottom: 40px;
  }
  .member-registration-form-box {
    width: 90%;
    margin: 0 auto 20px;
  }
  .member-registration form input {
    display: block;
    width: 100%;
    font-size: 18px;
  }
  /* songs for smile  mole*/
  .vimeo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }
  .main-video {
    min-height: calc(100vh - 60px);
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-lesson-num {
    top: -15px;
    font-size: 40px;
  }
  .video-lesson-num-up {
    top: -15px;
    font-size: 30px;
  }
  .main-video .songs-img {
    width: 300px;
  }
  .main-video .mole-img {
    width: 300px;
  }
  .main-video .mt-70 {
    margin-top: 50px;
  }
  .main-video .mb-70 {
    margin-bottom: 50px;
  }
  /* .bg-mori,
  .bg-songs,
  .bg-chants,
  .bg-yoga,
  .bg-jam,
  .bg-world,
  .bg-LA,
  .bg-ryogo,
  .bg-channel,
  .bg-jade {
    height: 100%;
  } */
  .movie {
    width: 100%;
  }
  /* .video-lesson-num {
    width: 100%;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
  } */
  .movie-contens {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .movie-contens .width-45 {
    width: 280px;
  }
  .bg-yellow {
    width: 100%;
    background: rgb(243, 216, 62);
    padding: 15px 10px 20px 10px;
    box-sizing: border-box;
    margin: 10px auto;
  }
  /* 問題 sound */
  .quiz .btn {/* 10門クイズ再生ボタン 問題のほう*/
    width: 70px;
    height: 70px;
  }
  .quiz i {/* 10門クイズ再生ボタン 問題のほう*/
    font-size: 30px;
  }
  /* 問題 img */
  .quiz .question-img {
    width: 120px;
    height: 120px;
  }
  /* 選択肢 sound */
  .contents-understanding .flex .btn {/* 10門クイズ 選択肢 音声認識 */
    width: 70px;
    height: 70px;
  }
  .contents-understanding .flex .btn i {/* 10門クイズ 選択肢 音声認識 */
    font-size: 30px;
  }
  .contents-understanding .width-70 {
    width: 100%;
  }
  /* 選択肢 img */
  .question .flex img {
    width: 100px;
    height: 100px;
  }
  /* 選択肢 type */
  .form {
    width: 300px;
  }
  #type-img {
    width: 300px;
    height: auto;
  }
  .form input {
    height: 25px;
    padding: 5px;
    font-size: 30px;
    /* font-family: "DreaMagic2_0_font"; */
  }
  .decision a {
    display: block;
    padding: 15px 7px 3px;
    border: 1px solid rgb(153, 153, 153);
    border-radius: 30px;
  }
  .around {
    width: 100%;
    /* position: static; */
    /* margin-top: 40px; */
  }
  /* 発声 */
  .contents-understanding .flex-w.voice {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .judgment-voice {
    font-size: 30px;
  }
  .voice > button {
    margin: 15px 0px;
  }
  .judgment-voice .correct,
  .judgment-voice .incorrect {
    top: 50%;
    left: 50%;
  }
  .correct-img-voice i {
    font-size: 100px;
  }
  /* 内容理解 */
  .rear {
    width: calc(100% - 20px);
    position: absolute;
    bottom: 30px;
    left: 20px;
  }
  .contents-understanding .fix {/* 内容理解 ボタン*/
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
  .contents-understanding .fix i {/* 内容理解 選択肢*/
    font-size: 20px;
  }
  .contents-understanding .fix > i {/* 内容理解 問題文*/
    font-size: 25px;
  }
  .count-bar2 {/* 発声カウントダウンバー text*/
    left: 20%;
  }
  /* 〇✕ */
  .correct i {
    font-size: 90px;
  }
  .batsu {
    width: 100px;/*枠の大きさ*/
    height: 100px;/*枠の大きさ*/
  }
  .batsu::before,
  .batsu::after{
    height: 10px;/*バツ線の太さ*/
  }
  /* タイピング */
  .form .correct,
  .form .incorrect {
    top: 50%;
    left: 50%;
  }
  .form .correct i {
    font-size: 80px;
    z-index: 3;
  }
  .form .incorrect .batsu {
    width: 90px;/*枠の大きさ*/
    height: 90px;/*枠の大きさ*/
    position: relative;
  }
  .form .batsu::before,
  .form .batsu::after{
    content: "";
    display: block;
    width: 100%;/*バツ線の長さ*/
    height: 10px;/*バツ線の太さ*/
    background: #000;
    transform: rotate(45deg);
    transform-origin: 0% 50%;
    position: absolute;
    top: calc(14% - 5px);
    left: 14%;
  }
  .form .batsu::after{
    transform: rotate(-45deg);
    transform-origin: 100% 50%;
    left: auto;
    right: 14%;
  }
  .response {/* 発声返還後スタイル */
    width: 300px;
    height: 228.5px;
    margin: 15px auto 0 auto;
    text-align: center;
  }
  .response-text {
    width: 100%;
    font-size: 45px;
    padding: 10px 0;
    background: rgb(255, 255, 200);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  }
  /* answer */
  .answer {
   /* width はjsで指定 */
    justify-content: center;
    margin: 20px auto;
  }
  .answer .width-20 {
    width: 150px;
  }
  .answer > div:nth-of-type(2),
  .answer > div:nth-of-type(4),
  .answer > div:nth-of-type(6),
  .answer > div:nth-of-type(8),
  .answer > div:nth-of-type(10) {/* answer＞divの右線付与 */
    border-right: 1px solid rgb(0, 0, 0);
  }
  .answer .border:nth-of-type(1),
  .answer .border:nth-of-type(3),
  .answer .border:nth-of-type(5),
  .answer .border:nth-of-type(7),
  .answer .border:nth-of-type(9) {/* answer borderの右線消す 左角丸 */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: none;
  }
  .answer .border:nth-of-type(6) {/* answer borderの左角丸消す */
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .answer .border:nth-of-type(2),
  .answer .border:nth-of-type(4),
  .answer .border:nth-of-type(6),
  .answer .border:nth-of-type(8),
  .answer .border:nth-of-type(10) {/* answer borderの右角丸 */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .answer .border:nth-of-type(5) {/* answer borderの右角丸消す */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .answer > div:nth-of-type(1) > .b-yellow,
  .answer > div:nth-of-type(3) > .b-yellow,
  .answer > div:nth-of-type(5) > .b-yellow,
  .answer > div:nth-of-type(7) > .b-yellow,
  .answer > div:nth-of-type(9) > .b-yellow {/* answer＞divの左上角丸 */
    border-top-left-radius: 10px;
  }
  .answer > .border:nth-of-type(2) > .b-yellow,
  .answer > .border:nth-of-type(4) > .b-yellow,
  .answer > .border:nth-of-type(6) > .b-yellow,
  .answer > .border:nth-of-type(8) > .b-yellow,
  .answer > .border:nth-of-type(10) > .b-yellow {/* answer＞borderの右上角丸 */
    border-top-right-radius: 10px;
  }
  .answer > .border:nth-of-type(5) > .b-yellow {/* answer＞borderの右上角丸解除 */
    border-top-right-radius: 0px;
  }
  .answer > .border:nth-of-type(6) > .b-yellow {/* answer＞borderの右上角丸解除 */
    border-top-left-radius: 0px;
  }
  .check-answer {
    width: 65%;
    font-size: 28px;
  }
  /* 問題文 */
  .question-title p {
    font-size: 22px;
  }
  .small-question p {
    font-size: 21px;
  }
  /* モーダル */
  .modal-check {
    width: 320px;
    height: 180px;
  }
  /* correction */
  .correction-title {
    font-size: 30px;
  }
  .file-form label,
  .file-form p,
  .file-form button {
    font-size: 13px;
  }
  .correction th {
    padding: 5px 0;
    font-size: 12px;
  }
  .correction td {
    font-size: 13px;
  }
  .correction td img {
    max-width: 100%;
    max-height: 80px;
  }
  .accordion_header,
  .accordion_inner,
  .accordion_inner p {
    font-size: 13px;
  }
}

/* 400px以下の時のスタイル */
@media(max-width:400px) {
  #container .swiper-slide > img {
    height: calc(100vh - 300px);
  }
}

/* 400px以下 height700px以下の時のスタイル */
@media(max-width:400px) {
  @media(max-height:700px) {
    #container .swiper-slide > img {
      height: calc(100vh - 150px);
    }
  }
}

/* デバイス横向きの時のスタイル */
@media (orientation: landscape) {
  img { 
    max-width: 100%;
    height: auto;
  }
  .box {
    height: auto;
  }
  .main-container {
    width: 100%;
    height: auto;
    min-height: calc(100vh - 90px);
  }
  .plan-table a {
    margin-left: auto;
  }
}

/* 450px以下の時のスタイル */
@media (max-height:450px) {
  /* 本棚 */
  .book-modal-inner,
  .modal-inner {
    height: 340px;
    overflow-y: scroll;
  }
  .book-modal-inner p {
    font-size: 16px;
  }
  /* 目次ページ */
  .lesson li {
    font-size: 22px;
  }
  #item .lesson li > a:first-of-type {
    width: 80px;
    padding: 0.6rem 0 0.4rem 1rem;
  }
  #item .lesson li:first-of-type > a:first-of-type {
    padding: 0.62rem 0.42rem 0.38rem 0.58rem;
  }
  #item .flex {
    width: 80px;
  }
  .notice-bell,
  .exclamation_mark {
    width: 12px;
    height: 12px;
  }
  .return .notice-bell,
  .return .exclamation_mark {
    width: 12px;
    height: 12px;
  }
  /* テキストページ */
  #container .swiper-slide > img {
    height: calc(100vh - 45px);
  }
  #container .band {
    height: 40px;
  }
  .btn-design {
    font-size: 12px;
    height: 20px;
    width: 20px;
  }
  .btn-design-radius-gradient-wrap {
    padding: 3px;
  }
  .btn-design-radius-gradient-wrap i {
    font-size: 10px;
  }
  .face {
    width: 25px;
    height: 25px;
  }

  /* メガメニュー */
  #menu li {
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    align-items: center;
    margin: 5px auto;
  }
  .menu {
    width: 50%;
    padding: 23px 0 17px 0;
    top: 38px;
  }
  .menu:before {
    margin-left: -18px;
    top: -20px;
  }
  .menu #close {
    top: 6px;
    right: 6px;
  }
  .menu .return a {
    width: 50px;
    height: 50px; 
  }
  .menu .return i {
    font-size: 20px;
  }
  /* look設定ボタン */
  .switch {
    padding: 10px 20px 0 20px;
  }
  .switch p {
    font-size: 18px;
  }
  .switch_label {
    width: 50px;
  }
  .switch_content {
    height: 25px;
  }
  .switch_circle {
    width: 21px;
    height: 21px;
  }
  .switch_input:checked ~ .switch_circle {
    left: 27px;
  }
  .around {
    /* width: 100%; */
    /* position: static; */
    /* margin-top: 40px; */
  }
  /* songs for smile  mole */
  /* .bg-mori,
  .bg-songs,
  .bg-chants,
  .bg-yoga,
  .bg-jam,
  .bg-world,
  .bg-LA,
  .bg-ryogo,
  .bg-channel,
  .bg-jade {
    height: 100%;
  } */
  /* answer */
  .answer {
  /* width はjsで指定 */
    justify-content: center;
    margin: 20px auto;
   }
   .answer .width-20 {
     width: 150px;
   }
  .answer > div:nth-of-type(2),
  .answer > div:nth-of-type(4),
  .answer > div:nth-of-type(6),
  .answer > div:nth-of-type(8),
  .answer > div:nth-of-type(10) {/* answer＞divの右線付与 */
    border-right: 1px solid rgb(0, 0, 0);
  }
  .answer .border:nth-of-type(1),
  .answer .border:nth-of-type(3),
  .answer .border:nth-of-type(5),
  .answer .border:nth-of-type(7),
  .answer .border:nth-of-type(9) {/* answer borderの右線消す 左角丸 */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: none;
  }
  .answer .border:nth-of-type(6) {/* answer borderの左角丸消す */
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .answer .border:nth-of-type(2),
  .answer .border:nth-of-type(4),
  .answer .border:nth-of-type(6),
  .answer .border:nth-of-type(8),
  .answer .border:nth-of-type(10) {/* answer borderの右角丸 */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .answer .border:nth-of-type(5) {/* answer borderの右角丸消す */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .answer > div:nth-of-type(1) > .b-yellow,
  .answer > div:nth-of-type(3) > .b-yellow,
  .answer > div:nth-of-type(5) > .b-yellow,
  .answer > div:nth-of-type(7) > .b-yellow,
  .answer > div:nth-of-type(9) > .b-yellow {/* answer＞divの左上角丸 */
    border-top-left-radius: 10px;
  }
  .answer > .border:nth-of-type(2) > .b-yellow,
  .answer > .border:nth-of-type(4) > .b-yellow,
  .answer > .border:nth-of-type(6) > .b-yellow,
  .answer > .border:nth-of-type(8) > .b-yellow,
  .answer > .border:nth-of-type(10) > .b-yellow {/* answer＞borderの右上角丸 */
    border-top-right-radius: 10px;
  }
  .answer > .border:nth-of-type(5) > .b-yellow {/* answer＞borderの右上角丸解除 */
    border-top-right-radius: 0px;
  }
  .answer > .border:nth-of-type(6) > .b-yellow {/* answer＞borderの右上角丸解除 */
    border-top-left-radius: 0px;
  }
  .check-answer {
    width: 65%;
    font-size: 28px;
  }

  .main-container.under {
    align-items: flex-start;
    height: calc(100vh - 90px);
  }
  
  .understand-rear {
    bottom: 40px;
  }
  .next-scroll {
    bottom: 40px;
  }
  .match {
    bottom: 40px;
  }
  .match a {
    padding: 10px 20px 3px;
    font-size: 12px;
  }
  .main-container.under .scroll {
    /* width: 100%; */
    height: calc(100vh - 150px);
    /* padding-right: 10px;
    overflow: scroll;
    overflow-x: hidden; */
  }
}