/***************  Mypage    *****************/
h4 {
  text-align: center;
  padding: 15px 0 15px 0;
}

h5 {
  border-left: 10px solid #e8b429;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}

/***************  Mypage Header *****************/
.mypage_header .top_padding {
  height: 40px;
}

.mypage_header .header_content {
  padding: 0px 0 0 0;
}

.mypage_header .menu {
  color: #000;
  display: table;
  width: 100%;
  position: absolute;
  position: fixed;
  z-index: 1;
  background-color: #ffffff;
  margin: 30px 0px;
}

@media screen and (max-width: 680px) {
  .mypage_header .menu {
      margin: 0px;
  }
}


.mypage_header .menu div {
  display: table-cell;
  cursor: pointer;
  text-align: center;
}

.mypage_header .menu div.mypage_menu {
  font-size: 20px;
  padding: 0 10px;
  width: 14.28%;
  padding: 8px 0;
}

.mypage_header .user_info {
  padding: 30px 40px;
  margin: 80px 0 0 0;
  color: #000;
  height: 70px;
}

.mypage_header .user_info div {
  padding: 0 10px 0 0;
  font-size: 16px;
  vertical-align: middle;
  float: left;
  display: table-cell;
}

.mypage_header .user_info div.nick_name {
  padding-top: 3px;
}

.mypage_header .user_info div.profile_btn {
  /*float: right;*/
  margin-left: auto;
}

/***************  Mypage Sub menu *****************/
.mypage .mypage_content .sub_menu_wrap {
  display: table;
  width: 100%;
  background-color: #fff;
}

.mypage .mypage_content .sub_menu {
  color: #000;
  padding: 8px 0;
  display: table-cell;
  text-align: center;
  cursor: pointer;
  height: 35px;
}

.mypage .content {
  padding: 3% 5%;
  margin: 0 auto;
}

.mypage h2.title {
  background: #eee;
  margin: 0;
  padding: 8px;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

/*************** Mypage project_menu *****************/
.sub_menu_wrap {
}

.sub_menu_wrap div.sub_menu{
  width: 33%;
}

.sub_menu_wrap div.report_menu {
  width: 34%;
}

.sub_menu_wrap div.report_sub_menu {
  position: absolute;
  width: 30%;
  top: 220px;
  right: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.sub_menu_wrap div.report_sub_menu div {
  padding: 10px 10px 10px 20px;
  cursor: pointer;
}

.sub_menu_wrap div.report_sub_menu div:hover {
  background: rgba(100, 100, 100, 1);
}

/** 書き足し **/
  nav {
      margin-bottom: 15px;
  }

  nav ul{
  display: table;
  margin: 0 auto;
  padding: 0 ;
  width: 80%;
  text-align: center;
  }
  nav li{
  display: table-cell;
  min-width: 50px;
  }
  nav a{
  display: block;
  width: 100%;
  text-decoration: none;
  color: #555;
  padding-bottom: 5px;
  }
  nav li.current{
  border-bottom: 3px solid #92D050;
  }
  nav li:hover{
  color: #81e2fa;
  border-bottom: 3px solid #81e2fa;
  }

/*************** Mypage report    *****************/
.mypage .report_edit_menu {
  margin-bottom: 10px;
  display: table;
  width: 100%;
}

.mypage .report_edit_menu div {
  display: table-cell;
  width: 33%;
  text-align: center;
}

.mypage .report_edit_menu div p {
  padding: 5px;
  margin: 0;
}

.mypage .report_edit_menu div.active p {
  background: #eee;
  border-radius: 20px;
}

.mypage .report_edit_detail_header {
  padding: 10px 10px 20px 10px;
}

.mypage .btn_menu {
  margin-bottom: 5px;
}

hr.report_edit {
  border: 0;
  border-bottom: 1px solid #999;
  background: #999;
}

.mypage .report_edit_detail .project_content {
  padding: 10px;
  margin-top: 10px;
  max-width: 700px;

}

/*************** Mypage Message *****************/
.mypage .message_box_menu {
  margin-bottom: 10px;
  display: table;
  width: 100%;
}

.mypage .message_box_menu div {
  display: table-cell;
  width: 33%;
  text-align: center;
}

.mypage .message_box_menu div p {
  padding: 5px;
  margin: 0;
}

.mypage .message_box_menu div.active p {
  background: #eee;
  border-radius: 20px;
}

.mypage .message {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

.mypage .message_content {
  padding: 10px 0;
}

.mypage #reply_form {
  padding: 10px 0;
}

.mypage tr.no_read {
  background: #fee;
}

.mypage tr.no_read td {
  border: 1px solid #f99;
}

/*************** Mypage ソーシャル連携    *****************/
.mypage .social_box {
  padding: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.mypage .social_box div {
  margin: 10px 0 20px 0;
}

/*************** Mypage コメント一覧    *****************/
.mypage .mypage_comment {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  margin: 10px auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

.mypage .mypage_comment .date {
  
  text-align: initial;
}

/*************** Mypage Money Plan    *****************/
.money_plan {
  padding: 10px;
}

.money_plan .year_month {
  display: table;
  width: 100%;
  max-width: 400px;
  margin: 10px auto 20px auto;
}

.money_plan .year_select,
.money_plan .month_select,
.money_plan .year_str,
.money_plan .month_str {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.money_plan .money_plan_table th {
  background: #f2f2f2;
  border-color: #999;
  text-align: center;
  vertical-align: middle;
}

.money_plan .money_plan_table td {
  border-color: #999;
}

.money_plan .money_plan_table tr.total_price th {
  background: #cef;
  color: #000;
}

/*************** Mypage User edit  *****************/
#preview_img img {
  object-fit: cover;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  max-width: 100% !important;
}

/************** Card **************/
div.card div.bluebox {
  padding: 10px;
  border: 1px solid #069;
  background: #eef;
  color: #000;
  margin: 10px 10px 10px 0;
}

div.card div.redbox {
  padding: 10px;
  border: 0px solid #c21;
  background: #fee;
  color: #c21;
  margin: 10px 10px 10px 0;
}

/************** 追加 **************/

.right {
  width: 50%;
  margin-left: auto;
  margin-right: auto
}

.mypage h4 {
  /*border-bottom: 1px solid #CCCCCC;*/
}



.grid_container {
  margin: 10px !important;
}


.grid, .grid_wrap {
  width: 100% !important;
  float: left !important;
}


/** 追加 **/

/** 投稿一覧**/
.my_project {
  display: flex;
  align-items: center;
  padding: 24px 0px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: solid 1px #bdbdbd;
  
}
  
.my_project_com {
  display: flex;
  
  padding: 24px 0px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: solid 1px #bdbdbd;
  
}


.my_thum {
  width: 27%;
  padding: 0px;
  
}

.my_title {
  width: 56%;
  padding: 0px 40px;
  
}



.my_title h2{
  font-size: 16px;
  font-weight: bold;

}

.my_title  a{
  font-size: 16px;
  font-weight: bold;
  color:#333333;
}


.mypg_pointer {
  
  cursor: pointer;
}

.buttons {
  width: 17%;

}

.my_thum img{
  object-fit: cover;
  width: 100%;
  height: 10.4vw;
  border-radius: 5px;

}

.my_thum .movie{
  object-fit: cover;
  width: 100%;
  height: 10.4vw;
  border-radius: 5px;

}

.e_o_button a{
  padding: 10px;
  display: block;
}

.edit_p {
  border: 1px solid #C21630;
  border-radius: 10px;
  
}

.edit_p a{
  font-size:14px;
  font-weight: bold;
  text-align: center;
  padding: 10px ;

  display: block;
  color: #C21630;
}

.open_p {
  margin-top: 10px !important;
}

.btn_cer{
  border-radius: 10px;
}

.sppj{
  border: 1px solid #D8D8D8;
  font-size:14px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  color: #707070;
  cursor: pointer;

}

.sppj a{
  display: block;
  color: #707070;
}

.sppj a :hover{
  color: #707070 !important;
}

.report_p{
  margin-top: 10px !important;
}


/** pc画面ではsp非表示 **/
@media (min-width: 781px) {
  .sp{
      display: none;
  }
}

/** sp画面ではpc非表示 **/
@media (max-width: 780px) {
  .pc{
      display: none;
  }

  .my_project {
      display: flex;
      align-items:flex-start;
      padding: 16px 0;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-bottom: solid 1px #bdbdbd;
  }

  .my_project h2{
      font-size: 12px !important;
      margin-top: 0;
      margin-bottom: 18px;
  }
}


.my_project_com_sp{
  padding: 16px 0px;
  border-bottom: solid 1px #bdbdbd;
}

.m_c_t{
  display: flex;
  margin-bottom: 20px;
}

.my_thum_sp{
  width: 22%;
}

.pj_title_c_sp{
  width: 78%;
  padding-left: 16px;
  font-size: 12px;
  font-weight: bold;
}

.my_contents{
  width: 78%;
  padding: 0px 0px 0px 16px;
  

}



.my_contents_repo {
  width: 70%;
  padding: 0 10px 65px 10px;
  position: relative;
}

.my_thum_sp img{
  object-fit: cover;
  width: 100%;
  height: 12vw;
  border-radius: 3px;
}

.my_thum_sp .movie{
  object-fit: cover;
  width: 100%;
  height: 12vw;
  border-radius: 3px;
}

.buttons_sp {
  display: flex;
  justify-content:space-between;
  
}

/**メニューバー文字表示**/
.pro_oya {
  position   : relative;
  width: 100%;                /* 指定した分だけ相対的に移動 */
}
.pro_oya:hover .pro {
  display: inline;                /* インライン要素として表示 */
}
.pro {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(253, 255, 253, 0.749);       /* 背景色（透明度） */
  width:80px;                          /* 吹き出し全体の幅 */
  left : -150%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : -24px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
}
.pro:after{
  border-bottom: 0px solid rgba(253, 255, 253, 0.749); /* 吹き出し口の高さ・色 */
  border-left: 0px solid transparent;    /* 吹き出し口の幅１／２ */
  border-right: 0px solid transparent;   /* 吹き出し口の幅１／２ */
  top: -12px;                             /* 吹き出し口の位置調整 */
  left : 5%;                              /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}



/** その他**/
.mypage_content{
  background: #e2e2e2;
  margin: 0 30px;
  padding-bottom: 30px;
}

.active_menu {
  
  background: #e2e2e2;
  display: table-cell;
  text-align: center;
  cursor: pointer;
  
  
}


.mypage .mypage_content .sub_menu {
  background: #edeef0 !important;
}

.mypage .mypage_content .sub_menu:hover {
  background: #e2e2e2 !important;
}


.status{
  width: 100px;
  margin: 10px 30px 10px auto;
  
}

.no_login{
  height: 80px;
  width: auto;
  background:#ffffff;
}

.id{
  font-weight: 600;
}

.date{
  text-align:center;
}

.pj_info{
  display: flex;
  width: 100%;
}

.info{
  width: 50%;
}




/**PC画面のみ**/

@media (min-width: 781px) {
  .sp{
      display: none;
  }
}




/** スマホ画面 **/
@media (max-width: 780px) {

  .pc{
      display: none;
  }


  .mypage_content{
      padding:0 20px 20px 20px;
      margin: 0 !important;
  }

  .sub_menu_wrap{
      width: 100vw !important;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  }

  .mypage_header .user_info {
      padding: 3% 0 0 5%;
      margin: 40px 0 0 0;
      color: #000;
      height: 46px;
  }

  .no_login{
      display: none;
  }

  .mypage_header .top_padding {
      height: 0px;
  }
  

  /** スワイプ */

  .gnav {
      overflow-x: auto;
      overflow-y: hidden;
      margin: 0 calc(50% - 50vw);
      width: 100vw;
  }
  .gnav ul {
      display: table;
  }
  .gnav ul li {
      display: table-cell;
      white-space: nowrap;
  }
  
  .how_to_navi li:hover{
      border-bottom: 0px;
      }
  
  .how_to_navi a{
      padding: 0;
  }

  .active_menu{
      padding-left: 20px;
      padding-right: 20px;
  }

  .sub_menu{
      padding-left: 20px !important;
      padding-right: 20px !important;
  }
  
  .status{
      width: 100px;
      margin: 10px 0 10px auto;
      
  }

  .col-md-6 img{
      object-fit: cover;
      width: 100%;
      height: auto;
  }

  .delete_article h4 {
      font-size: 3.46vw !important;
      font-weight: 100;
      padding: 0;
      margin: 0;
  }
}

/** マイページメニューバー **/


.mypage_bg{
  width: 100%;
  margin-top:0;
  position: relative;
  
}

.mypage_bg img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mypage_bg .user_info{
  margin:0 !important;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
}

.mypage_header .user_info {
  background: initial; 
  display: flex;
  align-items: center;
}

.my_img img{
  width: 100px;
  border-radius: 50%;
}

/** スマホ画面 **/
@media (max-width: 780px) {

  .my_img img{
      width: 50px;
      border-radius: 50%;
  }
}


/** ファイルを選択**/
.file_img{
  display: none;
}

.file_add_label {
  font-size: 14px;
  font-weight: bold;
  padding: 7px 40px;
  color: #333333;
  background-color: white;
  border: 1px solid #D8D8D8;
  border-radius: 50px;
  cursor: pointer;
}

p {
  margin: 10px 0 0 0;    
}

/****プロフィール編集画面*******/

.prof_file_img{
  display: none;
}
.prof_file_add_label {
  font-size: 14px;
  font-weight: bold;
  padding: 7px 40px;
  color: #333333;
  background-color: white;
  border: 1px solid #D8D8D8;
  border-radius: 50px;
  cursor: pointer;
}

p {
  margin: 10px 0 0 0;    
}

/** 解除ボタン**/
.cancel_btn{
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;

  cursor: pointer;

  color: #fff;
  background: rgb(84, 83, 83);
  border-color: rgb(84, 83, 83);

  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 50px;

}

.buttons a:hover{
  /*color: #fff !important;**/
}

.cancel_btn_sp{
  

  cursor: pointer;

  color: #fff;
  background: rgb(84, 83, 83);
  border-color: rgb(84, 83, 83);

  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 50px;

}


/** オーディオ再生**/
.mypg_comment audio{
  width: 100%;
}

/** 公開非公開ボタン**/
.btn a, .btn a:hover, .btn a:focus {
  color: #fff !important;
  text-decoration: none;
}

/** sweet alert2 **/
/** !important をつけて設定**/
body {
  width: 100%; /* position:fixed;になった際に幅が変わるのを防ぐ */
}



.swal2-modal {
  font-family: 'fot-tsukuardgothic-std', sans-serif !important; 
}
.swal2-popup{
  padding: 0!important; 
}

.swal2-header{
  background-color: #F8F8F8 !important;
}


.swal2-title{
  font-size: 16px !important;
  padding: 12px !important;
  margin: 0 !important;
}

.swal2-close{
  font-size: 3em !important;
  height: 25px !important;
  line-height: 28px !important;
  right: 0px !important;
  color: #bfbfbf !important;
  font-weight: bold !important;
}


.swal2-content{
  font-size: 16px !important;
  padding: 22px 12px !important;
}

.swal2-actions {
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
  margin-top: 0px !important;
  flex-direction: row-reverse !important;
}

.swal2-modal .swal2-styled{
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-radius: 8px !important;
  width: 46% !important;
}

.swal2-styled.swal2-cancel {
  background-color: #fff !important;
  border: 1px solid #D8D8D8 !important;
  color: #6F6F6F !important;
  width: 46% !important;
}

.swal2-confirm .swal2-styled{
  width: 46% !important;
}

.ok_btn .swal2-confirm.swal2-styled{
  color: #6F6F6F !important;
  background-color: #fff !important;
  border: 1px solid #D8D8D8 !important;
}

.ok_btn .swal2-actions {
  justify-content: center !important;
}

.stop_btn .swal2-confirm.swal2-styled {
  background-color: #fff !important;
  color: #6F6F6F !important;
  border: 1px solid #D8D8D8 !important;
}

.stop_btn .swal2-cancel.swal2-styled {
  color: #fff !important;
  background-color: #C21630 !important;
}


body.swal2-no-backdrop .swal2-shown.swal2-center {
  width: 390px !important;
  
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
  margin: auto;
  width: 390px !important;
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
  margin: 0;
  width: 100%;
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow-y: visible !important; }



/** スマホ画面 **/
@media (max-width: 780px) {

  .swal2-content {
      font-size: 14px !important;
      padding-bottom: 26px !important;
  }

  .swal2-modal .swal2-styled {
      
      font-size: 13px !important;
  }

  .swal2-modal .swal2-styled{
      padding: 10px !important;
      width: 40% !important;
  }

  .swal2-actions {
      justify-content: space-around !important;
  }
}

/******** 投稿画面 投稿ボタンと画像動画表示部分入れ替え *******/
.sort_order{
  display:flex;           /* Flexコンテナ―に設定 */
flex-direction:column;  /* コンテンツの配置を「上→下」に設定 */
}

.sort_01{
  order:1 !important;
}

/********* フォーム カスタマイズ ******************/
.form-item {
  
}

.error-message {
  color: #C21630;
  font-size: 12px;
  padding: 4px 4px 4px 24px;
  margin-top: 0;
  display: none;
}

.error-message.-show {
  display: block;
}






.form_box{
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: none ;
}

.form_box.-show{
  border-bottom: 1px solid #C21630 !important;
}


.sele select {
width: 100%;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #999;

background: url('../img/down_arrow.png') 98% 60% no-repeat;

  background-size: 20px, 100%;
  
  
}

/** スマホ画面 **/
@media (max-width: 780px) {

  .mypage_bg {
      margin-top: 48px;
      
  }

  

}


/***プロフィール部分*****/
.prof_bg_img img{
  width: 100%;
  
}

.prof_u_img img{
  width: 24.5%;
  height: auto;
  object-fit: contain;

  border: 4px solid;
  border-color: white;
  border-radius: 50%;
}


.prof_u_img{
  
  
}

.prof_u{
  width: 80%;
  margin:0 auto 80px auto;
}

.self_des{
  font-size: 14px;
}

.p_gp{
  display: flex;
  margin-top: -6.5%;
}

.prof_u_img{
  width: 50%;
}

.prof_edit_btn{
  width: 50%;
  text-align: right;
  margin-top: 10%;

}

.prof_edit_btn a{
  font-size: 14px;
  font-weight: bold;
  color: #e8b429;

  padding: 14px 30px;
  border: 1px solid #e8b429;

  border-radius: 50px;
}

.profile_nick_name{
  margin: 16px 0;
  font-size: 18px;
  font-weight: bold;
}

/***投稿一覧**/
.index_title{
  font-size:24px;
  font-weight: bold;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 40px;
  border-bottom: solid 1px #bdbdbd;
}

.bottom_area{
  height: 75px;
}

.index_title_favo {
  font-size: 24px;
  font-weight: bold;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 40px;
  
}

.index_title_favo .el-icon-heart{
  color: #b90961;
}

.comt_idx_bottom{
  display: flex;
  justify-content: flex-end;

}

.my_com_title{
  width: 73%;
  padding:0 0 0 40px;
  
}

.pj_title_c{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  cursor: pointer;
}

.com_text{
  font-size: 14px;
  margin-bottom: 45px;
  word-wrap: break-word;
  
}
.comt_idx_bottom{
  font-size: 14px;
}

.com_dele{
  border-bottom: 1px solid #6F6F6F;
  cursor: pointer;
}

.trash{
  margin-right: 40px;
}
.trash a{
  color:  #6F6F6F;
  vertical-align:text-bottom;
  
}

.trash .el-icon-trash{
  font-size: 16px;
  padding-top: 5px;
  color:  #6F6F6F;
}






/** スマホ画面 **/
@media (max-width: 780px) {

  .prof_bg_img{
      margin-top: 56px;
  }

  .prof_u {
      width: 100%;
      margin: 0 auto 40px auto;
  }

  .prof_u_img img {
      width: 42.6%;
      height: auto;
      object-fit: contain;
  }

  .p_gp {
      margin-top: -12.5%;
  }

  .prof_edit_btn a {
      font-size: 12px;
      
      padding: 8px 12px;
      
  }

  .prof_edit_btn {
      margin-top: 16%;
  }

  .profile_nick_name {
      margin: 10px 0;
      font-size: 16px;
      font-weight: bold;
  }


  .index_title {
      font-size: 20px;
      font-weight: bold;
      width: 100%;
      padding-bottom: 24px;
      
  }

  .edit_p {
      border: 1px solid #C21630;
      border-radius: 10px;
      width: 44%;
      height: 32px;
  }

  .open_p {
      margin-top: 0px !important;
      width: 44%;
      height: 32px;
  }

  .edit_p a {
      line-height: 32px;
      padding: 0px;
  }

  .btn_cer {
      padding: 10px;
  }

  .open_p a {
      line-height: 32px;
      padding: 0px;
      border: none;
  }

  .open_p a:hover{
      border: none;
  }

  .bottom_area {
      height: 88px;
  }

  .article_content {
      
  }
  
  
  
  
  .sp .prof_img{
      object-fit: cover;
      width: 100%;
      height: 28.8vh;
      border-radius: 10px 10px 0 0;
  }
  
  .sp .movie{
  object-fit: cover;
  width: 100%;
  height: 12vw;
  border-radius: 3px;
  }
  
  
  
  .title_sp .more {
      position: absolute;
      right: 10px;
      bottom: 5px;
  
      font-size: 14px;
  }
  
  
  
  
  .comment_sp .more{
      position: absolute;
      right: 0;
      bottom: 0;
  }
  
  
  .main_contents{
      padding: 0 !important;
  }

  .post_sp h2{
      font-size:16px;
      font-weight: bold;
  }

  .com_text{
      
      margin-bottom: 40px;
      word-wrap: break-word;
      
  }

  .trash{
      margin-right: 14px;
  }

  .trash a{
      color:  #6F6F6F;
      vertical-align:text-bottom;
      
  }
  
  .trash .el-icon-trash{
      font-size: 16px;
      padding-top: 3px;
      color:  #6F6F6F;
  }
}

/****** プロフィール編集 **********/

.plof_content{
  width: 66%;
  margin:38px auto 0 auto;
}

.sub_menu_plof{
  display: flex;
  width: 100%;
  height: 56px;
}

.act_menu{
  width: 50%;
}

.notact_menu{
  width: 50%;
}

.sub_menu_plof a{
  display: block;
  text-align: center;
  line-height: 56px;
}


.act_menu a{
  font-size: 18px;
  font-weight: bold;
  color:#e8b429;
  border-top: 2px solid #e8b429;
}

.act_menu a :hover{
  color:#e8b429;
  border-top: 2px solid #e8b429;
}

.notact_menu a{
  font-size: 18px;
  font-weight: bold;
  color:#6F6F6F;
  border-top: 2px solid #D8D8D8;
}

.notact_menu a:hover{
  color:#e8b429;
  border-top: 2px solid #e8b429;
}

.prof_edit{
  margin: 36px 0 0 0;
}

.plof_gazou{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 24px;
}

#preview_img{
  
  width: 168px;
  margin: 0 auto;
}

.wrap_prev{
  position: relative;
  width: 168px;
  margin: 0 auto;
}

.camera_icon img{
  width: 40px !important;
  height: 40px !important;
}

.camera_icon{
  position: absolute;
  top: 110px;
  right: 0;
  cursor: pointer;
}



.pfol label{
  width: 100%;
  margin-left: auto;
  margin-right: auto;

}

.text_count{
  text-align: right;
}

.form-control{
  box-shadow: inset 0 0px 0px rgba(0,0,0,0.075) !important;
  border-bottom: 1px solid #D8D8D8 !important;
}


.prof_edit .fg_count{
  margin-bottom: 16px !important;
}

.prof_edit .fg_normal{
  margin-bottom: 38px !important;
}

.self_intro textarea {
  resize: none;
  
  height:120px;
}

.fg_normal .attention{
  color: #6F6F6F !important;
  font-weight: 100 !important;
}

.prof_edit label {
  
  margin-bottom: 16px !important;
}


.change_btn_pro{
  margin:64px auto 72px auto;
  
  width: 47%;
}

.change_btn_pro input{
  display: block;
  border-radius: 50px;
  padding: 24px;
}

.cha_btn_pro{
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  display: block;
  padding: 24px ;
  color: #fff;
  background-color: #e8b429;
  border: 1px solid #e8b429;

}

.taikai{
  color:#6F6F6F;
  font-weight: 100;
  text-align: center;
  margin-bottom: 24px;
}

.taikai_btn{
  width: 168px;
  margin: 0 auto 74px auto;
}

.taikai_btn button{
  display: block;
  border-radius: 50px;
  padding: 13px ;
}

.taikai_suru_btn{
  margin: 0 auto;
  width: 100%;
  color:#6F6F6F;
  border: 1px solid #D8D8D8;
  padding: 13px;
  background-color: #fff;
}




/*****パスワード変更***********/

.wrap_pass .content{
  padding-top: 40px !important;
  padding-bottom: 70px;
}

.wrap_pass .form_deco input{
  height: 40px;
}

.wrap_pass.form-group {
  margin-bottom: 24px !important;
}

.wrap_pass label{
  font-size:14px;
  font-weight: bold;
  margin-bottom: 16px;
}


.toggle{
  position: relative;
}

.toggle2{
  position: relative;
}


.js-password-toggle{
  position: absolute;
  top:46px;
  right: 22px;
}

.js-password-toggle2{
  position: absolute;
  top:46px;
  right: 22px;
}

.el-icon-eye-open{
  font-size: 20px;
  color:#707070;
  cursor: pointer;
}

.el-icon-eye-close{
  font-size: 20px;
  color:#707070;
  cursor: pointer;
}

.change_btn{
  margin-top:63px;
  border-radius: 20px;
}

.change_btn input{
  display: block;
  border-radius: 50px;
  padding: 24px auto;

}

.cha_btn{
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  display: block;
  padding: 24px ;
  color: #fff;
  background-color:#e8b429;
  border: 1px solid #e8b429;

}

.wrap_pass input{
  border-bottom: 1px solid #d8d8d8 !important;
  padding-left: 20px !important;
  font-size:16px ;
}

.toggle input{
  border-bottom: 1px solid #d8d8d8 !important;
  padding-left: 20px !important;
  font-size:16px !important;
}

.toggle2 input{
  border-bottom: 1px solid #d8d8d8 !important;
  padding-left: 20px !important;
  font-size:16px !important;
}

.form-group {
  margin-bottom: 24px !important;
}


.prof_bg_img{
  display: none;
}

.chokinbako_title .el-icon-question{
  color: #E8B406;
}


/** スマホ画面 **/
@media (max-width: 780px) {
  .prof_edit {
      margin: 24px 0 0 0;
  }

  .prof_edit .fg_normal{
      margin-bottom: 16px !important;
  }

  .prof_edit label {
      margin-bottom: 10px !important;
  }

  .change_btn_pro {
      margin: 40px auto 64px auto;
      width: 100%;
  }

  .change_btn_pro input {
      
      padding: 18px !important;
  }

  .taikai_btn button {
      padding: 12px;
  }

  .taikai_btn {
      margin: 0 auto 112px auto;
  }
  /**パスワード**/

  .plof_content{
      margin: 16px 0 ;
      width: 100%;
  }
  .sub_menu_plof {
      height: 40px;
      line-height: 40px;
  }

  

  .sub_menu_plof a{
      
      font-size:13px;
  }

  .sub_menu_plof a {
      line-height: 40px;
  }

  .wrap_pass .content {
      padding: 16px 0 70px 0!important;
  }

  .wrap_pass label {
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 8px;
  }


  .form-group {
      margin-bottom: 16px !important;
  }

  .js-password-toggle2,
  .js-password-toggle {
      
      top: 40px;
  }

  .change_btn {
      margin-top: 42px;
  }

  .cha_btn{
      padding: 18px;
      font-size:14px !important;
  }


  
}

.con_ind_icon img{
  width: 26px;
}
/************/

.delete_article h4 {
  
  font-size: 1vw ;
  font-weight: 100;
  padding: 0;
  margin: 0;
}

.sort_00 .form-group {
  text-align: center;
}

button#file_upload {
  margin: 0 auto;
  display: block;
}

button#m_up_btn {
  
  margin: 0 auto;
  display: block;
}

.no_comment {
  
  width: 80%;
  margin: 0 auto;
  
}

.edit_btn{
  font-size: 16px;
font-weight: bold;
color: white;
background-color: #ecb7bf;
border-radius: 50px;

display: block;

border: 0;

margin: 64px auto;
padding: 24px 128px;
}

/*****貯金箱とは(これより上はmypageのコピー)*********/

.chokin_top{
  padding-top: 80px;
}

.ab_top{
  text-align: center;
  margin-bottom: 84px;
}

.chokinbako_title{
  font-size: 38px;
  font-weight: bold;
  margin: 0px 0 40px 0;
  padding-top : 40px;
  
}

.chokinbako_title img{
  width: 36px;
  
  vertical-align: middle;
}

.cho_title{
  vertical-align: middle;
}

.cho_bottom,
.ab_cho {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 40px 0;
}

.cho_small{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 48px;
}

.chokinbako_img img {
  width: 51%;
  margin-top: 40px;
  
}


.kingaku_title h2 {
  font-size: 28px;
  font-weight: bold;
  padding-left: 12px;
  border-left: 5px solid #C21630;
  margin: 40px 0;
  text-align: left;
}


.chokin_all {
  margin-bottom: 48px;
}

.chokin_info{
  font-size:24px;
  font-weight: bold;
  text-align: start;
}

.cho_atenttion{
  margin-top: 12px;
  font-size:14px;
  font-weight: bold;
}

.cho_kin_all {
  margin: 40px 0 80px 0;
}


.plan_1_img img{
  width: 100%;

  margin: 24px 0 40px 0;
}

.plan_1_title h2 {
  font-size: 28px;
  font-weight: bold;
  padding-left: 12px;
  border-left: 5px solid #C21630;
  margin: 40px 0 0 0;
  text-align: left;
}

.jouken{
  background-color: #f3f3f6;
  padding: 40px 20px;
  margin: 40px 0 112px 0;
}

.jouken .entry_cond{
  margin: 0 0 0 0;
}

.jouken .el_plus {
  width: 10%;
}

.about_chokinbako .b_l {
  margin-right: 0;
}

/** スマホ画面 **/
@media (max-width: 780px) {

  .chokinbako_title {
    font-size: 24px;
    font-weight: bold;
    margin: 0px 0 24px 0;
    padding-top: 24px;
}

  .ab_cho {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 24px 0;
  }

  .cho_bottom,
  .cho_small {
    font-size: 14px;
    font-weight: 100;
    margin: 0 0 40px 0;

    text-align: left;
  }

  .chokin_top {
    padding-top: 58px;
  }

  .prof_bg_img{
    margin-top: 0px;
  }

  .chokinbako_title img {
    width: 24px;
  }  

  .chokinbako_img img {
    width: 100%;
    margin: 24px 0 0 0 ;
  }

  .kingaku_title h2 {
    font-size: 18px;
    margin: 0px 0 24px 0;
  }

  .chokin_info {
    font-size: 16px;
  }

  .cho_atenttion {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 100;
  } 

  .cho_kin_all {
    margin: 24px 0 40px 0;
  }

  .plan_1_title h2 {
    font-size: 18px;
  }
  .plan_1_img img {
    width: 100%;
    margin: 24px 0;
  }

  .jouken {
    background-color: #f3f3f6;
    padding: 24px 10px;
    margin: 24px 0 84px 0;
  }

  .jouken .sp_entry_cond {
    margin-top: 30px;
}
}