@charset "utf-8";
/***************************************************
information
  filename : mypage_account.css;
***************************************************/
/* カスタマイズここから */
.mysv_det{
  background:var(--app-bg-cr1);
}
.mysv_det .ClmblckArea.ClmRL .mainClnS{
  float: none;
  margin: auto;
}
.mysv_det .sideClnS{
  display: none;
}

/* カスタマイズここまで */
@media screen and (max-width:896px){
}

.myacc_det #wrapper,
.myprf_det #wrapper,
.mysv_det #wrapper,
.mysem_det #wrapper{
  background: transparent;
}

.myacc_det #contents,
.myprf_det #contents,
.mysv_det #contents,
.mysem_det #contents{
  padding-top: 84px;
}

.myacc_det .mypage_bkbt,
.myprf_det .mypage_bkbt,
.mysv_det .mypage_bkbt,
.mysem_det .mypage_bkbt{
  background: linear-gradient(90deg, var(--app-bg-cr1), var(--app-bg-cr2));
  height: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.myacc_det .mypage_bkbt a,
.myprf_det .mypage_bkbt a,
.mysv_det .mypage_bkbt a,
.mysem_det .mypage_bkbt a{
  font-weight: bold;
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 150px;
}

.myacc_det .mypage_bkbt a::before,
.myprf_det .mypage_bkbt a::before,
.mysv_det .mypage_bkbt a::before,
.mysem_det .mypage_bkbt a::before{
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(-135deg);
}

.myacc_det .ClmblckArea.ClmRL .mainClnS,
.myprf_det .ClmblckArea.ClmRL .mainClnS,
.mysv_det .ClmblckArea.ClmRL .mainClnS,
.mysem_det .ClmblckArea.ClmRL .mainClnS{
  width: 75%;
}
@media screen and (max-width:896px){
  .myacc_det .ClmblckArea.ClmRL .mainClnS,
  .myprf_det .ClmblckArea.ClmRL .mainClnS,
  .mysv_det .ClmblckArea.ClmRL .mainClnS,
  .mysem_det .ClmblckArea.ClmRL .mainClnS{
    width: 100%;
  }
}

.myacc_det section.mainTi h1.mainTiInn,
.myprf_det section.mainTi h1.mainTiInn,
.mysv_det section.mainTi h1.mainTiInn,
.mysem_det section.mainTi h1.mainTiInn{
  font-size: 22px;
}
@media screen and (max-width:896px){
  .myacc_det section.mainTi h1.mainTiInn,
  .myprf_det section.mainTi h1.mainTiInn,
  .mysv_det section.mainTi h1.mainTiInn,
  .mysem_det section.mainTi h1.mainTiInn{
    font-size: 19px;
  }
}

.myprf_det h2.systemFotmTitle,
.mysv_det h2.systemFotmTitle{
  border:none;
}

.mypageBoxDet{
  box-shadow: none;
  border: none;
}

.mypageOrdBoxBt{
  gap: 10px;
}

.myacc_det .BtM p button.newRegBt,
.myprf_det .BtM p button.newRegBt{
  margin: 30px auto;
  padding: 10px;
  border-radius: 9999px;
  font-size: 1.6rem;
}

/****************** サイド ******************/

.myPhoto{
  border:none;
  background:none;
}

.myPhoto .photoArea{
  border-radius: 50%;
}

.myprf_det .mypTp01.mypagenav a.mypagetop{
  background: var(--app-mypagetop-ico) 0.5em center no-repeat transparent;
  background-size: 24px 24px;
}

.myprf_det .mypTp01.mypagenav a.mypageprof{
  background: var(--app-mypageprof-ico) 0.5em center no-repeat transparent;
  background-size: 24px 24px;
}

.myprf_det .mypTp01.mypagenav a.mypagepassword{
  background: var(--app-mypagepassword-ico) 0.5em center no-repeat transparent;
  background-size: 24px 24px;
}

.myprf_det .myPhoto .photoArea img,
.mytop_det .myPhoto .photoArea img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.myprf_det button.newRegBt{
  width: 250px;
  border-radius: 8px;
}

.sideClnS .mypage_navi .mypTp01.mypagenav ul li a{
  background: #fff;
}
@media screen and (max-width:896px){
  .sideClnS .mypage_navi .mypTp01.mypagenav ul li a{
    background: transparent;
    border-bottom: none;
    padding: 1.4rem 0.5rem;
  }
}

@media screen and (max-width:896px){
  
  .myacc_det .ClmblckArea.ClmRL .ptLayoutInn,
  .myprf_det .ClmblckArea.ClmRL .ptLayoutInn,
  .mysv_det .ClmblckArea.ClmRL .ptLayoutInn,
  .mysem_det .ClmblckArea.ClmRL .ptLayoutInn{
    display: flex;
    flex-direction: column-reverse;
  }

  .myacc_det .ClmblckArea.ClmRL .sideClnS,
  .myprf_det .ClmblckArea.ClmRL .sideClnS,
  .mysv_det .ClmblckArea.ClmRL .sideClnS,
  .mysem_det .ClmblckArea.ClmRL .sideClnS{
    width: 100%;
  }

  .myacc_det .mypage_mem_photo,
  .myprf_det .mypage_mem_photo,
  .mysv_det .mypage_mem_photo,
  .mysem_det .mypage_mem_photo{
    display: none;
  }

  .myacc_det .mypage_navi,
  .myprf_det .mypage_navi,
  .mysv_det .mypage_navi,
  .mysem_det .mypage_navi{
    background: #f2f2f2;
    padding: 30px 15px;
    border-radius: 8px;
  }

  .mypage_navi .mypage_navi_title h2{
    position: relative;
    font-size: 1.6rem;
  }
  
  .mypage_navi .mypage_navi_title h2::after{
    content: "";
    border-top: 1px solid black;
    border-left: 1px solid black;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(-135deg) translateY(9px);
    position: absolute;
    right: 3%;
    top: 50%;
    transition: transform .4s;
  }
  
  .mypage_navi .mypage_navi_title.is-open h2::after{
    border-top: none;
    border-left: none;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    top: 60%;
  }

  .mypage_navi .mypagenav{
    overflow: hidden;
    opacity: 0;
    height: 0;
    transition: .8s;
  }

  .mypage_navi .mypagenav.is-open{
    opacity: 1;
    height: auto;
    margin-top: 20px;
    transition: .8s;
  }

}


/****************** サービス購入履歴 ******************/

.mysv_det .mypageOrdBox{
  box-shadow: none;
  border: 1px solid #ddd;
  padding: 2.0rem;
  background:#fff;
}

.mysv_det .mypageOrdBoxInn{
  border: none;
  background: none;
  box-shadow: none;
  margin: 0;
  margin-bottom: 2.0rem;
  padding: 0;
}

.mysv_det .mypageOrdBox dl{
  border-bottom: 1px solid #cdcdcd;
}

.mysv_det .mypageOrdBoxBt{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mysv_det .mypageOrdBoxBt .BtM{
  width: 24%;
}
@media screen and (max-width:896px){
  .mysv_det .mypageOrdBoxBt .BtM{
    width: 120px;
  }
}

.mysv_det .mypageOrdBoxBt .BtM a{
  padding: 0.8rem;
}
@media screen and (max-width:896px){
  .mysv_det .mypageOrdBoxBt .BtM a{
    font-size: 1.3rem;
  }
}


/****************** セミナー申込履歴 ******************/

.mysem_det .mypageOrdBox{
  box-shadow: none;
  border: 1px solid #ddd;
  padding: 2.0rem;
}

.mysem_det .mypageOrdBoxInn{
  background: none;
  box-shadow: none;
  margin: 2.0rem auto;
}

@media screen and (max-width:896px){
  .mysem_det .mypageOrdBoxInn dl{
    display: flex;
    padding: 1.0rem 2.0rem;
  }
}

.mysem_det .mypageBtBox{
  background: none;
  border: none;
  padding: 0;
}

.mysem_det .mypageBtBox .mypageTitle{
  background: none;
}

.mysem_det .mypageBtBox .editBt a{
  box-shadow: none;
}

.mysem_det .mypage_seminar_oth .mypageBoxDetInn{
  box-shadow: none;
  padding: 0;
}

.mysem_det .mypage_seminar_oth .mypageBoxDetInn .postList{
  border: none;
  box-shadow: none;
}

.mysem_det .mypage_seminar_oth .postList li{
  padding: 2.9rem 1.0rem;
}

.mysem_det .mypage_seminar_oth .postList li:last-child{
  border-bottom: none;
}

.mysem_det .postContents{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mysem_det .postEventDate{
  min-width: auto;
  font-size: 21px;
}

.mysem_det .postBt p{
  width: 75px;
}

.mysem_det .mypageBoxDetInn{
  padding: 0;
}

.mysem_det .mypageBoxDetInn .tab-munu{
  padding: 1.0rem 2.0rem;
}

.mysem_det .mypageBoxDetInn .CautTxtG{
  background: #f0f0f0;
  border: none;
  font-weight: normal;
  font-size: 14px;
  color: #585858;
  margin: 0;
}

.mysem_det .mypage_seminar_oth .mypageBoxDetInn .CautTxt{
  margin: 0;
}

@media screen and (max-width:896px){
  .popup #contents{
    padding-top: 84px;
  }
}

.popup .popup_Box{
  padding: 2.0rem 0;
}

.popup_Box .semVisual img{
  width: 100%;
}

.popup_Box .semDetailListArea{
  margin: 50px auto;
}

.popup_Box .semDetailListArea dl{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px auto;
}

.popup_Box .semDetailListArea dl dt{
  width: 20%;
  background: #ECEFF1;
  padding: 20px 0 20px 20px;
}
@media screen and (max-width:896px){
  .popup_Box .semDetailListArea dl dt{
    width: 105px;
    padding: 20px 10px;
  }
}

.popup_Box .semDetailListArea dl dd{
  width: 80%;
  background: #F9F9F9;
  padding: 20px 0 20px 20px;
}
@media screen and (max-width:896px){
  .popup_Box .semDetailListArea dl dd{
    width: calc(100%-105px);
    padding: 20px 10px;
  }
}

.popup_Box .mypageBoxDet .mypageOrdBoxInn{
  margin: 1.0rem 0;
  background: #fff;
}

.popup_Box .BtM button.back{
  color: #fff;
}