@charset "utf-8";

/*////////////////////////////////////////////////
活用事例詳細 / 登録済み活用事例 /会員情報 / 掲示板投稿　共通
////////////////////////////////////////////////*/
/*------ メイン画像 ------*/
.casestudytopic-img_image,
#myutlilize .images_area,
.memberprofile_image,
#mypage-post .images_area{
  max-width: 1000px;
  width: 100%;
  height: auto;
}

.casestudytopic-img_image img,
#myutlilize .images_area img,
.memberprofile_image img,
#mypage-post .images_area img{
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: cover;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .casestudytopic-img_image,
  #myutlilize .images_area,
  .memberprofile_image,
  #mypage-post .images_area {
    width: 100%;
  }

  .casestudytopic-img_image img,
  #myutlilize .images_area img,
  .memberprofile_image img,
  #mypage-post .images_area img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*////////////////////////////////////////////////
casestudytopic
////////////////////////////////////////////////*/

#mypage-post .topic_data,
#post .topic_data,
#myutlilize .topic_data,
#utilize .topic_data,
#casestudytopic-img .topic_data,
#casestudytopic-noimg .topic_data,
#mypage-casestudytopic-img .topic_data,
#mypage-casestudytopic-noimg .topic_data,
#mypage-postlist .topic_data{
  width: 880px;
  text-align: right;
  color: #343434;
  font-size: 1.125rem;
  line-height: 1.8125rem;
  font-weight: 400;
  margin: 0 auto;
  background-color: white;
}

#mypage-post section a,
#post section a,
#myutlilize section a,
#utilize section a,
#casestudytopic-img section a,
#casestudytopic-noimg section a,
#mypage-casestudytopic-img section a,
#mypage-casestudytopic-noimg section a,
#mypage-postlist section a {
  color: #017d79;
  text-decoration: underline 1px;
  -webkit-text-decoration: underline #017d79 1px;
}

#mypage-post .topic_data #topic_title,
#post .topic_data #topic_title,
#myutlilize .topic_data #topic_title,
#utilize .topic_data #topic_title,
#casestudytopic-img .topic_data #topic_title,
#casestudytopic-noimg .topic_data #topic_title,
#mypage-casestudytopic-img .topic_data #topic_title,
#mypage-casestudytopic-noimg .topic_data #topic_title,
 #mypage-postlist .topic_data #topic_title{
  width: 880px;
  font-size: 1.625rem;
  line-height: 2.375rem;
  color: #343434;
  text-align: left;
  margin: 24px auto 32px;
  text-wrap: wrap;
  word-break : break-all;
}

.casestudytopic-img_text {
  width: 880px;
  text-align: left;
  font-size: 1.125rem;
  line-height: 2rem;
  margin: 32px auto 80px;
  padding-bottom: 48px;
  position: relative;
  line-break: anywhere;
}

.casestudytopic-img_text p#replaceURL{
  margin-bottom: 24px;
}

#mypage-post .attachment_file,
#post .attachment_file,
#myutlilize .attachment_file,
#utilize .attachment_file,
#casestudytopic-img .attachment_file,
#casestudytopic-noimg .attachment_file,
#mypage-casestudytopic-img .attachment_file,
#mypage-casestudytopic-noimg .attachment_file,
#mypage-postlist .attachment_file {
  margin: 32px auto;
}

#mypage-post .attachment_file img,
#post .attachment_file img,
#myutlilize .attachment_file img,
#utilize .attachment_file img,
#casestudytopic-img .attachment_file img,
#casestudytopic-noimg .attachment_file img,
#mypage-casestudytopic-img .attachment_file img,
#mypage-casestudytopic-noimg .attachment_file img,
#mypage-postlist .attachment_file img{
  padding-right: 14px;
  margin-bottom: -8px;
  filter: brightness(0) saturate(100%) invert(31%) sepia(39%) saturate(2310%) hue-rotate(147deg) brightness(98%) contrast(99%);
}

#catalog_list {
  text-align: center;
  padding: 24px;
  background-color: #D0EFEE;
  margin-bottom: 80px;
}
#catalog_list ul li:has(h4) {
  list-style: none;
  text-align: center;
  margin: 0 auto;
}
#catalog_list h4 {
  font-size: 1.5rem;
  color: #343434;
  margin-bottom: 24px;
  padding-bottom: 12px;
}

#catalog_list h4 img {
  margin: 0 12px -15px 0;
}

#catalog_list ul {
  padding: 32px 0;
  background-color: white;
  border-radius: 10px;

}

#catalog_list ul li {
  margin: 24px 15px 0 47px;
  list-style: disc;
  color: #017D79;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.8125rem;
  line-break: anywhere;
  background-color: white;
}

#catalog_list ul li a {
  -webkit-line-clamp: 10;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#catalog_list .popup {
  position: relative;

}

#catalog_list .popup a {
  max-width: calc(100% - 187px);
  display: inline-block;
  position: relative;
}

#catalog_list .popup::after {
  content: url(../images/icon_bubble_catalogdata.png);
  padding-left: 12px;
}

.popup_box {
  border: #189A94 1px solid;
  text-align: center;
  right: -117px;
  top: -84px;
  z-index: 999;
  display: none;
  position: absolute;
}

.popup_box .upper {
  padding: 6px 14px;
  background-color: #189A94;
  color: white;
  font-size: 1rem;
  line-height: 1.3125rem;
}

.popup_box .lower {
  padding: 6px 14px;
  background-color: white;
  color: #2A2A2A;
  font-size: 0.875rem;
  line-height: 1.375rem;
}

#catalog_list .popup:hover .popup_box {
  display: inline-block;
}

#post h3,
#mypage-post h3,
#myutlilize h3,
#utilize h3,
#casestudytopic-img h3,
#casestudytopic-noimg h3,
#mypage-casestudytopic-img h3,
#mypage-casestudytopic-img h3,
#mypage-postlist h3{
  max-width: 1000px;
  width: fit-content;
  padding: 8px 62px 8px 36px;
  border-left: 11px solid #006563;
  border-bottom: 2px solid #017D79;
  text-align: left;
  font-size: 1.75rem;
  line-height: 2.5rem;
  color: #017D79;
  overflow-wrap: break-word;
}

#post .company_summary,
#utilize .company_summary,
#casestudytopic-img .company_summary {
  margin: 42px auto 49px;
  display: block;
  position: relative;
}

#post .company_summary .company_img,
#utilize .company_summary .company_img,
#casestudytopic-img .company_summary .company_img {
  width: 300px;
  height: 168.75px;
  display: inline-block;
  vertical-align: top;

}

#post .company_summary .company_img img,
#utilize .company_summary .company_img img,
#casestudytopic-img .company_summary .company_img img {
  object-fit: scale-down;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  display: flex;
}

@-moz-document url-prefix() {
    #post .company_summary .company_img img,
  #utilize .company_summary .company_img img,
  #casestudytopic-img .company_summary .company_img img {
    width: 300px;
    height: 168.75px;
  }
}

#post .member_data,
#utilize .member_data,
#casestudytopic-img .member_data {
  margin-bottom: 127px;
}

#post .company_summary .company_data,
#utilize .company_summary .company_data,
#casestudytopic-img .company_summary .company_data {
  width: calc(100% - 305px);
  padding-left: 28px;
  text-align: left;
  display: inline-block;
}

#post .company_summary .company_data .company_name,
#utilize .company_summary .company_data .company_name,
#casestudytopic-img .company_summary .company_data .company_name {
  font-size: 1.25rem;
  margin-bottom: 24px;
}

#post .company_summary .company_data .summary_txt,
#utilize .company_summary .company_data .summary_txt,
#casestudytopic-img .company_summary .company_data .summary_txt {
  font-size: 1.125rem;
  line-height: 1.875rem;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  line-break: anywhere;
}

#post .like_btn,
#utilize .like_btn,
#casestudytopic-img .like_btn {
  right: 0;
  position: absolute;
  margin-top: 32px
}

#post .like_btn_on,
#utilize .like_btn_on,
#casestudytopic-img .like_btn_on {
  right: 0;
  position: absolute;
  margin-top: 32px
}

.contact .envelope {
  padding-right: 12px;
  margin-bottom: -3px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

@media (max-width: 960px) {
  #post #heading h1,
  #myutlilize h1,
  #utilize #heading h1,
  #casestudytopic-img #heading h1,
  #casestudytopic-noimg #heading h1{
    margin: 2px auto 2px;
    text-align: center;
  }

  #post .topic_data,
  #myutlilize .topic_data,
  #utilize .topic_data,
  #casestudytopic-img .topic_data,
  #casestudytopic-noimg .topic_data,
  #mypage-casestudytopic-img .topic_data,
  #mypage-casestudytopic-noimg .topic_data,
  #mypage-post .topic_data{
    width: 100%;
    text-align: right;
    color: #343434;
    font-size: 1.125rem;
    line-height: 1.8125rem;
    font-weight: 400;
    margin: 0 auto;
}

  #post .topic_data #topic_title,
  #myutlilize .topic_data #topic_title,
  #utilize .topic_data #topic_title,
  #casestudytopic-img .topic_data #topic_title,
  #casestudytopic-noimg .topic_data #topic_title,
  #mypage-casestudytopic-img .topic_data #topic_title,
  #mypage-casestudytopic-noimg .topic_data #topic_title,
  #mypage-post .topic_data #topic_title{
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  #post .topic_data .company_name,
  #myutlilize .topic_data .company_name,
  #utilize .topic_data .company_name,
  #casestudytopic-img .topic_data .company_name,
  #casestudytopic-noimg .topic_data .company_name,
  #mypage-casestudytopic-img .topic_data .company_name,
  #mypage-casestudytopic-noimg .topic_data .company_name,
  #mypage-postlist  .topic_data .company_name{
    font-size: 1.125rem;

  }

  .last_updated, .updated_name {
    font-size: 1rem;
  }

#mypage-post .casestudytopic-img_text{
  padding-bottom: 6px;
}

  .casestudytopic-img_text {
    width: 100%;
    margin-bottom: 18px;
  }

  #myutlilize .main_content{
    margin-top: 24px;
  }

  #post h3,
  #myutlilize h3,
  #utilize h3,
  #casestudytopic-img h3,
  #casestudytopic-noimg h3,
  #mypage-casestudytopic-img h3,
  #mypage-casestudytopic-noimg h3,
  #mypage-post h3{
    font-size: 1.25rem;
    line-height: 1.0625rem;
    padding: 0 28px 7px 20px;
  }

  #post .company_summary,
  #myutlilize .company_summary,
  #utilize .company_summary,
  #casestudytopic-img .company_summary,
  #casestudytopic-noimg .company_summary,
  #mypage-casestudytopic-img .company_summary,
  #mypage-casestudytopic-noimg .company_summary {
    margin-top: 22px;
  }

  #catalog_list h4 {
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
  }

  #catalog_list h4 img {
    margin: 0 12px 0 0;
  }

  #catalog_list ul li {
    font-size: 1rem;
  }

  #catalog_list h4 img {
    width: 38px;
  }

  #catalog_list .popup a {
    max-width: 100%;
  }

  #post .company_summary .company_data .company_name,
  #utilize .company_summary .company_data .company_name,
  #casestudytopic-img .company_summary .company_data .company_name,
  #casestudytopic-noimg .company_summary .company_data .company_name,
  #mypage-casestudytopic-img .company_summary .company_data .company_name,
  #mypage-casestudytopic-noimg .company_summary .company_data .company_name {
    margin: 22px auto 24px;
  }

  #post .company_summary .company_data .summary_txt,
  #utilize .company_summary .company_data .summary_txt,
  #casestudytopic-img .company_summary .company_data .summary_txt,
  #casestudytopic-noimg .company_summary .company_data .summary_txt,
  #mypage-casestudytopic-img .company_summary .company_data .summary_txt,
  #mypage-casestudytopic-noimg .company_summary .company_data .summary_txt {
    font-size: 1rem;
  }

  #post .company_summary .company_img,
  #utilize .company_summary .company_img,
  #casestudytopic-img .company_summary .company_img,
  #casestudytopic-noimg .company_summary .company_img,
  #mypage-casestudytopic-img .company_summary .company_img,
  #mypage-casestudytopic-noimg .company_summary .company_img {
    width: 100%;
    height: auto;
    display: block;
  }

  #post .company_summary .company_data,
  #utilize .company_summary .company_data,
  #casestudytopic-img .company_summary .company_data,
  #casestudytopic-noimg .company_summary .company_data,
  #mypage-casestudytopic-img .company_summary .company_data,
  #mypage-casestudytopic-noimg .company_summary .company_data {
    width: 100%;
    padding: 0;
    display: block;
  }

  #post .member_data,
  #utilize .member_data,
  #casestudytopic-img .member_data,
  #casestudytopic-noimg .member_data,
  #mypage-casestudytopic-img .member_data,
  #mypage-casestudytopic-noimg .member_data {
    margin-bottom: 64px;
  }

  #catalog_list {
    margin-bottom: 48px;
  }

  #catalog_list .popup {
    padding-top: 38px;
  }

  #catalog_list .popup::after {
    content: '';
    padding-left: 0;
  }

  #catalog_list .popup::before {
    content: url(../images/icon_bubble_catalogdata_sp.png);
  }

  #memberprofile_data .contact {
    position: static;
    margin: 11px auto;
  }
}

/*////////////////////////////////////////////////
掲示板投稿　コメントエリア
////////////////////////////////////////////////*/
div.commentlist_area{
  margin: 80px auto 56px;
}

div.commentlist_header{
  height: 58px;
  display: flex;
  justify-content: space-between;
}

div.commentlist_header div.new_comment_btn{
  margin: auto ;
  }

@media (max-width: 960px) {
 div.commentlist_header{
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-right: 0;
  }
  div.commentlist_header .new_comment_btn{
    margin-left: auto;
  }
}

@media (max-width: 480px) {
    div.commentlist_header h3{
    height: 26px;
    margin-bottom: 16px;
  }
}

/* 非アクティブ化コメント追加ボタン */
.commentlist_area .new_comment_btn.inactive{
    display: flex;
    align-items: center;
    background: #737373;
    padding: 0 12px;
}

.commentlist_area .new_comment_btn.inactive  p{
    width: fit-content;
}

.commentlist_area .new_comment_btn.inactive img{
    margin: 0 8px 0 -10px;
    width: 30px;
}

  div.commentlist_area .attention {
    text-align: right;
    font-weight: bold;
    color: #006563;
  }

.commentlist_all{
  padding: 0;
}

.numCopyBtn button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 27px;
    background-color: white;
    border: #006563 1px solid;
    color: #006563;
    margin-left: 10px;
    font-size: 14px;
}

img.numCopyBtn {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.comment_num_div {
    display: flex;
}

.comment_num {
    font-weight: bold;
}

.numCopyBtn button:hover {
    opacity: 0.8;
    transition: 0.5s;
    color: #006563 !important;
    cursor: pointer;
}

/*----- 共通デザイン -----*/
.comment_header,
.reply_header{
  display: grid;
  grid-template-columns: 64px 1fr;
  margin-bottom: 16px;
}

div.comment_header img,
div.reply_header img{
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

 .comment_block ul .user_info{
  display: flex;
  margin-bottom: 6px;
  font-weight: bold;
  text-wrap: wrap;
  word-break : break-all;
   flex-wrap:wrap;
}

/*テナント名*/
 .comment_block ul .campany_name {
  position: relative;
  padding-top: 0;
  width: fit-content;
  margin:3px 12px 3px 0;
}

/*テナント名_返信コメント*/
 .comment_block ul .reply_header .campany_name{
  max-width: 600px;
}

 .comment_block ul .campany_name a{
  width: inherit;
   display:block;
}

/*投稿会員アイコン*/
span.masteruser{
  display: block;
  width: fit-content;
  height: 24px;
  color: #017D79;
  border: solid 1px;
  padding: 0 6px;
  font-size: 0.875rem !important;
  margin:3px 12px 3px 0;
}

/*ユーザー名*/
 .comment_block ul .user_name {
  color: #343434;
  max-width: 900px;
  padding-left: 12px;
  border-left: solid 1px ;
  margin:3px 0;
}



 .comment_block ul .date{
  display: flex;
  font-size: 0.9rem;
}

 .comment_block ul .date p:first-child{
    margin-right: 16px;
}

@media (max-width: 768px) {
  .comment_header,
  .reply_header{
    display: grid;
    grid-template-columns: 34px 1fr;
    margin-bottom: 16px;
  }
  div.comment_header img,
  div.reply_header img{
    width: 30px;
    height: 30px;
    margin: 0 auto;
  }

 .comment_block ul .user_info{
    display: flex;
    flex-direction: column;
    padding-left: 8px;
  }

 .comment_block ul .user_name{
  padding-left: 0;
  border-left: none ;
}

 .comment_block ul .date{
    display: flex;
    flex-direction: column;
    padding-left: 8px;
  }
}
.comment_block ul li p:not([class]){
  font-size: 1.1rem;
  text-wrap: wrap;
  word-break : break-all;
}

/*----- コメントボックス -----*/
.comment_block li.comment{
  padding: 16px;
  border: 1px solid #017D79;
  margin: 16px 0;
}

@media (max-width: 480px) {
  .comment_block li.comment{
    margin-bottom: 16px;
  }
}

/*----- 注記アイコン -----*/
/*共通*/
.status_public,
.status_himitsu {
  width: fit-content;
  text-align: center;
  padding: 0 6px;
}

li.comment .status_public,
li.comment .status_himitsu {
  margin-bottom: 16px;
}

.status_public p,
.status_himitsu p{
  font-size: 0.875rem !important;
  font-weight: bold;
}

/*秘密にされました*/
#post .status_himitsu {
  background: #FFF0B3;
  border: solid 1px #6B5F33;
  color: #6B5F33;
}

/*秘密*/
.status_himitsu {
  background: #D3D3D3;
  border: solid 1px #1F1F1F;
}

/*公開*/
.status_public{
  color: #017D79;
  border: solid 1px;

}

/*----- 返信コメントボックス -----*/
.comment_block li.reply {
  display: flex;
}

.comment_block li.reply ul{
  width: 85%;
  padding: 24px;
  background: #D0EFEE;
  margin-left: auto;
  position: relative;
}

.comment_block li.reply ul li{
  padding: 16px;
  background: #ffffff;
  border-radius: 10px;
}

.comment_block li.reply ul::before {
    width: 40px;
    height: 50px;
    content: "";
    display: flex;
    border-bottom:  solid 1px #017D79;
    position: absolute;
    left: -40px;
}

.comment_block .vertical-line-box {
  width: 11%;
  display: flex;
  flex-direction: column;
  margin-top: -16px;
}

.comment_block .vertical-line {
    height: 90px;
    border-right: solid 1px #017D79;
}

.vertical-line-padding {
    height: 24px;
}

@media (max-width: 960px) {
  .comment_block li.reply ul::before {
    width: 30px;
    left: -30px;
  }
  .comment_block .vertical-line-box {
    max-width: 110px;
    width: calc(15% - 30px);
  }
  .comment_block .content_edit .delete_btn,
  .comment_block  .content_edit .edit_btn,
  .comment_block  .content_edit form,
  .comment_block  .content_edit form button{
      width: 100%;
      max-width: 200px !important;
      margin-left: 0;
    }
}

@media (max-width: 480px) {
  .comment_block li.reply ul{
    width: 100%;
    padding: 12px;
  }
  .comment_block li.reply ul::before {
    width: 45px;
    height: 16px;
    border-bottom:  none;
    border-right:  solid 1px #017D79;
    top: -16px;
  }
  .comment_block .vertical-line-box {
    display: none;
  }
}

/*-----投稿コメント_編集削除ボタン-----*/
div.cooment_footer.content_edit{
  display: flex;
  margin-top: 16px;
  justify-content: flex-end;
  font-size: 1.1rem;
}

div.commentlist_area  .reply_btn,
div.commentlist_area  .edit_btn,
div.commentlist_area  .delete_btn{
  width: 200px;
  height: 50px;
    }


div.commentlist_area  .delete_btn {
  padding: 10px 4px;
  text-align: center;
  margin-right: 16px;
    }

div.commentlist_area  .reply_btn{
  margin-left: 16px;
}

div.commentlist_area  .reply_btn a{
  padding-left: 12px;
}

div.commentlist_area .reply_btn,
div.commentlist_area  .edit_btn{
  border-color: #006563;
  background-color: #006563;
}

div.commentlist_area  .edit_btn {
        margin-right: 0;
    }

div.commentlist_area .reply_btn:hover,
div.commentlist_area  .edit_btn:hover,
div.commentlist_area  .delete_btn:hover {
    opacity: 0.8;
    cursor: pointer;
}

/*////////////////////////////////////////////////
掲示板投稿詳細_登録済み掲示板投稿詳細
////////////////////////////////////////////////*/
/* いいね数カウント */
#post .likecount,
#mypage-post .likecount  {
    margin-left: auto;
}

/* いいねカウント位置調整 */
@media (min-width: 961px) {
  #mypage-post .likecount,
  #mypage-post .likecount.likecount_on{
    position: relative;
    width: fit-content;
    min-width: 213px;
    height: 48px;
    margin-left: auto;
    white-space: nowrap;
  }
}

@media (min-width: 649px) and  (max-width: 960px) {
    #mypage-post .likecount,
    #mypage-post .likecount.likecount_on{
        position: relative;
        width: fit-content;
        min-width: 213px;
        height: auto;
        margin-left: auto;
        margin-top: 24px;
        word-break: break-all;
        padding: 6px;
    }

    #mypage-post .likecount ul,
    #mypage-post .likecount.likecount_on ul{
        margin-bottom: 0;
    }

    #mypage-post .list_content_block .btnAreabottom .content_edit{
        margin: 0 0 24px;
   }

    #mypage-post .likecount::before {
        content: "";
        height: 28px;
        width: 32px;
        left:8px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }

    #mypage-post .likecount.likecount_on::before {
      content: "";
      height: 33px;
      width: 41px;
      left:8px;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
}

@media (max-width: 648px) {
    #mypage-post .likecount,
    #mypage-post .likecount.likecount_on{
        position: relative;
        width: 100%;
        min-height: 30px;
        height: auto;
        margin: 0 auto;
        margin-top: 24px;
        word-break: break-all;
        padding: 6px;
    }

    #mypage-post .likecount ul,
    #mypage-post  .likecount.likecount_on ul{
        margin-bottom: 0;
    }

    #mypage-post .likecount::before {
      left:8px;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    #mypage-post .likecount.likecount_on::before {
      right:5px;
      position: absolute;
            top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
}


/*----- コメントステータス設定-----*/
/* 共通 */
button.btn_himitsu,
button.btn_public{
  width: 200px;
  height: 50px;
  text-align: center;
  font-size: 1.125rem;
  border-radius: 5px;
  font-weight: 500;
  padding-left: 16px;
}

button.btn_himitsu:hover,
button.btn_public:hover{
  opacity: 0.7;
  transition: 0.5s;
}

/* 秘密にする */
button.btn_himitsu{
  background: #D3D3D3;
  border: solid 2px #1F1F1F;
  color: #1F1F1F;
  background-repeat: no-repeat;
  background-size: 28px 30px;
  background-position: left 16px center;
  background-image: url("../images/icon_btn_himitsu.svg");
  position: relative;

}

/* 公開する */
button.btn_public{
  background: #ffffff;
  border: solid 2px #006563;
  color: #006563;
  background-repeat: no-repeat;
  background-size: 28px 30px;
  background-position: left 16px center;
  background-image: url("../images/icon_btn_public.svg");
  position: relative;
}

@media (max-width: 480px) {
  button.btn_public,
  button.btn_himitsu{
    max-width: 180px;
    background-size: 20px 20px;
    background-position: left 18px center;
    transition-duration: 0.5s;
    }
}

@media (max-width: 390px) {
  button.btn_public,
  button.btn_himitsu{
    background-size: 16px 16px;
    background-position: left 15px center;
    transition-duration: 0.5s;
    }
}