@charset "UTF-8";

/*============================================

ノアオンライン用の mypage-noaonline.css に追加

============================================*/


/* マイページ共通部分
=============================================== */
a{
  color: inherit;
}
.r-over{
  cursor: pointer;
}
br.pad{
  display: none;
}
br.sp.pad{
  display: block;
}
br.pc{
  display: none;
}
.wrap{
  padding: 0 4%;
  width:100%;
  margin:0 auto;
  display:block;
}
@media (min-width: 600px) {
  /* br.sp{
    display: none;
  } */
  br.pad{
    display: block;
  }
}/* mq600 end */
/* @media screen and (min-width: 899px){
  .mypage-main h2 {
    font-size: 2rem;
    padding: .3em 0;
    margin-bottom: 1.5em;
  }
} */

@media (min-width: 960px) {
  br.sp{
    display: none;
  }
  br.pad{
    display: none;
  }
  br.sp.pad{
    display: none;
  }
  br.pc{
    display: block;
  }
}/* mq960 end */

dl{
  list-style: none;
}

/* ヘッダー アイコン */
.gnavi-main li a.nav-login {
  background-image: url(/assets-mypage/img/login.svg);
  background-size: auto 30px;
}
.gnavi-main li a.nav-mypage {
  background-image: url(/assets-mypage/img/mypage.svg);
  background-size: auto 30px;
}

@media (min-width:899px){
  .gnavi-main li a.nav-login {
    background-image: url(/assets-mypage/img/login-wh.svg);
  }
  .gnavi-main li a.nav-mypage {
    background-image: url(/assets-mypage/img/mypage-wh.svg);
  }
}/* end */

.mypage-container {
  padding-top: 1em;/* OS */
  padding-bottom: 1em;
}
.mypage-sec{
  margin-bottom: 5rem;
}
.mypage-maintitle{
  background: none;
  margin-bottom: .5em;
  font-size: 2em;
  padding: 0px;
}
.mypage-maintitle .ja{
  display: block;
  font-size: 0.5em;
}
.mypage-main {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
}

/* タイトル メンバー情報 ================================== */
.main-title {
  padding: 2em 0 .5em;/* OS */
}
.mypage-memberbox{
  padding-top: 0;
  color: #505050;
}
.mypage-memberbox h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: .2em;
}
.mypage-memberbox h2 span {
  font-size: .8em;
}
.mypage-memberbox p.id span {
  display: inline;
}
.mypage-memberbox p.id span {
  font-size: 1.3rem;
}
.mypage-memberbox p.id span:last-child {
  font-size: 1.6rem;
}

/* nav メニュー ================================== */
.mypage-menu ul {
  justify-content: space-between;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.mypage-menu li {
  width: 16.666%;
  margin-left: 0;
  line-height: 1.3;
}


/* @media screen and (max-width: 898px){
  .mypage-menu-fontsize {
    transform: scale(1);
  }
}
@media screen and (max-width: 410px){
  .mypage-menu-fontsize {
    transform: scale(0.8);
  }
} */
/* 400 */
@media screen and (min-width: 899px){
  .mypage-container {
    padding-top: 4em;
  }
  .mypage-menu {
      padding: 1.5em 0 0;
      margin-bottom: 4em;
  }
  .mypage-menu li {
    font-size: 1.2rem;
  }
  .mypage-menu li img {
    width: 50px;
  }
  .mypage-topcalendar section {
    width: 100%;
  }
}/* 769 */
@media screen and (min-width: 899px){
  .mypage-maintitle{
    font-size: 2.6em;
  }
}/* 960 */


/* ログアウトボタン ================================== */
.logout-wrap .mypage-linkbtn {
  background: #000;
  color: #fff;
  width: 70%;
  max-width:300px;
}
.logout-wrap {
  background: #fff;
  margin-top: 3rem;
}


/* ===================================================
 /mypage/index.html - INFORMATION 
=================================================== */
.mypage-info{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.mypage-info-block{
  margin-bottom: 2em;
}
.mypage-info-date{
  position: relative;
  display: block;
  color: #505050;
  float: left;
  width: 5em;
}
.mypage-info-date::after{
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0;
}
.mypage-info-ttl{
  font-size: 1.3rem;
  margin: 0 0 1em 6.2em;
  padding-top: .1em;
}
.mypage-info .swiper-button-next,.mypage-info .swiper-button-prev{
  width: 12px;
  background-size: 12px 44px;
}
.mypage-info .swiper-button-next{
  background-image: url(/assets-mypage/img/slide-next.svg);
  right: 8px;
}
.mypage-info .swiper-button-prev{
  background-image: url(/assets-mypage/img/slide-prev.svg);
  left: 8px;
}

@media screen and (min-width: 899px){
  .mypage-topcalendar section {
    width: 100%;
  }
}/* 769 */
@media screen and (min-width: 1100px){
  .mypage-topcalendar section {
    width: 48%;
  }
}/* 769 */

/* MY PAGE NEWS
========================================= */
.sec_news_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 1000px;
  margin: auto;
}
.sec_news_box{
  width: 48%;
  padding: .5rem 0 2.5rem;
}
.sec_news_detail{
  padding: 0.6rem 0 0;
}
.sec_news_time{
  font-size: 1.1rem;
  font-weight: 400;
  font-family: 'Outfit', sans-serif;
  color: #2996cc;
  padding: .2em 0;
  letter-spacing: 0.03em;
}
.sec_news_ttl{
  font-size: clamp(12px,1.2rem,14px);
  font-weight: 500;
  padding: .2em 0;
}

.mp_news_container{
  width: 100%;
  margin: auto;
}
.mp_news_container .sec_ttl_b {
  margin: 1em 0 1.2em;
}

@media (min-width: 899px) {
  .sec_news_block{
    display: flex;
    justify-content: space-between;
  }
  .sec_news_block{
    justify-content: space-between;
  }
  .sec_news_box{
    width: 23%;
    padding: 1rem 0 2.5rem;
  }
  .sec_news_box:not(:nth-of-type(4n)){
    margin-right: 2%;
  }

  .mp_news_container {
    max-width: 1000px;
  }
}/* mq769 end */


/* MY PAGE CONTACT ==================== */
.mp_contact_box{
  max-width: 40em;
  margin: auto;
}
.mp_contact_line_block {
  padding: 1.5em 0 .5em;
}

.mp_contact_line_ttl{
  font-size: 1.15em;
  font-weight: 600;
  text-align: center;
}
.mp_contact_line_list{
  display: flex;
  justify-content: space-between;
  gap: 3%s;
  max-width: 30em;
  margin: auto;
}
.mp_contact_line_list_box {
  width: 17%;
}
.mp_contact_line_list_ttl{
  font-size: 0.85em;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
.mp_contact_line_list_icon img{
  display: block;
  width: 66%;
  margin: .2em auto;
}
.mp_contact_line_list{
  margin-top: 1em;
}


/* ===================================================
 /mypage/member.html - PROFILE 
=================================================== */
.mypage_member_table_left {
  color: #505050;
  font-weight: 400;
  margin: 0 0 .4em;
}
.mypage_member_table_right{
  font-size: 1.2em;
}
.mypage_member_table_right.id{
  font-size: 1.5em;
}

.voice-course-box:not(:last-child){
  padding: 0 0 1em;
}
.voice-cource-period,.teacher-ttl{
  font-weight: 200;
  font-size: 0.9em;
}
.voice-cource-times{
  margin-left: .6em;
}
.teacher-ttl{
  margin-left: .2em;
}
.voice-member-btn-wrap{
  display: flex;
  justify-content: space-between;
  max-width: 280px;
}
.voice-member-btn{
  width: 48.5%;
  text-align: center;
  background-color: #969696;
  color: #fff;
  font-size: 0.8em;
  padding: .5em 0;
  margin-top: .4em;
  font-weight: 300;
  padding: 0.5em 0;
}
.voice-add-btn{
  display: block;
  background-color: #eb2465;
  width: 100%;
  max-width: 280px;
  padding: 1em 0;
  margin-top: 1em;
}

.mypage_member_table_flex.flex-top{
  align-items: flex-start;
}

@media screen and (min-width: 899px){
  .mypage_member_profile_basic {
    width: 100%;
    max-width: 800px;
  }
}/* 769 */



/* ===================================================
 /mypage/schedule.html 
=================================================== */

/* カレンダー部分 ============================= */
.mp-reserve-cal .flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  top: 0;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 180%;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  bottom: 0;
  margin: auto 0;
}

.mp-reserve-cal .flatpickr-months{
  margin-bottom: 0!important;
  font-family: 'Oswald', sans-serif;
}
.mp-reserve-cal-week{
display: flex;
justify-content: space-between;
margin-bottom: 1.5em;
border-bottom: 1px solid;
}
.mp-reserve-cal-week .time_list{
  width: calc(100% / 7);
  padding: 1em 0 .7em;
  text-align: center;
  font-size: 1.7rem;
  font-family: 'Oswald', sans-serif;
  color: #808080;
}
.mp-reserve-cal-week .cal-day{
  display: block;
  width: 2em;
  line-height: 2em;
  margin: 0 auto;
  cursor: pointer;
}
.mp-reserve-cal-week .cal-week{
  display: block;
  font-size: 0.764705em;
  margin-bottom: 0.4em;
}

.mp-reserve-cal-week .time_list.today .cal-day{
  display: block;
  background-color: #000;
  color: #fff;
}
.mp-reserve-cal-week .time_list.today .cal-week{
  color: #000;
}

/* スタイル選択 ============================= */
.mp-reserve-style{
  margin-bottom: 2em;
}
.mp-reserve-style-ttl{
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 0.4em;
}
.mp-reserve-style-checkbox{
  display: flex;
  justify-content: flex-start;
  font-family: 'Oswald', sans-serif;
}
.mp-reserve-style-checkbox li{
  width: 32%;
  margin-right: 2%;
  min-height: 44px;
}
.mp-reserve-style-checkbox li span{
  display: inline-block;
  /* margin-left: 2.2em; */
}
.mp-reserve-style-checkbox input{
  display: none;
}
.mp-reserve-style-checkbox label {
  font-size: .92em;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: .4em 0 .4em 2.1em;
  background-color: #e1e1e1;
  color: #808080;
  line-height: 1.2;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.mp-reserve-style-checkbox label:before {
  content: '';
  display: block;
  width: .6rem;
  height: 1.2rem;
  border-bottom: 2px solid #e1e1e1;
  border-right: 2px solid #e1e1e1;
  position: absolute;
  left: .8em;
  top: 1.2rem;
  transform: rotate(45deg);
}

.mp-reserve-style-checkbox input[type="checkbox"]:checked + label {
  background-color: #000;
  color: #fff;
}
.mp-reserve-style-checkbox input[type="checkbox"]:checked + label:before {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.mp-reserve-sche {
  padding-bottom: 3em;
}


/* レッスン表示 ============================= */
.mp-reserve-sche .disnon {
  display: none;
}
.mp-reserve-sche .content_wrap h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: .5em;
  padding: 0;
  background-color: transparent;
}
.mp-reserve-sche .content_wrap h2 span {
  font-size: 60%;
}

.mp-reserve-sche .content_wrap section {
  /* border-top: 1px solid #ddd; */
  padding: 2em 0 1.5em;
  position: relative;
}
.mp-reserve-sche .content_wrap section .time {
  font-size: 1.5em;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color: #aaa;
  position: absolute;
  width: 100%;
  top: -.75em;
  /* left: .5em; */
}
.mp-reserve-sche .content_wrap section .time::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
  width: calc(100% - 2.5em);
  height: 1px;
  background-color: #aaa;
}

.class-box{
  width: 95%;
  margin-left: auto;
  background: #fff;
  border-left: 3px solid #aaa;
  margin-bottom: 1em;
  background-color: #f2f2f2;
  padding: .8em .8em .8em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.class-box p{
  font-family: 'Oswald', sans-serif;
  line-height: 1.2;
}
.info{
  width: 68%;
  position: relative;
}
.lessoncat{
  font-size: 1.3em;
  color: #4d4d4d;
}
.lessoninst{
  font-size: 0.9em;
  color: #4d4d4d;
  margin-left: .5em;
}
.info-inner{
  display: flex;
  align-items: center;
  margin-bottom: .5em;
}
.class-box .lessontitle{
  font-size: 1em;
  margin: .2em 0 .5em;
  line-height: 1.3;  
}
.lessontime{
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* .lessontime::after{
  font-size: 80%;
  font-weight: 400;
  letter-spacing: 0;
} */
html .lesson-btn{
  width: 8.6rem;
  border: 1px solid;
  border-radius: .2em;
  padding: 1em 0;
  background-color: #4d4d4d;
  color: #fff;
}
.lesson-btn span{
  display:block;
  font-size: 1rem;
}

.group-capa{
  position: absolute;
  bottom: 0;
  left: 9em;
}

/* +CLASS名 */
.notaccept{
  opacity: .4;
}
.notaccept .lesson-btn{
  display: none;
}

.event-lesson.class-box{
  border-left: 3px solid #bb954a;
  background-color: #f8f4ed;
}
.event-lesson .lessoncat{
  color: #bb954a;
}
/* .event-lesson .lessontime::after{
  content: "まで";
} */
html .event-lesson .lesson-btn{
  background-color: #bb954a;
  color: #fff;
}

.group.class-box{
  border-left: 3px solid #4696aa;
  background-color: #ecf4f6;
}
.group .lessoncat{
  color: #4696aa;
}
/* .group .lessontime::after{
  content: "（60分）";
} */
html .group .lesson-btn{
  color: #fff;
  background-color: #4696aa;
}

/* .personal-60 .lessontime::after{
  content: "（60分）";
}
.personal-30 .lessontime::after{
  content: "（30分）";
} */

.reserved.class-box{
  border-left: 3px solid #f5718d;
  background-color: #feeef1;
}
.reserved.class-box .lesson-btn{
  background-color: transparent;
  color: #f5718d;
  border-color: #f5718d;
}

@media screen and (min-width: 899px){
  #schedule .mypage-main .wrap {
    max-width: 600px;
  }
}/* 769 */

/* レッスン表示 絞り込み用 */
.form-box{
  display: none;
}
[data-filter-view]:not([data-filter-view=""]) ~ .mp-reserve-sche .form-box{
  display: none;
}
[data-filter-view][data-filter-view~="1"] ~ .mp-reserve-sche .personal-60,
[data-filter-view][data-filter-view~="2"] ~ .mp-reserve-sche .personal-30,
[data-filter-view][data-filter-view~="3"] ~ .mp-reserve-sche .group{
  display: block;
}
[data-filter-view]:not([data-filter-view=""]) ~ .mp-reserve-sche .form-box.event-lesson{
  display: block;
}


/* ===================================================
 /mypage/lesson.html - RESERVE 
=================================================== */
.mypage-reserve {
  padding: 1em 0 4em;
}

/* RESERVE - INFO ==================== */
.mp-sche-info-block{
  margin-bottom: 2em;
}
.mp-sche-info-box{
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.mp-sche-times{
  font-size: 1.5rem;
  margin-right: .5rem;
}
.mp-sche-info-date{
  position: relative;
  display: block;
  /* color: #505050; */
  /* float: left; */
  min-width: 7em;/* OS */
  margin-right: 1em;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
}
.mp-sche-info-date::after{
  content: "";
  display: block;
  width: 1px;
  height: 1.1em;
  background-color: #505050;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0;
}
.mp-sche-info-date.twoline::after{
  height: 2.2em;
}
.mp-sche-info-ttl{
  font-size: 1.4rem;
  font-weight: 500;
}
.mp-sche-caption{
  font-size: 1.3rem;
}
.mp-sche-select-box{
  width: calc(100% - 7em);
  max-width: 10em;
}
.mp-sche-select-box select {
  width: 100%;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid #aaa;
  padding: .4em 2em .5em .4em;
  text-align: left;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  border-radius: 0;
  position: relative;
  appearance: none;
  cursor: pointer;
}
.mp-sche-select-box label{
  position: relative;
  text-align: left;
  display: block;
}
.mp-sche-select-box label::after {
  font-family: FontAwesome;
  height: 1em;
  content: "\f107";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3%;
  margin: auto 0;
  z-index: 1;
  pointer-events: none;
}


/* RESERVE - TABLE ==================== */
.res-col-date{
  width: 22%;
}
.res-col-studio{
  width: 20%;
}
.res-col-lesson{
  width: 45%;/* OS */
}
.res-col-status{
  width: 20%;/* OS */
}
.mypage-main #pref-past td{
  font-size: 1.3rem;
  /* line-height: 1.5; */
  text-align: center;
}
.mypage-main #pref-past td span{
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: .6em;
}
.mypage-main #pref-past td span:last-child{
  margin-bottom: 0;
}

.cat-event{color:#bb954a;}
.cat-group{color:#4696aa;}
.cat-personal{color:#4d4d4d;}

.mypage-main #pref-past .td-lesson-cancel{
  text-align: right;
  font-size: 1.1rem;
  color: #666;
  cursor: pointer;
}
.mypage-main #pref-past .td-lesson-cancel-follow{
  color: #FF503C;
}

.mypage-main #pref-past .td-lesson-cat::after{
  display: inline-block;
  font-size: 1rem;
  color: #666;
  margin-bottom: 0;
}
.mypage-main #pref-past .style-online::after{
  content:"［オンライン］";
}
.mypage-main #pref-past .style-link::after{
  content:"［スタジオリンク］";
}
.mypage-main #pref-past .td-lesson-group-capa{
  text-align: right;
  color: #333;
}

/* 講師ページ用================================= */
.td-lesson-student{
  position: relative;
  padding-right: 4em;
}
.td-lesson-student::after{
  position: absolute;
  display: inline-block;
  font-size: 1.05rem;
  color: #fff;
  background-color: #808080;
  padding: 0 1em .2em;
  border-radius: .2rem;
  margin-left: 1em;
  margin-bottom: 0;
  right: 0;
  bottom: 0;
}
.student-attend::after{
  content:"出 席";
}
.student-absent::after{
  content:"欠 席";
}
.student-cancel::after{
  content:"キャンセル";
  padding: 0 .3em .2em;
}
.mypage-main #pref-past .td-lesson-student-info{
  font-size: 1.1rem;
  color: #333;
}

@media screen and (min-width: 1600px){
  #lesson #pref-past section tbody td span{
    display: block;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
  #lesson #pref-past section tbody th, #pref-past section tbody td {
      padding: 1em 1em;
      font-size: 1.2em;
  }
}



/* ===================================================
 /mypage/talklist.html 
 /instmypage/talklist.html 
=================================================== */

.talklist-box{
  border-top:1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 1em;
  font-size: 1rem;
  line-height: 1.3;
}
.talklist-block>a:last-child .talklist-box{
  border-bottom:1px solid #e1e1e1;
}

.talklist-clip{
  width: 6.4em;
  height: 6.4em;
  border-radius: .5em;
  border: 1px solid #e1e1e1;
  overflow: hidden;
  box-sizing: border-box;
  transition:transform .3s;
}
.talklist-clip img{
  max-width: 100%;
  height: auto;
}
.talklist-info-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 8em);
}
.talklist-info-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition:transform .3s;
}
.talklist-info-teacher,.talklist-info-name{
  font-size: 1.6em;
}
.talklist-info-date{
  font-size: 1.15em;
  color: #aaa;
  text-align: center;
}
.talklist-info-date-stu{
  text-align: left;
}
.talklist-info-wrap p{
  padding: .2em 0;
}
.talklist-icon{
  display: block;
  width: 4.5em;
  height: 4.5em;
  margin: 0 auto .15em;
  background-size: 100%;
}
.talklist-icon.unread{
  background-image: url(/assets-mypage/img/talklist-icon-unread.svg);
  background-position: top center;
}
.talklist-icon.reply{
  background-image: url(/assets-mypage/img/talklist-icon-unread.svg);
  background-position: bottom center;
}
.talklist-attention {
  transform: scale(1);
  text-align: center;
  margin-bottom: 5rem;
}

/* 講師ページ用================================= */
.talklist-info-brands{
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
}
.talklist-info-brands.voat-school{
  color: #00ADEF;
}
.talklist-info-brands.noa-online{
  color: #EF00B6;
}
.talklist-info-brands.voice-online{
  color: #BB954A;
}
.talklist-info-brands.music-connect{
  color: #DC1E14;
}
.talklist-info-course{
  font-size: 1.2rem;
  color: #666;
}

.mp-talk-info-block{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
}
.tl-select-btn,.tl-cancel-btn{
  display:block;
  text-align: center;
  border: 1px solid;
  font-size: 1.2rem;
  width: 100px;
  padding-top:.1em;
  line-height: 3.2rem;
  position: relative;
}
.tl-select-btn{
  position: absolute;
}
.tl-select-btn-all::before,.tl-select-btn-all::after,.tl-cancel-btn::before,.tl-cancel-btn::after{
  position: absolute;
  content: "";
  width: 1px;
  height: .9em;
  top: 0;
  bottom: 0;
  left: -3.2em;
  right: 0;
  margin: auto;
  background-color:#000 ;
  transition: transform .2s;
}
.tl-select-btn-all::after{
  transform: rotateZ(90deg);
}
.tl-select-btn-all.checked{
  background-color: #000;
  color: #fff;
}
.tl-select-btn-all.checked::before{
  background-color: #fff;
  transform: rotateZ(45deg);
}
.tl-select-btn-all.checked::after{
  background-color: #fff;
  transform: rotateZ(135deg);
}
.tl-select-btn-all,.tl-cancel-btn{
  display: none;
  padding-left:1em;
}
.tl-cancel-btn{
  position:fixed;
  top: 0;
  right: 0;
}
.tl-cancel-btn{
  background-color: rgb(0, 0, 0, 0.7);
  color: #fff;
}
.tl-cancel-btn::before,.tl-cancel-btn::after{
  background-color:#fff ;
  left: -5.5em;
}
.tl-cancel-btn::before{
  background-color: #fff;
  transform: rotateZ(45deg);
}
.tl-cancel-btn::after{
  background-color: #fff;
  transform: rotateZ(135deg);
}
.tl-cancel-btn.checked{
  display: block;
}

.talklist-button{
  display:block;
  text-align: center;
  background-color: #EFEFEF;
  color: #666;
  font-size: 1.2rem;
  width: 180px;
  line-height: 3.2rem;
  padding-left:1.8em;
  padding-top:.19em;
  position: relative;
}
.talklist-button::before{
  position: absolute;
  content: "";
  width: 1.6rem;
  height: 1.2rem;
  top: 0;
  bottom: 0;
  left: 1.5em;
  margin: auto;
  background-image: url(/assets-mypage/img/talklist-icon-mail.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}
.talklist-button.checked{
  background-color: #333;
  color: #fff;
}
.talklist-button.checked::before{
  background-position: bottom center;
}

.brand-select-sec{
  font-family: 'Oswald', sans-serif;
}
.brand-select-block{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  font-size: 1.3rem;
}
.brand-select-ttl{
  margin-bottom: .3em;
}
.brand-select-box{
  width: 138px;
  color :#969696;
  position: relative;
  padding: .2em 0 .35em 1.8em;
  letter-spacing: 0.05em;
}

.brand-select-box:before {
  content: '';
  display: block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #969696;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: .6;
}
.brand-select-box:after {
  content: '';
  display: block;
  width: .4em;
  height: 1em;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  transform: rotateZ(45deg) translate(41%,-55%);
  transition: opacity .7s;
}
.brand-select-box.checked{
  color :#333;
}
.brand-select-box.checked::before{
  border: 1px solid #333;
}
.brand-select-box.checked::after{
  opacity: 1;
}

.talklist-block.checked .talklist-clip,.talklist-block.checked .talklist-info-left{
  transform: translateX(46px);
}

.student-select-btn{
  display: none;
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid #E1E1E1;
  border-radius: 50%;
}
.student-select-btn::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: #FF5543;
  opacity: 0;
  transition: opacity .3s;
}
.talklist-block.checked .student-select-btn{
  display: block;
}
.student-select-btn.checked::before{
  opacity: 1;
}

@media screen and (min-width: 899px) {
  #talklist .mypage-main .wrap{
    max-width: 600px;
  }
  
  .wrap{padding:0 0;width:80%;margin:0 auto;display:block;}
  .pc-no{display:none;}

  .select-btn-wrapper{
    position: relative;
  }
  .tl-cancel-btn{
    position:absolute;
    top: 0;
    left: 110px;
  }

}/* min-width: 769px */



/*===================================================
  /mypage/talk/talk.html
  /instmypage/talk/talk.html
=================================================== */
.mypage-main.talkpage{
  padding: 2rem 0 4rem;
  background-color: #f2f2f2;
  max-width: 100%;

  font-size: 1rem;
  font-size: clamp(10px,2.85714285vw,14px);
}
.talkpage .talkpage-h2{
  font-size: 2em;
  margin-bottom: 0em;
}

.talk-mess-monthly-ttl{
  text-align: center;
  font-size: 1.5em;
  margin-bottom: .5em;
}

.talk-mess-block{
  max-width: 600px;
  position: relative;
  background-color: #fff;
  border-radius: 1rem;
  padding: 2em  1em 1.5em;
  margin: 0 auto 1rem;

}
.talk-movie-block-ttl{
  font-size: 1.9em;
  /* font-family: 'Oswald', sans-serif; */
  font-weight: bold;
  color: #10A6E8;
  text-align: center;
  margin-bottom: .5em;
}
.talk-mess-block-ttl{
  font-size: 1.9em;
  /* font-family: 'Oswald', sans-serif; */
  font-weight: 400;
  color: #10A6E8;
  text-align: center;
  margin-bottom: .5em;
}
.talk-mess-block-ttl .ja{
  display: block;
  color: #808080;
  font-size:.6em;
  font-weight: 600;
}

.talk-mess-box{
  padding: 1em 0;
  position: relative;
}
.talk-mess-speaker{
  font-size: 1.4em;
}
.speaker-posi{
  display: inline-block;
  font-size: 0.7em;
  margin-left: 0.3em;
}
.talk-mess-video-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
}
.talk-mess-video-thum{
  width: 88%;
  padding: 1em;
  border-radius: .5em;
  background-color: #DBF2FC;
  position: relative;
  margin-top: 1.2rem;;
}
.talk-mess-video-thum::before{
  content: "";
  display: block;
  position: absolute;
  top: -1.2rem;
  left: 5%;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 0.6rem solid transparent;
  border-left: 0.6rem solid #DBF2FC;
  border-bottom: 0.6rem solid #DBF2FC;
  border-right: 0.6rem solid transparent;
  box-sizing: border-box;
}
.talk-mess-date{
  font-size: 1.1em;
  color: #808080;
}
.talk-mess-text{
  font-size: 1.3em;
  color: #333;
  text-align: justify;
  line-height: 1.4;
}
a + .talk-mess-text{
  margin: 0.6em 0 0;
}
.talk-mess-text:empty{
  margin: 0 0 .2em;
}
.talk-mess-box.send .talk-mess-speaker{
  text-align: right;
}
.talk-mess-box.send .talk-mess-video-wrap{
  flex-direction: row-reverse;
}
.talk-mess-box.send .talk-mess-video-thum::before{
  left: 90%;
  border-top: 0.6rem solid transparent;
  border-left: 0.6rem solid transparent;
  border-bottom: 0.6rem solid #DBF2FC;
  border-right: 0.6rem solid #DBF2FC;
}
.talk-mess-box.send .talk-mess-rating-wrap{
  justify-content: center;
}

.talk-mess-video-thum.attention{
  background-color: #FF503C;
}
.talk-mess-video-thum.attention::before{
  border-left: 0.6rem solid #FF503C;
  border-bottom: 0.6rem solid #FF503C;
}
.talk-mess-box.send .talk-mess-video-thum.attention::before{
  border-bottom: 0.6rem solid #FF503C;
  border-right: 0.6rem solid #FF503C;
}

.mandatory{
  display: inline-block;
  color: #f00;
  border: 1px solid;
  font-size: 0.7em;
  line-height: 1.2;
  padding: .1em .1em;
  margin-left: 0.5em;
}

.talk-mess-rating-wrap{
  display:flex;
  align-items: center;
  padding: 0.8em 0;
}
.talk-mess-rating-wrap p{
  line-height: 1.3;
  font-size: 1.05em;
  margin-right: 0.6em;
  color: #808080;
}
.star3-rating{
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: #CCCCCC; 
  font-size: 3em;
  line-height: 1;
}
.talk-mess-rating-wrap{
  /* position: absolute; */
  top: 0;
}
.talk-mess-box.send .talk-mess-rating-wrap{
  left: 12%;
}
.talk-mess-box.recieve .talk-mess-rating-wrap{
  right: 12%;
}
.talk-mess-rating-wrap.goukaku::after{
  content: "";
  display: block;
  width: 5em;
  height: 2.5em;
  background-image: url(/assets-mypage/img/talk-goukakumark.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-left: .6em;
}
.star3-rating:before, .star3-rating:after{
  content: '★★★';
  font-family: sans-serif;
}
.star3-rating:after{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffcf32; /* イエローカラー 自由に設定化 */
  width: 0%;
}
.star3-rating[data-rate="3"]:after{ width: 100%; } /* 星3 */
.star3-rating[data-rate="2"]:after{ width: 66.6666%; } /* 星2 */
.star3-rating[data-rate="1"]:after{ width: 33.3333%; } /* 星1 */
.star3-rating[data-rate="0"]:after{ width: 0; } /* 星0 */

.talk-mess-cancel-btn{
  position: absolute;
  color: #808080;
  top: 0;
  right: 1em;
  padding-top: 4em;
  font-size: 1rem;
}
.talk-mess-cancel-btn::before, .talk-mess-cancel-btn::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 2.4em;
  top: -.6em;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #808080;
  transition: transform .2s;
}
.talk-mess-cancel-btn::before{
  transform: rotateZ(45deg);
}
.talk-mess-cancel-btn::after{
  transform: rotateZ(-45deg);
}

.talk-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #FAFAF9;
  box-shadow: 0 0 15px rgb(0, 0, 0, .2);
  padding: .8em 1em;
  z-index: 900;

  font-size: 1rem;
  font-size: clamp(10px,2.85714285vw,14px);
}
.talk-nav p{
  padding: .1em 0;
  font-size: 1.4em;
}

.talk-nav-post-btn,
.talk-post-add-btn,
.talk-nav-mess-btn{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 28%;
  margin: auto;
  background-color: #ccc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
}
.talk-nav-post-btn.active,
.talk-post-add-btn.active,
.talk-nav-mess-btn.active{
  background-color: #10A6E8;
}
.talk-nav-post-btn span,
.talk-nav-mess-btn span{
  position: relative;
  display:inline-block;
  padding-left: 1.2em;
}
.talk-nav-post-btn span:before,.talk-nav-post-btn span:after,
.talk-nav-mess-btn span:before,.talk-nav-mess-btn span:after{
  position: absolute;
  content: "";
  width: 2px;
  height: .9em;
  top: 0;
  bottom: 0;
  left: .5em;
  margin: auto;
  background-color: #fff;
}
.talk-nav-post-btn span:after,
.talk-nav-mess-btn span:after{
  transform: rotateZ(90deg);
}

.inst-talk-nav{
  height: 80px;
}
.inst-talk-nav .talk-nav-inner{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inst-talk-nav .talk-nav-post-btn,.talk-nav-mess-btn{
  position:static;
  width: 90%;
  max-width: 400px;
  height: 56px;
  margin: 4px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
  border-radius:.2em;
}
.inst-brand-select-box-wrap{
  display: flex;
  justify-content: space-between;
}
.inst-brand-select-box{
  font-size: 1.3rem;
  margin-bottom: .5em;
  width: 48%;
}

/* modal */
.modal-background{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10001;
}
.modal-talk-post-block{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90%;
  max-height: 580px;
  background-color: #fff;
  border-radius: 1.2em 1.2em 0 0;
  padding: 5em 3em 3em;
  font-size: 1rem;
  transform: translateY(100%);
  transition: transform .3s;
  /* height: 100vh; */
  overflow-y: scroll;
}
.open .modal-talk-post-block{
  transform: translateY(0);
}

.modal-talk-post-ttl{
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 2em;
}

.talk-post-dl{
  font-size: 1.5em;
}
.talk-post-dl dt{
  margin-bottom: .4em;
}
.talk-post-dl dd{
  width: 100%;
  padding:.8em 1em;
  margin-bottom: 1em;
}
.talk-post-dd-inst{
  background-color: #F1F1F1;
  color: #333;
}
.talk-post-dd-movie{
  border:1px solid #666;
  color: #808080;
}
.talk-post-btn-box{
  display: flex;
  justify-content: space-between;
  padding: 1.5em 0;
}
.talk-post-btn-box a{
  display: block;
  font-size: 1.4em;
  line-height: 4;
  text-align: center;
  border-radius: .3rem;
}
.talk-post-cancel-btn{
  width: 36%;
  border: 1px solid;
  color: #ccc;
}
.talk-post-btn{
  width: 58%;
  background-color: #ccc;
  color: #fff;
}
.talk-post-btn.active{
  background-color: #10A6E8;
}

.talk-post-dl .inst-talk-post-dd-movie{
  border:none;
  padding: 0;
}
.inst-talk-post-dd-subject input{
  width: 100%;
  width: 100%;
  padding: 0.8em 1em;
  border-radius: 0;
  border: 1px solid #666;
}
.talk-post-dl .star3-rating{
  padding: 0;
  margin-bottom: .5em;
}

.button-watching{
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: pointer;
}
.button-watching-pseudo {
  position: absolute;
  content: '\025b6';
  font-size: 80px;
  height: 80px;
  line-height: 0.95;
  color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  text-align: center;
}
.button-watching-pseudo:before {
  content: '\025b6';
  color: #fff;
}
.hide-element{
  display:none;
}

@media screen and (min-width: 480px) {
  .modal-talk-post-block{
    width: 400px;
    height: 80%;
    max-height: 580px;
    border-radius: 1.2em;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    
  }
  .modal-talk-post-block.inst510{
    height: 510px;
  }
  .modal-talk-post-block.inst540{
    height: 540px;
  }
}/* min-width: 480px */

@media screen and (min-width: 899px) {
  .mypage-main.talkpage{
    /* font-size: clamp(10px,2.85714285vw,14px); */
    font-size: 1.3rem;
  }
  .talk-mess-block {
    padding: 2em 2em 1.5em;
  }
  .talk-mess-box {
    padding: 1.5em 0;
  }

  .talk-nav{
    /* 20231004 ORIZON修正 */
    /* width: calc(100% - 270px); */
    font-size: clamp(10px,2.85714285vw,14px);
    font-size: 12px;
    padding: 1.2em 1em;
  }
  .talk-nav-inner{
    position: relative;
    max-width: 600px;
    margin: 0 auto;
  }
  .talk-nav-post-btn {
    right: 2%;
    height: 90%;
    border-radius: .2em;
  }
  .talk-mess-cancel-btn{
    font-size: 1.2rem;
  }
  .inst-mypage .talk-nav {
    width: 100%;
  }
  /* .inst-mypage .modal-talk-post-block{
    height: 510px;
  } */
  #modal-message-post .modal-talk-post-block{
    height: 540px;
  }
  #modal-reply-post .modal-talk-post-block{
    height: 560px;
  }
}/* min-width: 899px */


/* modal関連 noaonline.jp/assets/css/common.css より 
==============================================================================*/
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  overflow: hidden;
}
.modal-bg{background: rgba(0,0,0,0.8);height: 100vh;position: absolute;width: 100%;}
.modal-content{
  background: #fff;padding:2em 1.25em 3em;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
  width: 90%;
  height: 80vh;
  overflow-y: auto;
}

.modal-ttl{
  text-align: center; 
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: "Roboto", sans-serif!important; 
  font-weight: 900;
  font-size: 2.4rem;
  line-height:1.7;
}
.modal-ttl span{display: block;font-size: .9rem;}

.modal-close{position: absolute; top: 1em; right: 1em; width:30px;height:30px;cursor: pointer;display:block;}
.modal-close span {display: block; width: 100%; height: 1px; background: #000;}
.modal-close span {background: #000; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;position: absolute;}
.modal-close span:nth-child(1) { top:1em;transform: rotate(45deg);}
.modal-close span:nth-child(2) { top:1em;transform: rotate(-45deg);}

.modal-ac-ttl{font-size:1.3rem;font-family:'Oswald', sans-serif;font-weight:300;margin-bottom:1.25em;}

.modal-ac-ttl.modal-ac-ttl-border {
  border-bottom: 1px dashed #cacaca;
  padding-bottom: 2.25rem;
}

.modal-content .kousya{font-size:1.5rem;font-weight:bold;margin-bottom:.6em;}
.modal-content .tel{font-family:'Roboto', sans-serif;font-size:2rem;margin-bottom:.5em;color:#34ceca;}
.modal-content .tel i{padding-right:.5em;color:#34ceca;}
.modal-content .add{font-size:1.3rem;margin-bottom:1.5em;}
.modal-content iframe{width:100%;height:30vh;}

.modal-content .lessn-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 1px dashed #cacaca;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 1.6rem;
}
/* .modal-confirm {
	display: block;
} */
.modal-confirm-box {
	height: auto;
  width: 90%;
  max-width: 400px;
	padding: 2em;
}
.modal-confirm-box.modal-change-box {
	height: 350px;
	width: 600px;
}
@media screen and (max-width: 898px) {
	.modal-confirm-box.modal-change-box {
		width: 90%;
	}
}
.modal-confirm-box section {
	border-top: 1px dotted #aaa;
	padding: 2em 0 2em;
}
.modal-confirm-text {
	margin-bottom: 4rem;
}
.confirm-btn-area {
	width: 100%;
	text-align: center;
}
.confirm-btn-area.chage-btn-area {
	display: flex;
	justify-content: space-around;
}
@media screen and (max-width: 898px) {
	.confirm-btn-area.chage-btn-area {
		flex-direction: column;
	}
}
.chage-btn-area .mypage_member_black_btn {
	width: 190px;
}
@media screen and (max-width: 898px) {
	.chage-btn-area .mypage_member_black_btn {
		width: 100%;
		margin-bottom: 2em;
	}
}
/* .modal-cancel {
	display: block;
} */
.modal-cancel-box {
	height: 70%;
  max-width: 800px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 2em 1.25em 2em;
}
/* @media screen and (max-width: 375px) {
	.modal-cancel-box {
		height: 60%;
	}
} */
/* @media screen and (max-width: 320px) {
	.modal-cancel-box {
		height: 70%;
	}
} */
.modal-cancel-box .cancel-caution {
	text-align: center;
	margin-bottom: 1.1rem;
}
@media screen and (max-width: 320px) {
	.modal-cancel-box .cancel-caution {
		font-size: 1.2rem;
	}
}
.modal-cancel-box .cancel-teble {
	border: 1px solid #ccc;
	font-size: 1.1rem;
	text-align: center;
	width: 100% !important;
	margin-bottom: 4rem;
}
.cancel-teble th,
.cancel-teble td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	padding: 1em .4em;
	font-size: 1.5rem;
	line-height: 1.6;
	text-align: center;
}
@media screen and (max-width: 375px) {
	.cancel-teble th,
	.cancel-teble td {
		font-size: 1.4rem;
	}
}
.cancel-teble th {
	background: #f6f6f6;
}
.modal-cancel-box .btn-area {
	display: flex;
	justify-content: space-between;
  max-width: 500px;
  width: 100%;
  margin: auto;
}
.btn-area li {
	width: 46%;
}
.modal-cancel-box .btn-default {
	padding: 1em;
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	width: 100%;
	white-space: nowrap;
}
@media screen and (max-width: 898px) {
	.modal-cancel-box .btn-default {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 320px) {
	.modal-cancel-box .btn-default {
		font-size: 1rem;
	}
}
.modal-purchase .modal-content {
	padding: 3.5em 1.25em 1em;
	width: 90%;
}
@media screen and (min-width: 899px) {
	.modal-purchase .modal-content {
		padding: 4em 3em 2em;
		width: 80%;
	}
  .modal-cancel-box {
    width: 80%;
    padding: 2em 3em 2em;
  }
}
@media screen and (min-width: 899px) {
	.modal-purchase .modal-content {
		padding: 3.5em 2.5em 2em;
		width: 60%;
	}
}
@media screen and (min-width: 1280px) {
	.modal-purchase .modal-content {
		padding: 4.5em 3.5em 5em;
		width: 50%;
	}
}
.modal-content.modal-purchase-content {
	height: auto;
}
/* noaonline.jp/assets/css/common.css より */




/*===================================================
 /instmypage/index.html
=================================================== */

.mypage-menu-inst ul{
  max-width: 360px;
}
.mypage-menu-inst li {
  width: 25%;
}

.mypage-main-inst-lesson{
  max-width: 600px;
}
.flatpickr-calendar {
  border-bottom: 1px solid;
  border-radius: 0;
  margin-bottom: 1em;
}
.flatpickr-innerContainer{
  margin-bottom: 1em!important;
}

.mypage-topcalendar-inst section{
  margin-bottom: 0;
}

.pickup-date {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: .5em;
  padding: 0;
  background-color: transparent;
}
.pickup-date span {
  font-size: 60%;
}

@media screen and (min-width: 1100px){
  .mypage-topcalendar-inst section {
    width: 100%;
  }
}/* min-width: 1100px */

@media screen and (min-width: 1600px){
  #pref-past section tbody td span {
    font-size: 1.4em;
    display: block;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
}/* min-width: 1600px */


/*===================================================
 /instmypage/payslip.html
=================================================== */
.mp-pay-info-box{
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3em;
}
.mp-pay-select-box{
  width: 40%;
  max-width: 200px;
}
.payslip-button{
  display: block;
  width: 40%;
  max-width: 300px;
  text-align: center;
  background-color: #000;
  color:#fff;
  line-height: 4rem;
  border-radius: .2rem;
}
.pay-day{
  display: inline-block;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.2em;
  margin-bottom: 2em;
}
.pay-details,.pay-table{
  width: 100%;
}

.pay-table.total-paid{
  max-width: 400px;
}
.pay-table th,.pay-table td{
  border: 1px solid #ccc;
  text-align: center;
}
.pay-table th,.pay-table td{
  font-size: 1.35rem;
  padding: .6em .6em;
  min-width: 6rem;
  height: 4.6rem;
}
.pay-table th{
  background-color: #EFEFEF;
}
.sub-ele{
  display: block;
  font-size: 0.9em;
  color: #333;
  margin-top: -0.3em;
}
.pay-table td:last-child{
  text-align: right;
  font-size: 1.4rem;
}

.pay-table-overflow{
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.pay-title{
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.3em;
}
.pay-title::before{
  content: "";
  display: inline-block;
  width: .75em;
  height: .75em;
  background-color: #000;
  margin-right: 0.1em;
}

.space-line td{
  padding: 0;
  height: 1em;
}
.space-line th,.space-line td{
  border:none;
  background-color: transparent;
}

.total-line{
font-weight: 600;
}
.total-line th{
  background-color: transparent;
}

.col-horizon-1{
  width: 64%;
}

.year-select-title{
  font-size: 1.5rem;
  }

.year-select-pc{
  margin-left:auto;
  margin-right:0.5em;
  margin-top:0.2em;
  text-align: left;
  width: 13%;
  }
.year-select-sp{
  margin-left:auto;
  margin-right:0.5em;
  margin-top:-2em;
  text-align: left;
  width: 37%;
  display: none;
  }

@media screen and (min-width: 899px){
  .payslip-button{
    line-height: 5.4rem;
  }
  .pay-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pay-wrapper .pay-details{
    width: 47%;
  }
}/* min-width: 960px */

@media screen and (max-width: 1024px){
  .year-select-pc{
    display: none;
    }
  .year-select-sp{
    display: block;
    }
}/* max-width: 1024px */


/*===================================================
/reserve/index.html
/reserve/complete.html
=================================================== */

.reserve-container{
  margin-top: 3em;
  margin-bottom: 5rem;
}
.reserve-container .mypage-main{
  max-width: 720px;
}

.mypage-maindesc{
  text-align: center;
  margin-bottom: 2em;
}

.form-table th {
  border-top: none;
  border-bottom: none;
  background-color: transparent;
}
.form-table {
  border-bottom: none;
}
.form-table{width:100%;}
.form-table th,.form-table td{padding:0 0;display:block;font-size:1em;}
.form-table th{font-weight:bold;margin-bottom:.75em;}
.form-table td{display:block;margin-bottom:2em;}
.form-table th p{font-size:.8em;font-weight:normal;margin-top:.75em;line-height:1.5;}
.form-table th span.hissu{font-size:.7em;font-weight:normal;padding:.2em .6em;color:#fff;background:#ef1b49;margin-left:.5em;}
.form-table th span.nini{background:#34ceca!important;}
.form-table input,.form-table textarea{
  font-size: 1.4rem;
  border:0px;background:#efefef;padding:1.25em 1em;
}
.form-table input.nini{background:#EDF9F8;}

.form-table input.lesson{
  font-size: 1.05em;
  font-family: 'Oswald', sans-serif;
}
.form-table input.group{
  background: #ECF4F6;
  color: #4696aa;
}
.form-table input.event{
  background: #f8f4ed;
  color: #bb954a;
}
.form-body .lesson-title{
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 0;
}
.lesson-details,.teaching-genres{
  display: block;
  font-size: 1.2rem;
  color: #333333;
  padding: .51em 0;
}

.reserve-select{
  appearance: none;
  width: 100%;
  font-size: 1.4rem;
  background: #fff;
  border: 1px solid #333;
  padding: 1.25em 1em;
}

.reserve-select-box{
  position: relative;
}
.reserve-select-box::after{
position: absolute;
content: "";
display: block;
width: .8rem;
height: .8rem;
border-right: 2px solid #aaa;
border-bottom: 2px solid #aaa;
transform: rotateZ(45deg);
top: 0;
bottom: .3rem;
right: 2rem;
margin: auto;
}

.form-table .reserve-radio-box{
  display: flex;
  flex-wrap: wrap;
}
.reserve-radio-box label{
  display: block;
  font-size: 1.5rem;
  margin-bottom: 2em;
  width: 340px;
}

.lesson-link{
  border: 1px solid #C8C8C8;
  padding: .8em ;
  max-width: 340px;
}
.form-body .lesson-link-cap{
  color: #f00;
  font-size: 1.1rem;
  margin-bottom: 0;
}
.lesson-style-image{
  display: block;
  width: 150px;
  height: 75px;
  background-image: url(/assets-mypage/img/lesson-style-illust.svg);
  background-size: 100%;
}
.lesson-online .lesson-style-image{
  background-position: center center;
}
.lesson-link .lesson-style-image{
  background-position: center bottom;
}
.form-body .lesson-style-details{
  font-size: 1.25rem;
  line-height: 1.4;
  width: 140px;
  margin-right: .8rem;
  margin-bottom: 0;
  text-align: justify;
  color: #333;
}
.lesson-style-wrap{
  /* width: 300px; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.plain-sec-ttl {
  font-size: 1.8rem;
  font-weight: bold;
  padding-top: .5em;
}
.about-recept{
  margin-bottom: 3em;
}
.recept-table thead th {
  padding: 1em 1em;
  font-size: 1.2rem;
  text-align: center;
  background-color: #ededed;
  line-height: 1.7;
}
.recept-table .dial {
  letter-spacing: 0;
}

@media screen and (min-width: 899px){
  .recept-table th, .recept-table td {
    display: block;
  }
  .recept-table td {
    font-size: 1.5rem;
    padding-left: 0;
  }
  .sec-lede-desc p{
    font-size: 1.5rem;
  }
}/* min-width: 768px */

@media screen and (min-width: 899px){
  .form-table th {
    font-size: 1.5rem;
  }
  .form-table input, .form-table textarea{
    font-size: 1.5rem;
  }
  .form-operate li {
    font-size: 2rem;
  }
  .plain-sec-ttl{
    font-size: 2rem;
  }
  .caution-ttl {
    font-size: 1.8rem;
  }
}/* min-width: 960px */

@media screen and (min-width: 1100px){
  .recept-table th, .recept-table td {
    display: table-cell;
  }
}/* min-width: 1100px */