@charset "utf-8";
.pc-only {
  display: none;
}

body{
	background: #fff;
}
.headingBody {
  margin: 0 4.7vw;
  font-size: 4.1vw;
}

#content.second-content {
  background-position: center top -12vw;
}
#content.second-content.myarea {
  padding-bottom: 6vw;
  background: #EAF8FF url(../images/sp_content_bg_long.png) repeat-x center top;
}
#content.second-content .contentHeader .heading h1{
  margin-bottom: 20vw;
}
#content.second-content .contentHeader .myarea-heading {
  display: flex;
  justify-content: center;
  height: 30vw;
  width: 80vw;
  line-height: 5vw;
  margin: 9vw auto 0;
  background: url(../../common/images/parts/sp_border_03.png) repeat-x center bottom 2vw;
  background-size: 11.7vw 1.1vw;
}
#content.second-content .contentHeader .myarea-heading h1 {
  padding-bottom: 2vw;
  margin-top: 2.5vw;
  margin-left: 5vw;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 4.5vw;
  line-height: 8.5vw;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  overflow-wrap: break-word;
}
#content.second-content .contentHeader .heading.mypage h1 {
  margin-bottom: 34vw;
}
#content.second-content .contentHeader .heading.mypage.no_member h1 {
  margin-bottom: 7.2vw;
}

#content.second-content .subTtl{
	text-align: center;
}
#content.second-content .subTtl span {
  display: inline-block;
  line-height: 1.3;
  margin-bottom: 6.3vw;
  padding: 4.1vw 2.2vw 3.1vw;
  font-size: 5vw;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  background: url("../../common/images/parts/sp_border_05.png") repeat-x center bottom;
  background-size: 6.6vw 1.3vw;
}
#content.second-content .subTtl + .txt{
  margin-top: -3.1vw;
  margin-bottom: 30px;
  font-size: 4.3vw;
  text-align: center;
}
#content.second-content .txtTtl{
	text-align: center;
  font-size: 5vw;
	font-weight: bold;
  margin: 0 0 20px;
}
#content.second-content .mypage-classroom {
	text-align: center;
  font-size: 4.5vw;
	font-weight: bold;
  margin-bottom: 2.3vw;
}
#content .wrapper .contentBody .confirm-sec .confirm-container p {
  text-align: center;
  margin-bottom: 1.6vw;
  font-size: 4.1vw;
  font-weight: bold;
  line-height: 1.5;
  padding: 25px 0;
  background: url("../../common/images/parts/pc_border_04.png") repeat-x left bottom;
}
#content .wrapper .mypage-contentBody .confirm-sec .confirm-container p {
  font-size: 4.1vw;
  font-weight: bold;
  line-height: 1.5;
  padding: 2.8vw 0;
  border-bottom: 1px solid #a3c4e4;
}
#content .wrapper .contentBody .confirm-sec .button-container .edit-btn.mail_availability{
  font-size: 3.2vw;
}
.edit-btn.orange{
	border: 2px solid #e8957a;
	background-color: #e8957a
}
.edit-btn.orange:hover{
	background-color: #fff;
}
.history.orange{
	border: 2px solid #e8957a;
	background-color: #e8957a
}
.history.orange:hover{
	background-color: #fff;
}
.edit-btn.yellow {
	border: 2px solid #fec00f;
  background: #fec00f url(../images/arrow_black.svg) no-repeat right 2vw center;
  background-size: 4.7vw 3.8vw;
  color:#333;
}
a:hover {
    color: #7dcdf4;
    text-decoration: underline;
}

.monitor_only_sp{
  font-size: 2vw;
}

#mypage-linkArea {
  width: 80vw;
  margin: 13vw auto;
  text-align: center;
}
#mypage-linkArea .mypage-link {
  color: #333;
  font-size: 4vw;
  font-weight: bold;
}
.mypage-btmBtnArea {
  width: 92vw;
  margin: 8vw auto;
}
#history_question,
#sappurin_question,
#gjm_question,
#myarea_question,
#stepup_question,
#kyozai_question {
  padding: 3vw 1.5vw 3vw 8vw;
  margin-bottom: 1vw;
  bottom: 2vw;
  background: url('../images/icn_question.svg') right center no-repeat;
  background-size: 6vw;
  cursor: pointer;
  position: absolute;
}
#content .wrapper .contentBody .confirm-sec .button-container .button-flex .edit-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  height: 14.4vw;
  position: relative;
  margin-bottom: 0;
  color: #fff;
  background: #e8957a;
}
#content .wrapper .contentBody .confirm-sec .button-container .button-flex .edit-btn + .edit-btn{
  margin-top: 20px;
}
#content .wrapper .contentBody .confirm-sec .button-container .button-flex .edit-btn p{
  text-align: left;
}
#content .wrapper .contentBody .confirm-sec .button-container .button-flex .edit-btn span{
  transform: translate(-2.6vw, -2.6vw);
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5vw;
  height: 8.5vw;
  border: 2px solid #fff;
  border-radius: 8.5vw;
  font-size: 2.4vw;
  font-weight: bold;
  letter-spacing: -0.25px;
  background: #F13E3A;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn .new {
  position: absolute;
  top: -6vw;
  right: 0vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon .edit-btn .new {
  position: absolute;
  top: -4vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn .new {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding-top: 1vw;
  width: 10vw;
  height: 10vw;
  border-radius: 10vw;
  font-family:  "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: normal;
  font-size: 3.5vw;
  letter-spacing: -0.25px;
  background: #dd0b4c;
  color: #fff;
}
#content .wrapper .contentBody .confirm-sec .button-container .button-flex .edit-btn:hover span{
  color: #fff;
}
#content .wrapper .contentBody.no_member {
  line-height: 1.5;
  padding: 4.2vw 5vw;
}
#content .wrapper .contentBody.no_member .border {
  border: 1px solid #000000;
  padding: 1.2vw;
  font-size: 4vw;
  font-weight: bold;
}

#content .wrapper .mypage-contentBody {
  margin: 0 4.8vw 13.5vw;
  padding: 8.7vw 4vw;
  border-radius: 18px;
  border-color:#5894ce;
  border-width: 2px;
  border-style: solid;
  background-color: #fff;
}
#content .wrapper .mypage-contentBody.classInfo {
  margin-bottom: 20vw;
}
#content .wrapper .mypage-contentBody.other {
  margin-bottom: 14vw;
}
#content .wrapper .mypage-contentBody.stepup {
  margin-bottom: 10.5vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn span {
  display: block;
  height: 15.6vw;
  line-height: 6vw;
  padding-top: 2vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .myarea-img {
  margin: 0 auto 7.6vw;
  width: 75vw;
  height: 75vw;
  display: block;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn.disabled {
  pointer-events: none;
  border-color: #808080;
  background-color: #808080;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon .button-flex .edit-btn {
  justify-content: left;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon a {
 display: flex;
 align-items: center;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon p {
  margin-left: 3vw;
  margin-right: 15vw;
  line-height: 5.5vw;
  text-align: left;
 }
 #content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon p::after{
  content: 'さん';
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon .edit-btn {
  border-radius: 14vw;
  height: 24vw;
  line-height: 10vw;
  position: relative;
 }
 #content .wrapper .mypage-contentBody .confirm-sec .button-container .edit-btn:not(:first-child) {
  margin-top: 5.2vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.myarea .edit-btn:not(:first-child) {
  margin-top: 4vw;
}
#content.second-content.myarea .contentHeader .myarea-heading img {
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  width: 20vw;
  height: 20vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container.mykumon img {
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  width: 20vw;
  height: 20vw;
  margin-left: 3vw;
}
#content.second-content .ikumon-coin-content {
  margin: auto;
  padding: 6.4vw 15vw;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: url("../images/iKUMON_coin_SP.png") no-repeat center center;
  background-size: 82vw 40vw;
}
#content.second-content .ikumon-coin-box{
  background: #fff;
  padding: 4vw 5vw;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 0 10px rgba(204,204,204,0.7);
}
#content.second-content .ikumon-coin-title{
  font-weight: bold;
  font-size: 4.3vw;
}
#content.second-content .ikumon-coin-number{
  font-weight: bold;
  font-size: 9vw;
  margin-top: 3vw;
  position: relative;
}
#content.second-content .ikumon-coin-number:before{
  background-image: url("../images/icn_coin.png");
  background-size: 7vw 7vw;
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 0.5vw;
  transform: translateX(-7.5vw);
  content: "";
}
#content.second-content .arrow-img {
  width: 15vw;
  height: 15vw;
  margin: 1.5vw auto 1.4vw;
  background: url("../images/arrow_SP.svg") no-repeat center center;
  background-size: 10vw 10vw;
}
#content.second-content .mypage-contentBody .mypage-question {
  display: flex;
  justify-content: center;
}
#content.second-content .mypage h2 {
  display: flex;
  justify-content: center;
  position: relative;
}
#content.second-content .mypage h2.myarea-center{
  padding-top: 30vw;
  margin-top: -30vw;
}
#content.second-content .mypage h2.myarea-center.myarea{
  padding-top: 10vw;
  margin-top: -10vw;
}
#content.second-content .mypage h2 span {
  position: relative;
  display: inline-block;
  line-height: 1.3;
  margin-bottom: 5.5vw;
  padding: 0 2.2vw 2.4vw;
  font-size: 5vw;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  background: url("../../common/images/parts/sp_border_05.png") repeat-x center bottom;
  background-size: 10vw 1.3vw;
}
#content.second-content .mypage h2 .procedure {
  padding-top: 0;
}
#content.second-content .mypage-contentBody h3 {
  text-align: center;
}
#content.second-content .mypage-contentBody h3 span {
  display: inline-block;
  line-height: 1.9;
  width: auto;
  height: auto;
  margin: -1vw 0;
  padding: 0 7vw 3.6vw;
  font-size: 3.6vw;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
#content.second-content .mypage-contentBody h3 span.gjm {
  padding-bottom: 5vw;
}
#content.second-content .mypage-contentBody .mypage-date {
  line-height: 1;
  width: auto;
  height: auto;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 3.6vw;
}
#content.second-content .mypage-contentBody .mypage-date:not(:first-of-type) {
  margin-top: 4vw;
  padding-top: 3.4vw;
  border-top: 1px solid #dfdfdf;
}
#content.second-content .mypage-contentBody .mypage-txt {
  display: inline-block;
  line-height: 1.45;
  width: auto;
  height: auto;
  padding-top: 2vw;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.8px;
}
#content.second-content .mypage-contentBody .mypage-txt a {
  padding-bottom: 5.5vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .button-flex .mypage-box{
  margin-top: 4vw;
}
#content .wrapper .mypage-contentBody.flex.setting .confirm-sec .button-container .button-flex .mypage-box:not(:first-child){
  margin-top: 13vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .button-container .button-flex .mypage-box:first-child {
  margin-top: 0;
}
#content .wrapper .mypage-contentBody .confirm-sec .confirm-container {
  margin-bottom: 5vw;
  border-top: 2px solid #a3c4e4;
  background-size: 4.7vw 0.6vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .confirm-container dl {
  padding: 2.7vw 0;
  border-bottom: 2px solid #a3c4e4;
  background-size: 4.7vw 0.6vw;
}
#content .wrapper .mypage-contentBody .confirm-sec .confirm-container dl dt {
  font-size: 4.1vw;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: -0.3px;
}
#content .wrapper .mypage-contentBody .confirm-sec .confirm-container dl dd {
  font-size: 4.1vw;
  line-height: 1.55;
}
#content .wrapper .mypage-btmBtnArea .auth-btn {
  margin: 13vw auto 10.4vw;
}
#content .wrapper .myarea-contentBody {
  overflow: hidden;
  margin: 6vw 4.8vw 33vw;
  padding: 8vw 4.7vw;
  border-radius: 18px;
  background-color: #fff;
}
#content .wrapper .myarea-contentBody .myarea-list .btn {
  width: 44vw;
  max-width: 49%;
  float: left;
}
#content .wrapper .myarea-contentBody .myarea-list .btn:not(:last-child) {
  margin-bottom: 1.5vw;
}
#content .wrapper .myarea-contentBody .myarea-list .btn:nth-child(2n) {
  float: right;
}
#content .wrapper .myarea-contentBody .myarea-list .linkBtn.history {
  font-size: 3vw;
  letter-spacing: 0;
}
#content .wrapper .myarea-contentBody .myarea-list .linkBtn {
  display: block;
  height: 14.5vw;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font-size: 3.2vw;
  letter-spacing: 1px;
  border: 2px solid #5894ce;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 2vw 0 7vw;
  background: #5894ce url("../images/anker_white.svg") no-repeat bottom 2vw center;
  background-size: 5vw 5vw;
}
#content .wrapper .myarea-contentBody .myarea-list .linkBtn.stepup{
  font-size: 2.3vw;
}

[data-button="mypage-type1"] {
  display: block;
  width: 100%;
  margin: auto;
  line-height: 15.2vw;
  border: 2px solid #5894ce;
  border-radius: 9.4vw;
  background: #5894ce url("../images/arrow_white.svg") no-repeat right 2.2vw center;
  background-size: 4.7vw 3.8vw;
  text-align: center;
  text-decoration: none;
  font-size: 4vw;
  font-weight: inherit;
  color: #fff;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
[data-button="mypage-type1"]:hover{
  color: #7dcdf4;
  text-decoration: underline;
}
[data-button="mypage-type2"] {
  display: block;
  line-height: 15vw;
  border: 2px solid #5894ce;
  border-radius: 9.4vw;
  background: #fff url("../images/arrow_blue.svg") no-repeat right 2.7vw center;
  background-size: 4.8vw 3.8vw;
  text-align: center;
  text-decoration: none;
  font-size: 4vw;
  font-weight: inherit;
  color: #5894ce;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
[data-button="mypage-type3"] {
  display: block;
  width: 90vw;
  padding-top: 1vw;
  line-height: 14.1vw;
  border: 2px solid #5894ce;
  border-radius: 10px;
  background: #fff url("../images/arrow_blue.svg") no-repeat right 3vw center;
  background-size: 4.8vw 3.8vw;
  text-align: center;
  text-decoration: none;
  font-size: 3.8vw;
  font-weight: inherit;
  color: #5894ce;
  font-family: "メイリオ", Meiryo, 'HiraKakuPro-W6', 'ヒラギノ角ゴ Pro W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ ProN W6', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
/*--------------------------------------------------*/
/*MODAL*/
/*--------------------------------------------------*/
.remodal .remodal-close{
  width: 30px;
  height: 30px;
  background: #5993CF url(../images/icn/icn_modal_close.svg) center center no-repeat;
  background-size: 36.667% auto;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  right: -15px;
}

.student-btn-list {
  display: flex;
  flex-direction: column;
}
.student-btn-list .icon-btn-wrapper:not(:first-child) {
  margin-top: 20px;
}
.icon-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn-wrapper .icon {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.icon-btn-wrapper .icon.item {
  padding: 8px;
}
.icon-btn-wrapper .icon img {
  border-radius: inherit;
  width: 100%;
}
.icon-btn-wrapper .icon.item img {
  border-radius: 0;
}
.icon-btn-wrapper .button-container {
  flex: 1;
  margin-left: 15px;
}
#content .wrapper .contentBody .confirm-sec .student-btn-list .icon-btn-wrapper .button-container .edit-btn {
  position: relative;
  border-radius: 14.4vw;
  padding: 1vw 12vw 1vw 7vw;
  height: auto;
  min-height: 14vw;
}
#content .wrapper .contentBody .confirm-sec .student-btn-list .icon-btn-wrapper .button-container .edit-btn p {
  display: flex;
  justify-content: center;
}
.student-btn-list .icon-btn-wrapper .button-container .edit-btn p::after {
  content: 'さん';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
#content .wrapper .contentBody .confirm-sec .student-btn-list .icon-btn-wrapper .button-container .edit-btn p span {
  display: inline-block;
  position: static;
  border: none;
  border-radius: 0;
  width: 100%;
  height: auto;
  background-color: transparent;
  letter-spacing: 1px;
  text-align: left;
  line-height: 5vw;
  font-size: 3.7vw;
  transform: none;
}
#content .wrapper .contentBody .confirm-sec .student-btn-list .icon-btn-wrapper .button-container .edit-btn:hover {
  text-decoration: none;
}
#content .wrapper .contentBody .confirm-sec .confirm-container dl.coin {
  display: flex;
  justify-content: space-between;
}
#content .wrapper .contentBody .confirm-sec .confirm-container dl.coin > * {
  flex-shrink: 1;
}
#content .wrapper .contentBody .confirm-sec .confirm-container dl.coin dt {
  width: auto;
  margin: 0;
}
#content .wrapper .contentBody .confirm-sec .confirm-container dl.coin dd {
  width: auto;
  min-width: 4em;
  padding: 0 1em;
  text-align: center;
}
#content .wrapper .contentBody .confirm-sec .icon-btn-wrapper .button-container .edit-btn {
  padding: 10px;
  width: auto;
  height: auto;
  min-height: 54px;
}
#content .wrapper .contentBody .confirm-sec .button-container .edit-btn.disabled {
  pointer-events: none;
  border-color: #808080;
  background-color: #808080;
}
#content .wrapper .contentBody .confirm-sec .button-container .edit-btn.multi-line {
  border-radius: 11.4vw;
  line-height: 5vw;
  padding: 18px;
}