@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* https://cloudcasting.jp/profile/●●●●（プロフcode
   https://cloudcasting.jp/profile/●●●●（プロフcode/skill
   https://cloudcasting.jp/profile/●●●●（プロフcode/photo
   https://cloudcasting.jp/profile/●●●●（プロフcode/limited */

.area-pubprof-side {
  width: 400px;
  order: 1; }
  .area-pubprof-side__inner {
    padding-bottom: 2rem;
    position: sticky;
    position: -webkit-sticky;
    top: 0; }

.pubprof-sidebox {
  padding: 2.5rem 1.25rem 1rem; }
  .pubprof-sidebox__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    position: relative; }
  .pubprof-sidebox__name {
    margin-bottom: 1.75rem;
    color: #48485a;
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center; }
  .pubprof-sidebox__genre {
    margin-bottom: 2rem;
    color: #858b94;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center; }

.pubprof-sidesns {
  margin-bottom: .5rem;
  color: #858b94;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem; }
  .pubprof-sidesns + .pubprof-sidesns {
    margin-bottom: 2rem; }
  .pubprof-sidesns__item.twitter {
    margin: 0 13px;
    padding-left: 1.375rem;
    background: url("/images/client/icon_twitter_off.png") no-repeat left center/14px auto; }
    .pubprof-sidesns__item.twitter.on {
      background-image: url("/images/client/icon_twitter_on.png");
      color: #56b8b8;
      text-decoration: underline; }
  .pubprof-sidesns__item.instagram {
    margin: 0 13px;
    padding-left: 1.375rem;
    background: url("/images/client/icon_instagram_off.png") no-repeat left center/14px auto; }
    .pubprof-sidesns__item.instagram.on {
      background-image: url("/images/client/icon_instagram_on.png");
      color: #56b8b8;
      text-decoration: underline; }
  .pubprof-sidesns__item.youtube {
    margin: 0 13px;
    padding-left: 1.375rem;
    background: url("/images/client/icon_youtube_off.png") no-repeat left center/14px auto; }
    .pubprof-sidesns__item.youtube.on {
      background-image: url("/images/client/icon_youtube_on.png");
      color: #56b8b8;
      text-decoration: underline; }
  .pubprof-sidesns__item.tiktok {
    margin: 0 13px;
    padding-left: 1.375rem;
    background: url("/images/client/icon_tiktok_off.png") no-repeat left center/14px auto; }
    .pubprof-sidesns__item.tiktok.on {
      background-image: url("/images/client/icon_tiktok_on.png");
      color: #56b8b8;
      text-decoration: underline; }
  .pubprof-sidesns__item.blog {
    margin: 0 13px;
    padding-left: 1.375rem;
    background: url("/images/client/icon_rss_off.png") no-repeat left center/14px auto; }
    .pubprof-sidesns__item.blog.on {
      background-image: url("/images/client/icon_rss_on.png");
      color: #56b8b8;
      text-decoration: underline; }

.pubprof-sidebtn {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: center; }
  .pubprof-sidebtn__production_logo {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin: 1rem 0 0; }
    .pubproof-sidebtn__production_logo__image {
      max-width: 94px;
      max-height: 60px;
      margin-right: 8px; }
    .pubproof-sidebtn__production_logo__link {
      font-size: 12px;
      color: #51b8b9; }

.pubprof-fa {
  display: flex;
  justify-content: center; }
  .pubprof-fav__flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative; }
  .pubprof-fav__btn {
    width: 38px;
    height: 38px;
    background-color: #e6e9ee;
    color: #858b94;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 50%; }
    .pubprof-fav__btn:hover {
      color: #858b94; }
    .pubprof-fav__btn.active {
      background-color: #56b8b8;
      border: 1px solid #56b8b8;
      color: #fff; }
    .pubprof-fav__btn.done {
      background-color: #56b8b8;
      border: 1px solid #56b8b8;
      color: #fff; }
    .pubprof-fav__btn__tips {
      width: 240px;
      margin-bottom: 5px;
      padding: 0.875rem 0.3rem;
      background-color: rgba(72, 72, 90, 0.8);
      color: #fff;
      display: block;
      font-size: 0.8rem;
      opacity: 0;
      position: absolute;
      bottom: 100%;
      pointer-events: none;
      transition-property: opacity, pointer-events;
      transition-duration: 0.4s;
      z-index: 100;
      text-align: center; }
      .pubprof-fav__btn__tips::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 10px;
        border-top: 5px solid rgba(72, 72, 90, 0.8);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        transform: translateX(-50%); }
    .pubprof-fav__flex:hover .pubprof-fav__btn__tips {
      opacity: 1;
      pointer-events: unset; }
    .pubprof-fav__text {
      color: #51b8b9;
      font-weight: bold;
      display: block;
      margin-left: .875rem; }
      .pubprof-fav__text:link,
      .pubprof-fav__text:visited,
      .pubprof-fav__text:hover,
      .pubprof-fav__text:active {
        color: #51b8b9; }

.pubprof-sideprof {
  padding: 1rem 0.8rem;
  border: 1px solid #dedede;
  color: #48485a;
  font-size: 0.875rem; }
  .pubprof-sideprof__item {
    display: flex;
    align-items: center; }
    .pubprof-sideprof__item + .pubprof-sideprof__item {
      margin-top: 0.5rem; }
  .pubprof-sideprof__th {
    width: 50%;
    padding-right: 1rem;
    font-weight: bold; }
  .pubprof-sideprof__td {
    width: 50%; }

.pubprof-share {
  margin: 0; }
  .pubprof-share img {
    width: 186px;
    margin: 0.875rem auto 0;
    display: block; }
  .pubprof-share__list {
    display: flex;
    justify-content: center; }
    .pubprof-share__list__item {
      height: 20px;
      list-style: none;
      margin-right: 4px; }
  .pubprof-share__share {
    padding: 0 15px 0 30px;
    background: url("/images/client/icon_share_blue_black.png") no-repeat left 9px center/12px auto;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.75rem;
    text-align: center; }
    .pubprof-share__share:hover {
      color: inherit;
      text-decoration: none; }

@media screen and (min-width: 769px) {
  .sp {display: none !important; }

}

@media screen and (max-width: 768px) {
  .pc {display: none !important; }

  .area-pubprof-side {
    width: 300px; }
    .area-pubprof-side__inner {
      position: relative; }

  .pubprof-sidebox {
    padding: 0 1rem 1.5rem; }
    .pubprof-sidebox__header {
      height: 200px;
      margin: 0 -1rem -100px;
      overflow: hidden;
      position: relative; }
      .pubprof-sidebox__header__bg {
        filter: blur(4px);
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -4px;
        right: -4px; }
    .pubprof-sidebox__icon {
      width: 200px;
      height: 200px; }

  .pubprof-sidebtn {
    margin: 1.5rem 0;
    flex-wrap: wrap; }
    .pubprof-sidebtn__fav {
      width: calc((100% - .75rem) / 2);
      border-radius: 4px;
      font-size: 0.8rem;
      background-color: #e6e9ee;
      color: #858b94;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .pubprof-sidebtn__fav.active {
        background-color: #fff;
        color: #56b8b8;
        border: 1px solid #56b8b8; }
    .pubprof-sidebtn__share {
      width: calc((100% - .75rem) / 2);
      height: 44px;
      border: 2px solid #ddd;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.8rem; }
      .pubprof-sidebtn__share span {
        padding-left: 1.25rem;
        background: url("/images/client/icon_share_blue_black.png") no-repeat left center/0.875rem auto;
        display: inline-block; }
    .pubprof-sidebtn__production_logo {
      margin: 0 0 2rem 0; }

  .fa-bookmark{
    margin-right: 5px; }

}