@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){
  /*必要ならばここにコードを書く*/
}

:root {
  --ink: #111;
  --bg: #fff;
  --cyan: #00B7CE;
  --magenta: #E93CAC;
  --yellow: #FFD900;
}

/* ベース */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}
a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover {
  color: var(--magenta);
}

/* ボタン */
.fl-btn {
  border-radius: 30px;
  padding: 12px 26px;
  border: none;
  font-size: 16px;
  transition: all 0.25s ease;
}
.fl-btn--primary {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  color: #fff;
}
.fl-btn--primary:hover { filter: brightness(1.1); }
.fl-btn--ghost {
  background: #fff;
  border: 2px solid var(--cyan);
  color: var(--cyan);
}
.fl-btn--ghost:hover { background: var(--cyan); color: #fff; }
.fl-btn--line {
  background: none;
  border: 1px solid var(--cyan);
  color: var(--cyan);
}
.fl-btn--line:hover { background: var(--cyan); color: #fff; }
.fl-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ヒーロー */
.fl-hero--chief {
  margin-top: -20px;
  padding: 0 16px 24px;
}
.fl-lead {
  font-size: 18px;
  font-weight: 500;
  color: #222;
  line-height: 1.9;
  max-width: 880px;
  margin: 0 auto 36px;
}
.fl-trust {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}
.fl-trust li { margin-bottom: 4px; }

/* セクション */
.fl-section {
  padding: 40px 16px;
}
.fl-section > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================
   Cocoonのh2装飾を完全オフ（.fl-h2だけ）
   背景/余白/影/既存疑似要素を無効化
============================ */
.entry-content h2.fl-h2,
.article .entry-content h2.fl-h2,
.article h2.fl-h2,
.content h2.fl-h2,
h2.fl-h2{
  background: none !important;
  padding: 0 !important;
  margin: 0 auto 32px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Cocoonが付けている擬似要素を消す（前提リセット） */
.entry-content h2.fl-h2::before,
.article .entry-content h2.fl-h2::before{
  content: none !important;
}

/* ===== ここから “英字と線の間ゼロ” の見出し定義 ===== */
h2.fl-h2{
  position: relative;
  text-align: center;
  color: var(--ink);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .03em;
  width: 80%;
}

h2.fl-h2 .fl-h2__sub{
  display: block;
  font-size: 12px;
  color: #777;
  letter-spacing: .08em;
  line-height: 1;
  margin-top: 4px;      /* 日本語との距離だけ残す */
  margin-bottom: 0;     /* ← 下方向の余白ゼロ */
  text-transform: uppercase;
}

/* 下線：英字の直下。まずはスマホ基準（80%） */
h2.fl-h2::after,
.fl-h2::after{
  content: "";
  display: block;
  width: 80%;              /* ← スマホは常に 80% */
  height: 3px;
  margin: 3px auto 0;      /* 英字との隙間は 3px（2～4で微調整OK） */
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  border-radius: 2px;
}

/* タブレット(768–1023px)で少しだけ伸ばす/縮めるなら任意でここを使う */
@media (min-width: 768px) and (max-width: 1023px){
  h2.fl-h2::after{ width: 75%; }
}

/* PC(1024px～)はバランス重視で短めに */
@media (min-width: 1024px){
  h2.fl-h2::after{ width: 65%; }
}


/* チップ */
.fl-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fl-chip {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e7e7e7;
  background: #fff;
  font-size: 14px;
}
.fl-chip--s { background: #e9f7fb; color: #0b7e8e; }
.fl-chip--t { background: #fde9f3; color: #a7186b; }

/* ノートカード */
.fl-notes {
  display: grid;
  gap: 12px;
  text-align: left;
}
.fl-note {
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.fl-note h3 { margin: 0 0 4px; font-size: 16px; }
.fl-note p { margin: 0; color: #555; font-size: 14px; }

/* ========== 所長カード ========== */

/* ベース（スマホもPCも中央基準） */
.fl-director__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  border: 1px solid #eef1f4;
  border-radius: 16px;
  padding: 32px 24px;
  background: #fff;
  max-width: 800px;
  margin: 0 auto;
}


/* 本文ブロック */
.fl-director__body {
  text-align: center;
  max-width: 640px;
}

/* PCでは横並びだけど中央基準を維持 */
@media (min-width: 1024px) {
  .fl-director__card {
    flex-direction: row;
    align-items: center;
    justify-content: center; /* ← 全体を中央に */
    gap: 32px;
    text-align: left; /* ← 本文だけ左揃え */
  }

  .fl-director__body {
    max-width: 600px;
  }
}


@media (max-width: 767px) {
  .fl-h2 { width: 90%; font-size: 18px; }
  .fl-h2__sub { font-size: 11px; }
}

/* 明朝体バージョン */
.fl-lead--mincho {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #111;
}


/* ============================
   投稿ボタン専用（グラデーションVer）
   ============================ */

/* 右下固定 投稿ボタン */
.fl-fab-post {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); /* ← 統一 */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.fl-fab-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  filter: brightness(1.05);
}

.fl-fab-post:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* モバイル調整（中央寄せ＋幅広） */
@media (max-width: 768px) {
  .fl-fab-post {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0));
    padding: 1rem 0;
    justify-content: center;
    font-size: 1.05rem;
  }
}

/* 投稿モーダル */
.fl-post-modal[hidden] { display: none !important; }
.fl-post-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: "Noto Sans JP", sans-serif;
}
.fl-post-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.fl-post-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 90vw);
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.fl-post-modal__panel h2 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* 投稿モーダル内ボタン（グラデカラー） */
.fl-post-modal__buttons {
  display: grid;
  gap: 0.75rem;
}
.fl-post-btn {
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: linear-gradient(90deg, #00bcd4, #ff4081, #ffeb3b);
  background-size: 200% 100%;
  transition: background-position 0.4s ease;
}
.fl-post-btn:hover {
  background-position: 100% 0;
  filter: brightness(1.05);
}

/* モーダル閉じるボタン */
.fl-post-modal__close {
  position: absolute;
  right: 0.6rem;
  top: 0.4rem;
  font-size: 1.4rem;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
}
/* 固定ページID 123 の日付を非表示 */
.page-id-10 .entry-meta,
.page-id-10 .entry-date,
.page-id-10 .post-date,
.page-id-10 .post-update {
  display: none !important;
}

/* コンテナをカード化 */
#bbpress-forums {
  background:#fff; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:8px 8px; margin:1rem 0;
}

/* 一覧の行強調 */
#bbpress-forums .bbp-header { font-weight:600; }
#bbpress-forums .bbp-body li { border-bottom:1px solid #eee; }

/* 受付中/締切ピル */
.fl-status { display:inline-block; font-size:.78rem; line-height:1; padding:.3rem .5rem; border-radius:999px; margin-right:.4rem; }
.fl-status.open { background:#00BCD4; color:#fff; }   /* C */
.fl-status.closed { background:#FF4081; color:#fff; } /* M */

/* トピ主バッジ */
.fl-op-badge {
  display:inline-block; margin-left:.4rem; font-size:.72rem; font-weight:700;
  background:#FFEB3B; color:#333; border-radius:6px; padding:.15rem .35rem; /* Y */
}

/* これポチ（いいね）ボタンの丸みを合わせる */
.bbp-voting .bbp-vote { border-radius:999px; padding:.4rem .9rem; }

/* モバイル最適化 */
@media (max-width: 768px){
  #bbpress-forums { font-size:0.95rem; }
  .fl-status { font-size:.72rem; }
}

.fl-forum-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem;}
.fl-forum-tab,.fl-forum-all{
  display:inline-block;padding:.4rem .9rem;border:1px solid #ddd;border-radius:999px;background:#fff;
  text-decoration:none;cursor:pointer
}
.fl-forum-tab.active,.fl-forum-all.active{border-color:#00BCD4;box-shadow:0 0 0 2px rgba(0,188,212,.15)}

/* 固定ページの日付を非表示 */
.page .entry-date,
.page .posted-on,
.page .entry-meta-date,
.page time {
    display: none;
}
.page .fa-clock-o {
    display: none !important;
}

.fa-pencil{
    display: none !important;
}
.author-name{
    display: none !important;
}


/***** bbPress 送信ボタン：強制オーバーライド（最終手段） *****/

/* ラッパを全幅にして中央寄せ。右寄せ用の float を完全に無効化 */
#bbpress-forums fieldset.bbp-form .bbp-submit-wrapper,
#bbpress-forums .bbp-submit-wrapper,
.bbp-submit-wrapper {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 24px 0 0 !important;
  clear: both !important;
}

/* 送信ボタン（button でも input[type=submit] でも）を同じ見た目に */
#bbpress-forums .bbp-submit-wrapper input[type="submit"],
#bbpress-forums .bbp-submit-wrapper button[type="submit"],
#bbpress-forums #bbp_topic_submit,
#bbpress-forums #bbp_reply_submit,
form[id^="new-"] .bbp-submit-wrapper input[type="submit"],
form[id^="new-"] .bbp-submit-wrapper button[type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  margin: 0 auto !important;
  padding: 1rem 2rem !important;
  min-width: 13rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  /* CMYグラデ（変数が無い場合のフォールバック付き） */
  background: linear-gradient(90deg, var(--cyan, #00BCD4), var(--magenta, #E91E63)) !important;
  color: #fff !important;

}

#bbpress-forums .bbp-submit-wrapper input[type="submit"]:hover,
#bbpress-forums .bbp-submit-wrapper button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08) !important;
  filter: brightness(1.05) !important;
}

/* Cocoon 側の .alignright / .button.submit などの右寄せを完全無効化 */
#bbpress-forums .bbp-submit-wrapper .button,
#bbpress-forums .bbp-submit-wrapper .submit,
#bbpress-forums .alignright,
#bbpress-forums .submit {
  float: none !important;
  text-align: center !important;
}

/* ===== 送信ボタンの文言を「投稿する」に上書き ===== */
#bbpress-forums .bbp-submit-wrapper input[type="submit"] {
  position: relative !important;
  color: transparent !important; /* 元の「送信」を隠す */
}

#bbpress-forums .bbp-submit-wrapper input[type="submit"]::after {
  content: "投稿する";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff; /* 白文字 */
  font-weight: 700;
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* タグ選択ボタン */
.fl-tagchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 .5rem}
.fl-chip{display:inline-block;padding:.5rem .9rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;cursor:pointer}
.fl-chip.is-active{border-color:transparent;background:linear-gradient(90deg, var(--cyan), var(--magenta));color:#fff}

/* タグチップ */
.fl-tags-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* ← 真ん中寄せ！ */
  gap: .5rem;
  margin: 0 auto .5rem;
  max-width: 1000px;         /* （幅を制限して整える） */
}
.fl-tagchip {
  appearance: none;
  border: 1px solid #ddd;
  background: #f7f7f7;
  color: #333;
  padding: .45rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .92rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.fl-tagchip:active { transform: translateY(1px); }
.fl-tagchip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg,#00bcd4,#d81b60);
}
.fl-tags-note {
  font-size: .85rem;
  color: #666;
  margin: .25rem auto 1rem;
  text-align: center;       /* ← 注意書きも中央 */
}

/* ===== タグ列をど真ん中に ===== */
.fl-tags-wrap{
  text-align: center;              /* 親で中央寄せ */
}

.fl-tags-wrap .fl-tags-grid{
  display: inline-flex;            /* 内容幅＝中身だけ → 中央に収まる */
  flex-wrap: wrap;                 /* 折り返し */
  justify-content: center;         /* 行内も中央 */
  gap: .5rem .6rem;                /* すき間 */
  margin: 0 auto .75rem;
}

/* テーマ干渉対策（Cocoonなどがボタンにmargin設定してる場合） */
.fl-tags-wrap .fl-tagchip{
  margin: 0 !important;            /* 余計な左右マージンを打消し */
  vertical-align: top;
}

/* 注意書きも中央に */
.fl-tags-wrap .fl-tags-note{
  text-align: center;
}

.entry-content .fl-tags-wrap{ text-align: center !important; }

/* ===== タグを絶対まんなかに揃える・強力版 ===== */

/* 外側をフレックス中央寄せ（親の text-align: left を無効化） */
.entry-content .fl-tags-wrap,
.bbp-topic-form .fl-tags-wrap,
.fl-tags-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
  margin: 0 auto;
}

/* 中身もフレックス中央寄せ＋折り返し */
.fl-tags-wrap .fl-tags-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: .5rem .6rem;
  margin: 0 auto .75rem !important; /* 左右オートで中央 */
  max-width: 1000px;                 /* はみ出し防止（調整可） */
}

/* ボタンの余計な左右マージンを打消し、揃えを安定 */
.fl-tags-wrap .fl-tagchip {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  vertical-align: top;
}

/* 注意書きも中央に */
.fl-tags-wrap .fl-tags-note {
  text-align: center !important;
  margin: .25rem auto 1rem;
}


/* ▼ フィルタ（チップ）を中央に固定する上書き */
.fl-topiclist__toolbar{
  display: grid !important;
  grid-template-columns: 1fr;
  row-gap: .75rem;
  justify-items: center;           /* 中央寄せ */
}

.fl-topiclist__filters{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: .5rem .6rem;
  margin: 0 auto;                  /* ど真ん中 */
  width: 100%;
  max-width: 900px;                /* 好みで調整 */
}

/* ソートは下に配置（PCでは右寄せに戻す） */
.fl-topiclist__sort{ width: 100%; display: flex; justify-content: center; }
@media (min-width: 840px){
  .fl-topiclist__toolbar{
    grid-template-columns: 1fr auto; /* 左=フィルタ 中央寄せ / 右=ソート */
    justify-items: stretch;
    align-items: center;
  }
  .fl-topiclist__filters{ justify-content: center !important; margin: 0 auto; }
  .fl-topiclist__sort{ width: auto; display: block; justify-content: flex-end; }
}

/* 念のため、親の左寄せ指定を打ち消す保険 */
.entry-content .fl-topiclist__filters{ justify-content: center !important; }

/* 投稿フォームの「Webサイト」「フォーラム選択」を行ごと非表示 */
.bbp-form p:has(#bbp_anonymous_website),
.bbp-form p:has(#bbp_forum_id) {
  display: none !important;
}

/* 念のため label / input 単体も消す（古いブラウザ保険） */
.bbp-form label[for="bbp_anonymous_website"],
.bbp-form #bbp_anonymous_website,
.bbp-form label[for="bbp_forum_id"],
.bbp-form #bbp_forum_id {
  display: none !important;
}