@charset "utf-8";

/*myトップページ 3_1 ************************************************************ */

/* 投稿画像設定 */
.cover01{
  display: inline-block;
  background-color: #FFF;
  background-position: center center;
  background-repeat: no-repeat;
  width: 316px;
  height: 316px;
  background-size: cover;
  vertical-align: bottom;
}

@media screen and (max-width: 768px){
  .cover01 {
    width: 100%;
    height: 175px;
  }
}
.tcPanel li{
  list-style:none;
}
.panel .cover{
  display: inline-block;
  background-color: #FFF;
  background-position: center center;
  background-repeat: no-repeat;
  width: 316px;
  height: 316px;
  background-size: cover;
  vertical-align: bottom;
}

@media screen and (max-width: 768px){
  .panel .cover {
    width: 49%;
    height: 158px;
  }
}

/*myプロフィール*/
.myProfileArea {
  border-radius: 6px;
  background-color: #FFFFFF;
  padding: 20px 30px;
  overflow:hidden;
}
.myProfileArea .myProfRankBox {
  float: left;
  width: 151px;
  overflow: hidden;
}
.myProfileArea .appwork{
  background-color:#dcdcdc;
  margin-top:20px;
}
.myProfileArea .appwork{
  position: relative;
}
.myProfileArea .appwork .judgingTag{
  position: absolute;
  top: 0;
  left: 0;
  background: #f80c69;
  opacity: 0.9;
  padding: 5px 10px 5px 10px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  z-index: 999;
}
.myProfileArea .delBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
.myProfileArea .delBtn .link {
  display: block;
  background: #3b3730;
  opacity: 0.9;
  padding: 5px 10px 5px 10px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
}
.delBtn .link:link,
.delBtn .link:visited {
  color: #fff;
  text-decoration: none;
}
.delBtn .link:hover,
.delBtn .link:active {
  color: #fff798;
  text-decoration: none;
}
.approveArea{
  padding: 10px 80px;
}
.nickName{
  margin-bottom: 10px;
}
.headText{
   font-weight:bold;
}
.myProfRankBox .myProfIcon {
  float: left;
  margin-right: 15px;
}
.myProfRankBox .myProfIcon .img {
  width: 70px;
}
.myProfRankBox .myRankIcon {
  float: left;
  margin-top: 2px;
}
.myProfRankBox .myRankIcon .img {
  width: 56px;
}

.myProfileTextBox .name{
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}
.myProfileTextBox .myCoinBox .haveCoin{
  float: left;
  margin-right: 20px
}
.myProfileTextBox .myCoinBox .detailCoinLink{
  float: left;
}

/*myプロフィール 768px以下*/
@media screen and (max-width:768px) {
  .myProfileArea {
    border-radius: 0;
    padding: 10px 5px;
    margin-bottom: 0;
    overflow:hidden;
  }
  .myProfileArea .myProfRankBox {
    float:none;
    margin: 0 auto 10px;
  }
  .myProfileArea .myProfileTextBox {
    float:none;
    width: 300px;
    margin: 0 auto;
  }
  .myProfileTextBox .name{
    font-size: 15px;
    font-size: 1.5rem;
    text-align: center;
  }
  .myProfileTextBox .status{
    font-size: 11px;
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: center;
  }
  .myProfileTextBox .wonderLevel{
    font-size: 11px;
    font-size: 1.1rem;

  }
  .myProfileTextBox .myCoinBox .haveCoin{
    float: none;
    margin-right: 0px;
    font-size: 11px;
    font-size: 1.1rem;
  }
  .myProfileTextBox .myCoinBox .detailCoinLink{
    float: none;
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/*　プロフィール下ボタン */
.buttonArea {
  width: 950px;
  margin: 0 auto 10px;
  padding: 5px 0px 10px;
  overflow: hidden;
}
.snsButtonArea{
  width: 950px;
  margin: 0 auto 10px;
  overflow: hidden;
}
.buttonArea .btnBox {
  width: 31%;
  float: left;
  text-align: center;
  margin: 0 11px;
}
.snsButtonArea .btnBox {
  width: 31%;
  float: left;
  text-align: center;
  margin: 0 11px;
}
.snsButtonArea .snsBtn {
  width: 100%;
  height: 42px;
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.snsButtonArea .snsBtn:hover{
  filter: alpha(opacity=80);
  opacity: 0.8;
}
/* 海外ページ版プロフィールページ用 */
.snsButtonArea .languageSnsBtn {
  width: 100%;
  height: 42px;
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  appearance: none;
}
.snsButtonArea .languageSnsBtn[data-type="connected"] {
  background-size: 100% 100%;
  background-color: transparent;
}

.btnYahoo{
  background: url("../../../img/v3/mypage/btn_yahoo_unconnect.png");
}
.btnYahoo[data-type="connected"]{
  background: url("../../../img/v3/mypage/btn_yahoo_connect.png");
}
.btnLine{
  background: url("../../../img/v3/mypage/btn_line_unconnect.png");
}
.btnLine[data-type="connected"]{
  background: url("../../../img/v3/mypage/btn_line_connect.png");
}
.btnFacebook{
  background: url("../../../img/v3/mypage/btn_fb_unconnect.png");
}
.btnFacebook[data-type="connected"]{
  background: url("../../../img/v3/mypage/btn_fb_connect.png");
}
.btnTwitter{
  background: url("../../../img/v3/mypage/btn_tw_unconnect.png");
}
.btnTwitter[data-type="connected"]{
  background: url("../../../img/v3/mypage/btn_tw_connect.png");
}
.btnBnid{
  background: url("../../../img/v3/mypage/btn_bnid_unconnect.png");
}
.btnBnid[data-type="connected"]{
  background: url("../../../img/v3/mypage/btn_bnid_connect.png");
}
.btnBnid-tw{
  background: url("../../../img/tw/mypage/btn_bnid_unconnect.png");
}
.btnBnid-tw[data-type="connected"]{
  background: url("../../../img/tw/mypage/btn_bnid_connect.png");
}
.btnBnid-hk{
  background: url("../../../img/hk/mypage/btn_bnid_unconnect.png");
}
.btnBnid-hk[data-type="connected"]{
  background: url("../../../img/hk/mypage/btn_bnid_connect.png");
}
.snsButtonArea .snsBtn[data-type="connected"] {
  background-size: 100% 100%;
  background-color: transparent;
}
.buttonArea .btnBox .btn {
  box-sizing: border-box;
  width: 98%;
  padding: 10px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 1px 1px 4px #1a600a;
  background-color: #3ac519;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
}
.btnBox .btn:link,
.btnBox .btn:visited {
  color: #fff;
  text-decoration: none;
}
.btnBox .btn:hover,
.btnBox .btn:active {
  color: #fff798;
  text-decoration: none;
}

@media screen and (max-width:768px) {
/*　プロフィール下ボタン 768px以下 */
  .buttonArea{
    display: table;
    width:auto;
    margin: 0 auto 5px;
    padding: 0;
  }
  .snsButtonArea {
    width: auto;
    margin: 0 auto 5px;
    padding: 0;
  }
  .snsButtonArea .btnBox {
    width: 100%;
    margin: 0 0 10px 0;
  }
  .buttonArea .btnBox {
    display: table-cell;
    width: 48%;
    float: left;
    text-align: center;
    margin: 0 1% 10px;
  }
  .buttonArea .profileEdit{
    width: 98%;
  }
  .buttonArea .btnBox .btn {
    box-sizing: border-box;
    display: table-cell;
    width: 500px;
    padding: 10px 0px;
    vertical-align: middle;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .btnBox .btn:link,
  .btnBox .btn:visited {
    color: #fff;
    text-decoration: none;
  }
  .btnBox .btn:hover,
  .btnBox .btn:active {
    color: #fff798;
    text-decoration: none;
  }

  /* ボタンの文字が長い時用 */
  .buttonArea .longTxt .btn {
    padding: 11px 0px;
    font-size: 11px;
    font-size: 1.1rem;
  }

  .snsButtonArea .snsBtn {
    height: 50px;
  }
}
@media screen and (max-width: 768px){
  .postListArea{
    padding: 10px 5px 20px;
  }
}



/*awardArea*/
.awardArea{
  margin-bottom: 10px;
}
.awardArea .adPanel{
  overflow: hidden;
  width: 100%;
  background: #fff;
  margin: 0 0 5px 0;
}
.adPanel .adImgArea{
  position: relative;
}
.adImgArea .panelThumb{
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
    float: left;
    width: 240px;
    height: 240px
}
.adPanel .adTextArea{
  box-sizing: border-box;
    width: 720px;
    float: right;
    padding: 5px;
}
.adTextArea .workTitle{
  overflow: hidden;
  height: 40px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.adTextArea .userArea{
  overflow: hidden;
  padding: 5px;
  margin-bottom: 5px;
  background: #f6f6f6;
}
.adTextArea .postDate{
  float: left;
  margin-right: 10px;
  font-size: 12px;
  font-size: 1.2rem;
}
.adTextArea .wonder{
  float: left;
  margin-top: -5px;
  color: #ff0000;
  padding: 3px 0 0 0;
  font-size: 15px;
  vertical-align: -2px;
}
.adTextArea .lessonTitle{
  height:auto;
  font-size: 14px;
  font-size: 1.4rem;
  overflow: hidden;
}
.adTextArea .awardTitle {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ff6600;
}

/*awardArea　768px以下*/

@media screen and (max-width:768px) {

 .adImgArea .panelThumb{
    width: 50%;
    padding: 0;
    height: 175px;
  }
  .adPanel .adTextArea{
    width: 50%;
    padding: 5px 10px;
  }
  .adTextArea .lessonTitle{
    height:auto;
    overflow:visible;
  }
}

/*作品一覧ページ  3_5_1 ************************************************************ */

/*プロフィール*/
.usProfileArea {
  box-sizing: border-box;
  width: 960px;
  border-radius: 6px;
  background-color: #FFFFFF;
  padding: 20px 30px;
  display: table;
}
.usProfileArea .usProfBox{
  display: table-cell;
  width: 100px;
}
.usProfBox .usProfIcon {
  width: 70px;
}
.usProfBox .usProfIcon .img {
  width: 100%;
}
.usProfileArea .usProfileTextBox {
  display: table-cell;
  vertical-align: top;
}
.usProfileTextBox .name{
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  display:  inline-block;
  margin-right: 20px;
}
.usProfileTextBox .link{
  display:  inline-block;
}


@media screen and (max-width:768px) {
  .usProfileArea {
    width: auto;
    padding: 10px 15px;
    margin: 0 -5px 10px;
    display: table;
    border-radius: 0;
  }
  .usProfileArea .usProfBox {
    width: 80px;
  }
  .usProfBox .usProfIcon {
    width: 70px;
  }
  .usProfBox .usProfIcon .img {
    width: 100%;
  }
  .usProfileArea .usProfileTextBox {
    width:auto;
  }
  .usProfileTextBox .nameBox {
    margin-bottom: 10px;
  }

}
/* 違反申告リンク */
.declaration{
  text-align: right;

  margin: 5px 0 20px;
}

/*先生ギャラリーページ  3_5_1_2 ************************************************************ */

/*先生プロフィール*/
.tcProfileArea {
  box-sizing: border-box;
  width: 960px;
  border-radius: 6px;
  background-color: #FFFFFF;
  padding: 20px 30px;
  margin-bottom: 20px;
  display: table;
}
.tcProfileArea .tcProfBox {
  display: table-cell;
  width: 100px;
}
.tcProfBox .tcProfIcon {
  width: 70px;
}
.tcProfBox .tcProfIcon .img {
  width: 100%;
}
.tcProfileArea .tcProfileTextBox {
  display: table-cell;
  vertical-align: top;
}
.tcProfileTextBox .nameBox {
  display: block;
}
.tcProfileTextBox .nameBox .name{
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  display:  inline-block;
  margin-right: 20px;
}
.tcProfileTextBox .link{
  display:  inline-block;
}
.tcProfileTextBox .link .fa-play{
  margin-right: 4px;
vertical-align: 1px;
}

/*先生プロフィール 768px以下*/
@media screen and (max-width:768px) {
  .tcProfileArea {
    width: auto;
    padding: 10px 15px;
    margin: 0 -5px 10px;
    display: table;
    border-radius: 0;
  }
  .tcProfileArea .tcProfBox {
    width: 80px;
  }
  .tcProfBox .tcProfIcon {
    width: 70px;
  }
  .tcProfBox .tcProfIcon .img {
    width: 100%;
  }
  .tcProfileArea .tcProfileTextBox {
    width:auto;
  }
  .tcProfileTextBox .nameBox {
    margin-bottom: 10px;
  }

}

/*先生panelArea*/
.tcPanelArea{
  overflow: hidden;
  margin-bottom: 10px;
}
.tcPanelArea .tcPanel{
  width: 316px;
  float: left;
  background: #fff;
  margin: 2px;
}
.tcPanel .imgArea{
  position: relative;
}
.tcPanel .imgArea .panelThumb{
  width: 100%;
  max-width: 100%;
}
.tcPanel .textArea{
  padding: 5px 10px;
}
.tcPanel .textArea .lessonTitle{
  height: 19px;
  font-size: 14px;
  font-size: 1.4rem;
  overflow: hidden;
  margin-bottom: 10px;
}

/*先生panelArea　768px以下*/

@media screen and (max-width:768px) {
  .tcPanelArea{
    overflow: hidden;
  }
  .tcPanelArea .tcPanel{
    overflow:visible;
    width: 48%;
    margin: 0px 1% 10px;
  }
  .tcPanel .imgArea, .tcPanel .movie{
    width: 100%;
    box-sizing: border-box;
    float:none;
    padding: 5px;
  }
  .tcPanel .imgArea .panelThumb{
    max-width: 100%;
  }
  .tcPanel .textArea{
    box-sizing: border-box;
    width: 100%;
    float:none;
    padding: 5px;
  }
  .tcPanel .textArea .lessonTitle{
    height: 38px;
  }

}

/*背景画像の設定をする*/
.grayScaleImage{
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.grayScaleImage:before{
  content: '';
  position: absolute;
  background: inherit;/*.bgImageで設定した背景画像を継承する*/
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.2s linear;
}

.shadowTxt{
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-size: 2.5rem;
  color: #297cc9;
  text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px, #FFF 1px -1px 0px, #FFF -1px -1px 0px;
  font-weight: bold;
}
@media screen and (max-width:768px) {
  .shadowTxt{
    top: 35%;
    font-size: 18px;
    font-size: 1.8rem;
  }
}

.wonderButton{
  float: right;
  margin: 5px 0 8px;
  height: 24px;
  background: #ff0000;
  border-radius: 5px;
  box-shadow: 1px 1px 2px #5d5d5d;
}
.wonderButton .link{
  display: block;
  color: #fff;
  padding: 3px 10px 3px 10px;
  font-size: 12px;
  font-size: 1.2rem;
}
.wonderButton .fa{
  margin-right: 5px;
  font-size: 15px;
  vertical-align: -2px;
}
.wonderButton .link:link, .wonderButton .link:visited {
    color: #fff;
    text-decoration: none;
}
.wonderButton .link:hover{
    color: #fff798;
}
.wonderButton.voted{
  background: #f6f6f6;
  box-shadow: none;
}
.wonderButton.voted .link{
  pointer-events: none;
  color: #ff0000;
}
@media screen and (max-width:768px) {
  .wonderButton{
    width: 130px;
    float: none;
    margin: 5px 0 5px;
  }
  .wonderButton .link{
    padding: 3px 0 3px 5px;
  }
}

.bannerBlock01 .img{
  float: left;
  width: 470px;
  height: 140px;
  margin-left: 20px;
}
.bannerBlock01 .img01{
  margin-left: 0;
}

.bannerBlock02 .img{
  float: left;
  width: 310px;
  height: 100px;
  margin-left: 15px;
}
.bannerBlock02 .img01{
  margin-left: 0;
}

.galleryArea{
  margin-top: 10px;
}
.galleryArea .img{
  float: left;
  box-sizing: border-box;
  width: 470px;
  border: 4px solid #fff;
}
.galleryArea .img02{
  margin-left: 20px;
}


@media screen and (max-width:768px) {
  .galleryArea .img{
    float: none;
    width: 100%;
    max-width: 100%;
    border: 2px solid #fff;
    margin: 0 0 5px 0;
  }
  .galleryArea .img02{
    margin: 0;
  }

  .bannerBlock01 .img{
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 5px 0;
  }
  .bannerBlock01 .img02{
    margin: 0;
  }
}

.modalblock .agreeButton {
  width: 100%;
}
.modalblock .textButton {
  background-color: #33cc00;
  padding: 10px 0 6px;
  margin-bottom: 20px;
}
.modalblock .textButton .text{
  color:#FFFFFF;
}
.modalblock .textButton:hover .text, .textButton:hover:after {
 color: #FF6600;
}
.modalblock .textButton:after {
 color: #FFFFFF;
 margin-top: -15.5px;
}
.modalblock .description{
  text-align: center;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 20px;
}
@media screen and (max-width:768px) {
  .modalblock .description{
    font-size: 15px;
    font-size: 1.5rem;
  }
  .modalblock .textButton:after {
    margin-top: -12px;
  }
}
.snsButtonArea .snsBtn:disabled{
  cursor: default;
  opacity: 1.0;
}




/* マイページプロフィールエリア */

.profileArea .profIcon{
  max-width: 100px;
  max-height: 100px;
  position: relative;
  box-sizing: border-box;
}
.profileArea .plusIcon{
  width: 26px;
  height: 26px;
  border: 3px solid #999;
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
}
.profileArea .plusIcon:hover{
  background: #ccc;
}
.profileArea .plusIcon a{
  font-size: 20px;
  display: block;
  width: 100%;
  height:100%;
  color: #999;
  position: relative;
  text-align: center;
  top: -2px;
  left: 0;
}
.profileArea .plusIcon img{
  width: 100%;
  height: auto;
}

.profileArea .cooperationChecker{
  background: #E0E0E0;
  border-radius: 2em;
  padding: 5px 30px;
  margin-bottom: 5px;
  margin-right: 20px;
  display: inline-block;
  position: relative;
  color: #000;
}
a .profileArea .cooperationChecker:hover{
  background: #F2F2F2;
}
.profileArea .cooperationChecker::before{
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  background: #fff;
  position: absolute;
  top: calc( 50% - 1px );
  right:10px;
  transform:translateY(-50%);
  border-radius: 12px;
}

.profileArea .fa-home{
  color: #8C8C8C;
  font-size: 16px;
  position: absolute;
  top: calc( 50% - 2px );
  left:10px;
  transform:translateY(-50%); 
}
.profileArea .fa-user{
  color: #8C8C8C;
  font-size: 16px;
  position: absolute;
  top: calc( 50% - 2px );
  left:10px;
  transform:translateY(-50%); 
}
.profileArea .fa-users{
  color: #8C8C8C;
  font-size: 16px;
  position: absolute;
  top: calc( 50% - 1px );
  left:10px;
  transform:translateY(-50%); 
}
.profileArea .fa-circle{
  color: #8C8C8C;
  font-size: 18px;
  position: absolute;
  top: calc( 50% - 1px );
  right:8px;
  transform:translateY(-50%); 
}
.profileArea .fa-exclamation-circle{
  color: #ff0000;
  font-size: 18px;
  position: absolute;
  top: calc( 50% - 1px );
  right:8px;
  transform:translateY(-50%); 
}
.profileArea .fa-check-circle{
  color: #00ff00;
  font-size: 18px;
  position: absolute;
  top: calc( 50% - 1px );
  right:8px;
  transform:translateY(-50%); 
}
.profileArea .fa-heart{
  color: #f00;
  font-size: 66px;
}

.profileArea .level-bar{
  background: #dedede;
  height: 11px;
  width: 85px;
  border-radius: 11px;
  overflow: hidden;
}
.profileArea .level-bar-inner{
  display: block;
  background: #ff8686;
  height: 11px;
  width: 0;
}

.profileArea .questionIcon{
  width: 26px;
  height: 26px;
  border: 3px solid #999;
  border-radius: 26px;
  display: inline-block;
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}
.profileArea .questionIcon:hover{
  background: #ccc;
}
.profileArea .questionIcon a{
  font-size: 24px;
  display: block;
  width: 100%;
  height:100%;
  color: #999;
  position: relative;
  text-align: center;
  top: -5px;
  left: 0;
}

.profileArea{
  border-radius: 6px;
  background-color: #FFFFFF;
  padding: 20px 30px;
  position: relative;
}
.profileAreaInner{
  display: flex;
}

.profileArea .cooperationCheckerGroup{
  margin-bottom: 15px;
}
.profileArea .cooperationCheckerBlock{
  display: flex;
}

.profileArea .userInfomation{
  display: flex;
  align-items:center;
  width:270px;
  position: relative;
}

.profileArea .userIdInformation{
  margin-right: 40px;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profileArea .userIdInformation .nickName{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.profileArea .userIdInformation .userId{
  font-size: 16px;
}

.profileArea .userStatus{
  flex: 1;
}

.profileArea .settingArea{
  display: flex;
  position: absolute;
  top: 20px;
  right: 30px;
}
.profileArea .mailIcon{
  width: 40px;
  margin-right: 25px;
  position: relative;
}

.profileArea .unread::after{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  transform: translate(50%,-50%);
  width:24px;
  height: 24px;
  background: #f00;
  border-radius: 20px;
  animation: flash 2s linear infinite;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


.profileArea .settingIcon{
  width: 34px;
}

.profileArea .wonderInfomationArea{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.profileArea .wonderLevelArea{
  display: flex;
}
.profileArea .wonderLevelIcon{
  width: 58px;
  margin-right: 15px
}

.profileArea .wonderLevelGaugeText{
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.profileArea .wonderLevelGaugeText .positionName{
  font-size: 18px;
  font-weight: bold;
}

.profileArea .wonderCoin{
  display: flex;
}

.profileArea .wonderCoinImage{
  margin-right: 15px
}
.profileArea .wonderCoinTotal{
  font-size: 24px;
  position: relative;
  min-width: 4em;
  font-weight: bold;
}
.profileArea .wonderCoinTotalUnit{
  font-size: 16px;
}

.profileArea .wonderTotalCount{
  display: flex;
}
.profileArea .wonderHeartIcon{
  margin-right: 15px
}
.profileArea .wonderHeartTotal{
  font-size: 24px;
  position: relative;
  min-width: 4em;
  font-weight: bold;
}
.profileArea .wonderHeartTotalUnit{
  font-size: 16px;
  font-weight: normal;
}

.profileArea .appwork{
  background-color:#dcdcdc;
  margin-top:20px;
}
.profileArea .appwork{
  position: relative;
}
.profileArea .appwork .judgingTag{
  position: absolute;
  top: 0;
  left: 0;
  background: #f80c69;
  opacity: 0.9;
  padding: 5px 10px 5px 10px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  z-index: 999;
}
.profileArea .delBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
.profileArea .delBtn .link {
  display: block;
  background: #3b3730;
  opacity: 0.9;
  padding: 5px 10px 5px 10px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
}

.tab .list.here {
  background-color: #78F65F;
  background-image: url("../../../img/v3/mypage/mypage_bg01.png");
  background-clip: padding-box;
}
.tab .list.here .title {
  color: #000;
}

.myWorkList .panelArea{
  text-align: center;
}

.myWorkList .myWorkListTitle{
  text-align: center;
  margin:35px 0;
  background: #FF581A;
  color: #fff;
  display: inline-block;
  padding: 5px 40px;
  border-radius: 35px;
}

.myWorkList .textButton {
    background-color: #33cc00;
    padding: 10px 0 6px;
    margin-bottom: 20px;
}

.myWorkList .textButton .text{
  color: #FFFFFF;
}
.myWorkList .awardTitle {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ff6600;
}
.myWorkList .panel{
  border: 1px solid #ccc;
  box-sizing: border-box;
}

@media screen and (max-width:768px) {
  .profileArea{
    padding: 10px;
  }
  .profileAreaInner{
    display: block;
  }
  .profileArea .settingArea {
    top: -50px;
    right: 0;
  }
  .profileArea .mailIcon {
    width: 35px;
    margin-right: 15px;
  }
  .profileArea .userInfomation {
    width: 100%;
    margin-bottom: 20px;
  }
  .profileArea .userIdInformation {
    margin-right: 0;
  }
  .profileArea .userIdInformation .nickName {
    margin-bottom: 0;
  }
  .profileArea .userIdInformation .userId {
    font-size: 12px;
  }
  .profileArea .profIcon {
  
  }
  .profileArea .settingIcon {
    width: 28px;
  }
  .profileArea .cooperationCheckerBlock {
    
  }
  .profileArea .cooperationChecker {
    margin-right: 0;
    margin-left: 5px;
    font-size: 12px;
  }
  .profileArea .wonderLevelIcon{
    width: 30px;
    margin-right: 5px;
  }
  .profileArea .wonderLevelGaugeText{
    font-size: 12px;
  }
  .profileArea .level-bar {
    height: 6px;
    width: 60px;
  }
  .profileArea .wonderCoinImage{
    width: 30px;
    margin: 0 5px 0 10px;
  }
  .profileArea .wonderCoinTotal{
    font-size: 12px;
  }
  .profileArea .wonderCoinTotalUnit{
    font-size: 12px;
    font-weight: normal;
  }
  .profileArea .questionIcon {
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    position: relative;
    vertical-align: bottom;
  }
  .profileArea .questionIcon a {
    font-size: 18px;
  }
  .profileArea .wonderHeartIcon {
    margin-right: 10px;
  }
  .profileArea .fa-heart {
    font-size: 30px;
  }
  .profileArea .wonderHeartTotal{
    font-size: 12px;
  }
  .profileArea .wonderHeartTotalUnit{
    font-size: 12px;
  }
  .myWorkList .myWorkListTitle{
    margin:10px 0 20px;
    font-size: 24px;
  }
  .panelListWrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:5px;
  }
  .panelListWrapper .imgArea,
  .panelListWrapper .textArea{
    float: none;
    width: 100%;
  }
}