@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*------------------------
PC用メニュー
------------------------*/

#navi {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (max-width: 800px) {
  #navi {
    padding-top: 0;
    padding-bottom: 0;
  }
  #navi .navi-in .menu-header,
  #navi .navi-in .menu-header-sub  {
      display: none;
  }
}

.navi-in .menu-header,
.navi-in .menu-header-sub {
  display: flex;
}

@media screen and (min-width: 801px) and (max-width: 1023px) {
  .navi-in .menu-header {
      display: flex; /* 打ち消し */
  }
}

.navi-in .menu-header-sub {
  margin-top: 15px;
  /* 切り替え */
  /*background-color: #FFF7F5;
  width: min(84%, 740px);
  margin-left: auto;
  margin-right: auto;
  padding: 5px 0;
  border-radius: 20px;*/
}

.navi-in > ul li {
  line-height: 1;
  height: auto;
}

#navi .navi-in>ul>li>a {
  padding: 0;
}

#navi .navi-in>ul>li>a:hover {
  opacity: .6;
}

#navi .navi-in>ul>li {
  border-right: 1px solid #ddd;
  border-color: #FFD2C6;
}

#navi .navi-in>ul.menu-header-sub>li {
  /* 切り替え */
  border-color: #ccc;
}

#navi .navi-in>ul>li:last-child {
  border-right: none;
}

#navi .caption-wrap .item-label {
  text-decoration: none;
  padding-left: 25px;
  padding-right: 25px;
  line-height: 1;
  color: #E86A47;
  font-size: min(15px, calc(10vw / 6));
}

#navi .menu-header-sub .caption-wrap .item-label {
  /* 切り替え */
  color: #5a5a5a;
  font-size: min(12px, calc(10vw / 8));
}

#drawer:checked ~ .header-menu-sp {
	transform: none;
}

@media screen and (min-width: 801px) {
  .header-menu-sp {
    display: none;
  }
}

/*------------------------
モバイル用メニュー
------------------------*/

.header-menu-sp ul {
  list-style: none;
  padding-left: 0;
  margin-top: 25px;
  padding-bottom: 25px;
  /*border-bottom: solid 1px #bbb;*/
}

.header-menu-sp ul li {
  margin-bottom: 5px;
}

.header-menu-sp ul li:last-child {
  margin-bottom: 0;
}

.header-menu-sp ul li a {
  display: flex;
  align-items: center;
  position: relative;
  display: block;
  line-height: 1;
  padding: 10px 0 10px 30px;
  font-size: 20px;
}

.header-menu-sp ul li a,
.header-menu-sp ul li a:hover {
  text-decoration: none;
  color: #5a5a5a;
}

.header-menu-sp ul li a::before {
  position: absolute;
  content: "";
  left: 0;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.header-menu-sp ul li:first-child a::before {
  background-image: url("./assets/img/ic-home.png");
}

.header-menu-sp ul li:nth-child(2) a::before {
  background-image: url("./assets/img/ic-talk.png");
}

.header-menu-sp ul li:nth-child(3) a::before {
  background-image: url("./assets/img/ic-blog.png");
}

.header-menu-sp ul li:nth-child(4) a::before {
  background-image: url("./assets/img/ic-video.png");
}

.header-menu-sp ul li:nth-child(5) a::before,
.header-menu-sp ul li:nth-child(6) a::before,
.header-menu-sp ul li:nth-child(7) a::before,
.header-menu-sp ul li:nth-child(8) a::before,
.header-menu-sp ul li:nth-child(9) a::before {
  background-image: url("./assets/img/ic-special.png");
}

.header-menu-sp ul li:nth-child(10) a::before {
  background-image: url("./assets/img/ic-users.png");
}

.header-menu-sp ul li:nth-child(11) a::before {
  background-image: url("./assets/img/ic-profile.png");
}

.mobile-footer-menu-buttons .navi-menu-button {
  display: none;
}

/*------------------------
パンくずリスト
------------------------*/
.breadcrumb,
.breadcrumb a {
  color: #5a5a5a;
}

.breadcrumb > div > .fa {
  display: none;
}

.breadcrumb > div > .fa + a {
  position: relative;
}

.breadcrumb > div > .fa-home + a,
.breadcrumb > div > .fa-folder + a {
  padding-left: 1.2em;
}

.breadcrumb > div > .fa-home + a::before,
.breadcrumb > div > .fa-folder + a::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.breadcrumb > div > .fa-home + a::before {
  background-image: url("./assets/img/ic-home.png");
}

.breadcrumb > div > .fa-folder + a::before {
  background-image: url("./assets/img/ic-blog.png");
}

/*------------------------
記事ページ
------------------------*/

/* SP時の見出しの不要なパディングを削除 */
@media screen and (max-width: 480px) {
  .entry-title, .article h2 {
    padding: 0.6em 0;
  }
}

/* 投稿日のカスタム表示 */
.custom-date .post-date .entry-date {
  margin-left: 0;
  color: #5a5a5a;
}

.custom-date .post-date .fa {
  display: none;
}

/*------------------------
アーカイブページ
------------------------*/
.archive .archive-title > .fa {
  display: none;
}

/*------------------------
固定ページの見出しにアイコンを追加（モバイルのみ）
------------------------*/
@media screen and (max-width: 800px) {
  .entry-title.entry-title--default-list,
  .page-id-202 .entry-title,
  .post-619 .entry-title,
  .post-622 .entry-title,
  .post-1800 .entry-title,
  .post-413 .entry-title,
  .post-305 .entry-title,
  .post-2293 .entry-title,
  .post-2298 .entry-title,
  .post-2699 .entry-title {
    position: relative;
    padding-left: 1.2em;
  }
  
  .entry-title.entry-title--default-list::before,
  .page-id-202 .entry-title::before,
  .page-id-619 .entry-title::before,
  .page-id-622 .entry-title::before,
  .page-id-1800 .entry-title::before,
  .page-id-413 .entry-title::before,
  .page-id-305 .entry-title::before,
  .page-id-2293 .entry-title::before,
  .page-id-2298 .entry-title::before,
  .page-id-2699 .entry-title::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .entry-title.entry-title--default-list::before {
    background-image: url("./assets/img/ic-blog.png");
  }

  .page-id-202 .entry-title::before {
    background-image: url("./assets/img/ic-talk.png");
  }

  .page-id-305 .entry-title::before {
    background-image: url("./assets/img/ic-blog.png");
  }
  
  .page-id-619 .entry-title::before {
    background-image: url("./assets/img/ic-video.png");
  }

  .page-id-622 .entry-title::before,
  .page-id-1800 .entry-title::before,
  .page-id-2293 .entry-title::before,
  .page-id-2298 .entry-title::before,
  .page-id-2699 .entry-title::before
  {
    background-image: url("./assets/img/ic-special.png");
  }

  .page-id-413 .entry-title::before {
    background-image: url("./assets/img/ic-users.png");
  }
}

/*------------------------
動画ページのカラム
------------------------*/
.page .custom-video-list .wp-block-group__inner-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -30px;
}

.page .custom-video-list .wp-block-group__inner-container figure {
  width: calc((100% - 20px) / 2);
}

/* PCで3列 */
@media screen and (min-width: 801px) {
  .page .custom-video-list .wp-block-group__inner-container figure {
    width: calc((100% - 40px) / 3);
  }
}

@media screen and (max-width: 480px) {
  .page .custom-video-list .wp-block-group__inner-container {
    margin-top: -40px;
  }
}

/*------------------------
固定ページの投稿日非表示
------------------------*/
.page .custom-date {
  display: none;
}

/*------------------------
記事コメントのカスタマイズ
------------------------*/
/* 各コメント間の間隔 */
.comment-area .article.my-st-comment-body {
  margin-bottom: 60px;
}

/* 返信のインデント */
.comment-area .my-st-comment-body.commets-list .children {
  padding-left: 30px;
}
@media only screen and (min-width: 800px) {
  .comment-area .commets-list .children {
    padding-left: 100px;
  }
}

/* アバター領域の円形化 */
.comment-area .commets-list .avatar {
  float: none;
  border-radius: 50%;
}

/* アバターとコメント領域の横並び */
.comment-area .commets-list .my-st-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.comment-area .commets-list .my-st-meta-list li {
  margin: 0;
  padding: 0;
}

/* 各横並び要素のサイズ */
.comment-area .commets-list .my-st-li-avatar {
  width: 48px;
}
.comment-area .commets-list .my-st-li-contents {
  position: relative;
  width: calc(100% - 48px - 20px);
}

/* 返信ボタンの調整 */
.comment-area .commets-list .my-st-li-contents .reply {
  position: absolute;
  bottom: 7px;
  right: 62px;
}
.comment-area .commets-list .my-st-li-contents .reply .comment-reply-link {
  padding-top: 12px;
  padding-bottom: 12px;
  border-color: #bdbdbd;
  border-radius: 0.25em;
}

/* メタ情報領域の調整 */
.comment-area .commets-list .my-st-contents-meta {
  display: flex;
  justify-content: space-between;
}
.comment-area .commets-list .my-st-contents-meta .st-comment-datetime,
.comment-area .commets-list .my-st-contents-meta .comment-edit-link {
  font-size: 12px;
  margin: 0;
}

/* コメント領域の調整 */
.comment-area .commets-list .my-st-contents-comment {
  margin-top: 10px;
}
.comment-area .commets-list .my-st-contents-comment > p {
  background-color: #eee;
  padding: 1px 20px 20px;
  margin-top: -1px; /* 重なりを自然に */
  margin-bottom: 0px;
}

.comment-area .commets-list .my-st-contents-comment > p:first-of-type {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-top: 20px;
  margin-top: 0;
}

.comment-area .commets-list .my-st-contents-comment > p:last-of-type {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* いいねボタン（ハート）の調整 */
.comment-area .commets-list .my-st-contents-comment .wpulike-heart {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0;
}

/* 返信罫線 */
.comment-area .wpulike-heart::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 10px + 50px);
  background-color: #555;
  left: 30px; /* 返信の名前に揃える */
  top: 10px;
}
@media only screen and (min-width: 800px) {
  .comment-area .wpulike-heart::before {
    left: calc(32px + 24px); /* 返信のアバターに揃える */
  }
}

/* コメントがない場合は線を非表示 */
.comment-area .my-st-no-reply .wpulike-heart::before {
  display: none;
}

/* いいねボタン押下者のアバターを非表示 */
.comment-area .commets-list .my-st-contents-comment .wp_ulike_likers_wrapper {
    display: none;
}


/*------------------------
メンバー一覧ページのカスタマイズ
------------------------*/
/* 固定ページのリストスタイルを部分的にリセット */
.article .member-display-list,
.article .member-display-list ul,
.article .member-display-list li {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
.member-display-list img {
  max-width: none;
}
.article .member-display-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -20px; /* itemに20pxあるので、20px分になる */
  align-items: stretch;
}
.article .member-display-list .member-display-item {
  width: calc((100% - 7.5px) / 2);   /* スマホ：2列 */
  margin-right: 7.5px;
  margin-top: 20px;
}
.article .member-display-list .member-display-item:nth-child(2n) {
  margin-right: 0;
}
@media only screen and (min-width: 576px) {
  .article .member-display-list .member-display-item {
    width: calc((100% - 15px) / 3);  /* 576px〜：3列 */
    margin-top: 30px;
  }
  .article .member-display-list .member-display-item:nth-child(2n) {
    margin-right: 7.5px;             /* 2列用の指定を打ち消し */
  }
  .article .member-display-list .member-display-item:nth-child(3n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 801px) {
  .article .member-display-list .member-display-item {
    width: calc((100% - 30px) / 4);  /* 801px〜：4列 */
    margin-right: 10px;
    margin-top: 30px;
  }
  .article .member-display-list .member-display-item:nth-child(2n) {
    margin-right: 10px;              /* 打ち消し */
  }
  .article .member-display-list .member-display-item:nth-child(3n) {
    margin-right: 10px;              /* 打ち消し */
  }
  .article .member-display-list .member-display-item:nth-child(4n) {
    margin-right: 0;
  }
}

.member-display-item .member-display-item__pic {
  position: relative;
  width: 100%;
  height: auto;
}
/* padding hack */
.member-display-item .member-display-item__pic::before {
  display: block;
  content: "";
  padding-right: 100%;
  padding-top: calc(100% - 15px);
}
.member-display-item .member-display-item__pic img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: calc(100% - 15px);
  height: 100%;
  -webkit-transform: translateX(-50%); /* Safari用 */
  transform: translateX(-50%);
  border-radius: 50%;
  border: solid 2px #eee;
  overflow: hidden;
  object-fit: cover;
  box-sizing: border-box;
}
@media only screen and (min-width: 801px) {
  .member-display-item .member-display-item__pic::before {
    padding-top: calc(100% - 20px);
  }
  .member-display-item .member-display-item__pic img {
    width: calc(100% - 20px);
  }
}
.member-display-item .member-display-item__no,
.member-display-item .member-display-item__name {
  position: relative;
  text-align: center;
  line-height: 1;
  z-index: 1;
}
.member-display-item .member-display-item__no {
  font-size: 13px;
  margin-top: 10px;
}
.member-display-item .member-display-item__no span {
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.member-display-item .member-display-item__no::before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #eee;
  left: 0;
  top: 50%;
  margin-top: -1px;
  z-index: -1;
}
.member-display-item .member-display-item__name {
  margin-top: 10px;
  font-size: 12px;
}
.member-display-item .member-display-item__name span {
  font-size: 10px;
}
@media only screen and (min-width: 801px) {
  .member-display-item .member-display-item__name {
    font-size: 14px;
  }
  .member-display-item .member-display-item__name span {
    font-size: 12px;
  }
}
/* SNSボタンリスト */
.article .member-display-list .member-display-item__links {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.article .member-display-list .member-display-item__links li {
  width: 100%;
  margin-top: 5px;
}
.member-display-item__links li > a,
.member-display-item__links li > span {
  display: block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  padding: .6em 0;
  text-align: center;
  background-color: #D9D9D9; /* デフォルトは灰色 */
  border-radius: .3em;
  text-decoration: none;
  box-shadow: 1px 1px 2px 1px rgba(20, 20, 20, 0.15);
}
@media only screen and (min-width: 801px) {
  .article .member-display-list .member-display-item__links {
    flex-direction: row;
    justify-content: space-between;
  }
  .article .member-display-list .member-display-item__links li {
    width: calc((100% - 5px) / 2);
  }
  .member-display-item__links li > a,
  .member-display-item__links li > span {
    padding: .4em 0;
  }
}
.member-display-item__links .member-display-item__fb > a {
  background-color: #5890FF;
}
.member-display-item__links .member-display-item__ig > a {
  background-color: #CF2E92;
}
.member-display-item__links .member-display-item__tw > a {
  background-color: #1DA1F2;
}
.member-display-item__links .member-display-item__yt > a {
  background-color: #DA1725;
}
/* 会員カード化 */
.article .member-display-list .member-display-item {
  border: 1px solid #e3e3e3;   /* 薄い灰色ボーダー */
  border-radius: 8px;
  background-color: #fff;
  padding: 8px;                 /* SPは控えめ */
}
@media only screen and (min-width: 801px) {
  .article .member-display-list .member-display-item {
    padding: 14px;              /* PCはゆとりを持たせる */
  }
}
/* メダル（バッジ）一覧 */
.member-display-item__medals {
  margin-top: 10px;
}
.article .member-display-list .member-display-item__medal-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列 → 10種で2行 */
  gap: 4px;
}
.member-display-item__medal img {
  display: block;
  width: 100%;
  height: auto;
  border: none;       /* 枠線を消す */
  border-radius: 0;   /* 角丸を打ち消す */
  box-shadow: none;   /* 影を打ち消す */
}
/* 未獲得（グレースケール）のメダルは薄く表示 */
.member-display-item__medal:not(.is-active) img {
  opacity: .5;
}
/* メダルのツールチップ */
.member-display-item__medal {
  position: relative;
  cursor: pointer;
}
.member-display-item__medal-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: 180px;
  padding: 8px 10px;
  background-color: rgba(40, 40, 40, .92);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  text-align: left;
  display: none;        /* 通常は非表示（レイアウトから除外しはみ出しを防ぐ） */
  pointer-events: none;
}
/* 吹き出しの三角 */
.member-display-item__medal-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  /* 本体の画面内補正分（--tip-shift）を打ち消し、常にメダルを指す */
  transform: translateX(calc(-50% - var(--tip-shift, 0px)));
  border: 6px solid transparent;
  border-top-color: rgba(40, 40, 40, .92);
}
/* 開いている状態 */
.member-display-item__medal.is-open .member-display-item__medal-tip {
  display: block;
}
.member-display-item__medal-tip-title {
  display: block;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 3px;
}
.member-display-item__medal-tip-desc {
  display: block;
  font-size: 10px;
  line-height: 1.5;
}
/* 端のメダルははみ出しやすいため位置を調整 */
.member-display-item__medal-list .member-display-item__medal:nth-child(5n+1) .member-display-item__medal-tip {
  left: 0;
  transform: none;
}
.member-display-item__medal-list .member-display-item__medal:nth-child(5n+1) .member-display-item__medal-tip::after {
  left: 20px;
}
.member-display-item__medal-list .member-display-item__medal:nth-child(5n) .member-display-item__medal-tip {
  left: auto;
  right: 0;
  transform: none;
}
.member-display-item__medal-list .member-display-item__medal:nth-child(5n) .member-display-item__medal-tip::after {
  left: auto;
  right: 20px;
  transform: none;
}
.member-display-item__owner-message {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}
/* 追加本文がある場合、一覧との間隔を設定 */
.member-additional-contents {
  margin-top: 30px;
}

/*------------------------
投稿ページ内タグのカスタマイズ
------------------------*/
.article.post .entry-tags .tag-link {
  color: #E86A47;
  border-color: #F8CBBF;
}
.article.post .entry-tags .tag-link:hover {
  opacity: .6;
  background-color: #fff;
}

/*------------------------
サイドバー内ウィジェット見出しのカスタマイズ
------------------------*/
.sidebar .widget-sidebar .widget-sidebar-title {
  position: relative;
  background-color: #E86A47;
  text-align: center;
}
/* pcのサイドバーウィジェットのみ */
.sidebar:not(#slide-in-sidebar) .widget-sidebar .widget-sidebar-title:first-of-type {
  margin-top: 0;
}
/* 吹き出し三角形 */
.sidebar .widget-sidebar .widget-sidebar-title::after {
  position: absolute;
  content: "";
  display: block;
  border-top: solid 10px #E86A47;
  border-right: solid 14px transparent;
  border-bottom: solid 10px transparent;
  border-left: solid 14px transparent;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
}
/* bbpのウィジェットのパディングが詰まっているので改善 */
.sidebar:not(#slide-in-sidebar) .bbp-topics-widget,
.sidebar:not(#slide-in-sidebar) .bbp-replies-widget {
  padding: 0 15px 10px 30px;
}

/*------------------------
文字選択色
------------------------*/

::-moz-selection {
  background-color: #feded5;
}
::selection {
  background-color: #feded5;
}

/*------------------------
フォーラムページのカスタマイズ
------------------------*/

#post-202 .read-time {
  display: none;
}

.bbpress .breadcrumb {
  display: none;
}

#bbpress-forums .bbp-topic-form fieldset.bbp-form {
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

#bbpress-forums .bbp-topic-form fieldset.bbp-form legend {
  display: none;
}

#bbpress-forums fieldset.bbp-form .form-allowed-tags {
  display: none;
}

div.bbp-template-notice:not(.error), div.indicator-hint {
  display: none;
  background-color: #feded5;
  border-color: #E86A47;
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
  max-height: 250px;
  font-size: 18px;
  border-radius: 4px;
}

#bbpress-forums fieldset.bbp-form .bbp-form-anonymous {
  padding-bottom: 0px;
  margin-bottom: 0px;
}
/* コメントフォーム */
#bbpress-forums .bbp-reply-form fieldset.bbp-form .bbp-form-anonymous {
  padding-bottom: 0;
  margin-bottom: 16px;
}

#bbpress-forums fieldset.bbp-form .bbp-form-anonymous .bbp-form-column p {
  margin-bottom: 8px;
}

@media only screen and (min-width: 801px) {
  #bbpress-forums fieldset.bbp-form .bbp-form-anonymous {
    padding-bottom: 0;
    margin-bottom: 8px;
  }
  /* コメントフォーム */
  #bbpress-forums .bbp-reply-form fieldset.bbp-form .bbp-form-anonymous {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  #bbpress-forums fieldset.bbp-form .bbp-form-anonymous .bbp-form-column {
    display: flex;
    justify-content: space-between;
  }
  #bbpress-forums fieldset.bbp-form .bbp-form-anonymous .bbp-form-column p {
    width: calc(50% - 5px);
  }
  #bbpress-forums fieldset.bbp-form .bbp-form-anonymous .bbp-form-column p input {
    margin: 0;
  }
}

/*#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
  font-size: 18px;
}*/

div#bbpress-forums fieldset.bbp-form #bbp_stick_topic_select,
div#bbpress-forums fieldset.bbp-form #bbp_topic_status_select {
  display: none;
}

/* 画像添付 */
#bbpress-forums fieldset.bbp-form .bbp-attachments-form label {
  display: none;
  content: "添付画像";
}
#bbpress-forums fieldset.bbp-form .bbp-attachments-form br:first-of-type {
  display: none;
}

#bbpress-forums fieldset.bbp-form .bbp-attachments-form input::-webkit-file-upload-button {
  background-color: #feded5;
  border: solid 1px #E86A47 !important;
  color: #E86A47;
  border: 0;
  border-radius: 4px;
  padding: .3em .6em;
  margin-right: 10px;
  cursor: pointer;
}

div.bbp-submit-wrapper {
  margin-top: 5px;
}

/* 送信ボタン */
div#bbpress-forums #bbp_topic_submit,
#bbp_reply_submit {
  background-color: #E86A47;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 34px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  div#bbpress-forums #bbp_topic_submit,
  #bbp_reply_submit {
    font-size: 12px;
  }
}

div#bbpress-forums #bbp_topic_submit:hover {
  opacity: .6;
  transition: .5s;
}

@media only screen and (min-width: 801px) {
  div#bbpress-forums #bbp_topic_submit {
    min-width: 200px;
  }
}

article.post-202 .bbp-submit-wrapper {
  /* ボタンの位置を少し上へ */
  margin-top: -10px;
}

@media only screen and (max-width: 480px) {
  /* SPで左へfloatするのを防止 */
  div.bbp-submit-wrapper {
      float: right;
  }
}

.article.post-202 #bbpress-forums.bbpress-wrapper .bbp-topics {
  padding-top: 20px;
}

@media only screen and (max-width: 800px) {
  .article.post-202 .bbp-topic-form {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: dashed 1px #ccc;
  }
  .article.post-202 #bbpress-forums.bbpress-wrapper .bbp-topics {
    padding-top: 20px;
  }
}


/* ページネーション */
.bbp-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-top: -10px;
}
.bbp-pagination-links > * {
  margin-top: 10px;
}
.bbp-pagination-count {
  font-size: 12px;
  line-height: 1.6;
}
.bbp-pagination > * + * {
  margin-top: 20px;
}
@media only screen and (min-width: 801px) {
  .bbp-pagination {
    display: flex;
    flex-direction: row;
  }
  .bbp-pagination-count {
    font-size: 14px;
  }
  .bbp-pagination > * + * {
    margin-top: 0
  }
}
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* トピック一覧 */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
  display: none;
}
#bbpress-forums ul.bbp-topics {
  border: 0;
}
#bbpress-forums .bbp-topics li.bbp-body ul.topic {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  margin-top: 20px;
}
#bbpress-forums .bbp-topics li.bbp-body ul.topic:first-child {
  margin-top: 0;
}

li.bbp-topic-title {
  position: relative;
  width: 70%;
  padding-left: 65px;
}
li.bbp-topic-title::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 50%;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  background-color: #E86A47;
  border-radius: 5px;
}
li.bbp-topic-freshness {
  width: 30%;
  height: 100%;
}
#bbpress-forums p.bbp-topic-meta {
  margin-top: 0;
  margin-bottom: 0;
}
#bbpress-forums p.bbp-topic-meta .bbp-topic-started-in {
  display: none;
}
div#bbpress-forums a.bbp-topic-permalink {
  position: relative;
  display: block;
  padding-top: .3em;
  padding-bottom: .3em;
  font-size: 14px;
  line-height: 1.6;
}
div#bbpress-forums a.bbp-topic-permalink::before {
  display: none;
}
#bbpress-forums .bbp-attachments-count {
  margin-top: .6em;
}
@media only screen and (min-width: 801px) {
  div#bbpress-forums a.bbp-topic-permalink {
    font-size: 16px;
  }
  #bbpress-forums .bbp-attachments-count {
    margin-top: .8em;
  }
}

@media only screen and (min-width: 801px) {
  .sp-only {
    display: none;
  }
}

/* トピックページ */
.article.topic .entry-header {
  display: none;
}
.article.topic #bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log {
  /* 変更履歴非表示 */
  display: none;
}
.custom-topic-header {
  position: relative;
  border-bottom: solid 1px #5a5a5a;
  padding-left: 75px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.custom-topic-header .post-date {
  display: block;
  margin: 0;
  font-size: 12px;
  padding: 0;
}
.custom-topic-header .entry-title {
  margin: 0;
  margin-top: 3px;
  padding: 0;
}
.custom-topic-header::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background-color: #E86A47;
  border-radius: 5px;
}

@media only screen and (max-width: 480px) {
  .article.topic .custom-single-reply .bbp-reply-author {

  }
  #bbpress-forums .custom-single-reply div.bbp-reply-author .bbp-author-name {
    margin: 0;
  }
  #bbpress-forums .custom-single-reply div.bbp-reply-author {
    margin: 0;
    margin-bottom: 10px;
    border-bottom: 0;
  }
}

@media only screen and (max-width: 800px) {
  /* 左寄せ */
  .article.topic #bbpress-forums  .bbp-pagination {
    align-items: flex-start;
  }
}


.article.topic .bbp-replies .bbp-body > ul > li {
  margin-bottom: 30px !important;
  padding-bottom: 30px;
  border-bottom: solid 1px #ccc;
}

#bbpress-forums ul.bbp-replies {
  border: 0;
}

#bbpress-forums ul.bbp-replies .wpulike {
  display: none;
}

/* 添付画像を横並びに */
#bbpress-forums .custom-single-reply div.hentry {
  padding: 0;
}
#bbpress-forums .custom-single-reply .bbp-attachments {
  margin-top: 0;
  border: 0;
}
#bbpress-forums .custom-single-reply .bbp-attachments h6 {
  display: none;
}
#bbpress-forums .custom-single-reply .bbp-attachments ol {
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px !important;
  margin-left: -8px !important;
}
#bbpress-forums .custom-single-reply .bbp-attachments li {
  margin: 8px 0 0 8px !important;
}
#bbpress-forums .custom-single-reply .bbp-attachments li:last-child {
  margin: 8px 0 0 8px !important;
}

/* ヘッダー（下部に移動しているので実質footer） */
.article.topic #bbpress-forums div.bbp-reply-header {
  border: 0;
  background-color: transparent;
}

/* 返信ボタン非表示 */
.bbp-admin-links .bbp-reply-to-link,
.bbp-admin-links .bbp-topic-reply-link {
  display: none;
}
.article.topic .bbp-meta {
  text-align: right;
}
.article.topic .bbp-meta .bbp-reply-post-date {
  font-size: 10px;
  margin-right: 20px;
}

/* 人気 */
.custom-bbp-popular-topics {
  margin-top: 30px;
}
.custom-bbp-popular-topics .bbp-breadcrumb,
.custom-bbp-popular-topics .bbp-pagination
 {
  display: none;
}

.custom-bbp-popular-topics .popular-topics-ttl {
  padding: 0;
  background-color: transparent;
  border: 0;
}

/* 人気トピックは5件までの表示とする */
#bbpress-forums .custom-bbp-popular-topics .bbp-topics .bbp-body ul:nth-child(5) ~ ul {
  display: none;
}

/* 編集ページパンくず */
.topic-edit #bbpress-forums .bbp-breadcrumb {
  display: none;
}

/*------------------------
記事一覧
------------------------*/

.article .my-article-list {
  list-style: none;
  padding: 0;
}

.my-article-list .my-article-list__item {
  margin-top: 20px;
}

.my-article-item__link {
  display: flex;
  justify-content: space-between;
  transition: .5s;
  color: #5a5a5a;
  text-decoration: none;
}

.my-article-item__link:hover {
  color: #5a5a5a;
  text-decoration: none;
}

.my-article-item__img-wrap {
  /* paddingハック */
  position: relative;
  width: 36%;
  padding-top: 26%;
}

.my-article-item__img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
}

.my-article-item__contents {
  position: relative;
  width: calc(100% - 36% - 20px);
}

.my-article-item__contents .my-article-item__ttl {
  /* 記事の見出しスタイル打ち消し */
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: 3.8vw;
  margin-bottom: 1em;
  line-height: 1.6;
}

.my-article-item__desc {
  display: none;
}

.my-article-item__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 10px;
}

.my-article-item__meta > * {
  padding: 0 10px;
  line-height: 1;
  border-left: solid 1px #ccc;
}
.my-article-item__meta > *:first-child {
  border: 0;
}

@media screen and (min-width: 480px){
  .my-article-item__contents .my-article-item__ttl {
    font-size: 3vw;
    margin-bottom: .5em;
  }
  .my-article-item__img-wrap {
    /* 画像の縦幅 */
    padding-top: 28%;
  }
  .my-article-item__desc {
    display: block;
    font-size: 13px;
  }
  .my-article-item__meta {
    font-size: 13px;
  }
}

@media only screen and (min-width: 801px) {
  .article .my-article-list {
    /* ホバー時の領域（パディング）を考慮 */
    margin-top: -10px;
  }
  .my-article-item__link {
    /* ホバー時の領域（パディング）を考慮 */
    width: calc(100% + 20px);
    padding: 10px;
    margin-left: -10px;
  }
  .my-article-list .my-article-list__item {
    margin-top: 20px;
  }
  .my-article-item__link:hover {
    opacity: .8;
    background-color: #f5f8fa;
  }
  .my-article-item__img-wrap {
    /* 画像の縦幅 */
    padding-top: 24%;
  }
  .my-article-item__contents .my-article-item__ttl {
    font-size: 20px;
    margin-bottom: 1em;
  }
  .my-article-item__desc {
    display: block;
    font-size: 14px;
  }
}

/*------------------------
コメントへの画像添付
------------------------*/

#comment-image-reloaded-wrapper {
  margin-top: 20px;
}

#comment-image-reloaded-wrapper input::-webkit-file-upload-button {
  background-color: #feded5;
  border: solid 1px #E86A47 !important;
  color: #E86A47;
  border: 0;
  border-radius: 4px;
  padding: .3em .6em;
  margin-right: 10px;
  cursor: pointer;
}

#comment-image-reloaded-wrapper .comment-image-reloaded {
  margin-top: 10px;
}

.comment-image-box {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.comment-image-box > * {
  width: calc((100% - 20px) / 3);
  margin-left: 10px;
  margin-top: 10px;
}

.comment-image-box .comment-image-reloaded {
  margin-bottom: 0;
}

.comment-image-box .comment-image-reloaded .cir-image-link {
  display: block;
}

.comment-image-box img {
  border: solid 1px #ccc;
  width: 100%;
  height: auto;
}

#comment-image-reloaded-wrapper + .form-submit {
  margin-top: 30px;
}

/*------------------------
記事内「いいね」の投稿者画像
------------------------*/

.wpulike .wp-ulike-likers-list {
  margin-left: -3px;
}

/*------------------------
記事中の読了時間
------------------------*/
.article .read-time {
  display: none;
}