@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
*/

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

/* =============================
   サイト全体の配色「アクアブルー」（2026/10）
   ・初代3DSのアクアブルーがモチーフ
   ・色を変えたいときは、すぐ下の --aq- で始まる色だけ変えればOK
   ・追加CSSより強く効くように、一部 !important を付けている
============================= */
:root {
  --aq-main: #00a0c6;   /* メインの水色（メニュー・ボタン） */
  --aq-deep: #0089b0;   /* 濃い水色（ボタンを押したとき） */
  --aq-dark: #0a5a73;   /* 見出しの文字 */
  --aq-light: #e4f5fa;  /* 一番外側の背景 */
  --aq-pale: #eef9fc;   /* うすい水色（帯・ボックス） */
  --aq-line: #cfe9f1;   /* 区切り線 */
  --aq-accent: #ff5a5f; /* アクセントのコーラル（いまココ・ボタン） */
  --aq-yellow: #fff27a; /* 案内ボックスの強調文字 */

  /* トップのカード類（[ss_...]）の色もアクアブルーに合わせる */
  --ss-red: var(--aq-accent);
  --ss-blue: var(--aq-deep);
  --ss-navy: var(--aq-dark);
  --ss-green: #20b486;
  --ss-cream: var(--aq-pale);
  --ss-line: var(--aq-line);
  --ss-ink: #1f2d36;
  --ss-muted: #5f7480;
}

/* 全体の背景・文字 */
body {
  background: var(--aq-light) !important;
  color: #1f2d36;
}

/* ヘッダー下のメニュー */
#navi,
#navi .navi-in {
  background: var(--aq-main) !important;
}

#navi {
  border-bottom: 4px solid var(--aq-accent);
}

#navi .navi-in a,
#navi .item-label {
  color: #fff !important;
  text-shadow: none !important;
}

#navi .navi-in a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

#navi .sub-menu {
  background: var(--aq-deep) !important;
}

/* メインとサイドバー */
.main {
  background: #fff !important;
}

#sidebar {
  background: #fff !important;
  border-radius: 10px;
}

#sidebar .widget-sidebar-title,
#sidebar h3 {
  color: var(--aq-dark) !important;
  border-color: var(--aq-main) !important;
}

/* サイドバーのリンクの色 */
#sidebar a {
  color: var(--aq-deep);
}

/* 掲示板の「新規トピックを作成する」ボタンの文字は白 */
a.jump-to-topic-button {
  color: #fff !important;
}

/* 掲示板ページのタイトルの帯・TOPのウィジェット見出し（オレンジ → 水色） */
#post-78 .entry-title,
#post-97 .entry-title,
#post-265 .entry-title,
.main-widget-label {
  border-top-color: var(--aq-main) !important;
  border-bottom-color: var(--aq-main) !important;
  -webkit-text-stroke-color: var(--aq-deep) !important;
}

/* ふつうのページのタイトル */
.entry-title {
  color: var(--aq-dark);
}

/* 掲示板の一覧の見出し行 */
#bbpress-forums li.bbp-header {
  background: var(--aq-main) !important;
  border-color: var(--aq-main) !important;
}

#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-header a {
  color: #fff !important;
}

/* 掲示板のボタン類（青 → 水色） */
.jump-to-topic-button,
.bbp-submit-wrapper button,
.bbp-form legend {
  background-color: var(--aq-main) !important;
}

.jump-to-topic-button:hover,
.bbp-submit-wrapper button:hover {
  background-color: var(--aq-deep) !important;
}

.bbp-form input[type="text"]:focus,
.bbp-form input[type="date"]:focus,
.bbp-form input[type="url"]:focus,
.bbp-form select:focus {
  border-color: var(--aq-main) !important;
}

/* TOPウィジェットの「一覧・新規投稿」ボタン */
.topic-cta-link {
  background: linear-gradient(90deg, var(--aq-main), #2ec5e0) !important;
  color: #fff !important;
}

/* 開催日が近い募集の目印（黄色はそのまま、線だけ水色系に） */
.highlight-upcoming {
  border-left-color: var(--aq-accent) !important;
}

/* トップの案内ボックス */
.ss-hero {
  background: linear-gradient(135deg, var(--aq-deep), #2ec5e0) !important;
}

.ss-hero__title b {
  color: var(--aq-yellow) !important;
}

.ss-btn--white {
  color: var(--aq-dark) !important;
}

/* スマホ下のメニューボタン（紫 → 水色） */
.mobile-menu-buttons {
  background: var(--aq-main) !important;
}

.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon {
  color: #fff !important;
}


/* =============================
   TOPリニューアル（2026/10）
   [ss_hero] [ss_topics] [ss_heading] の見た目
============================= */
:root {
  --ss-red: #e0393e;
  --ss-blue: #2c6a94;
  --ss-navy: #1f3b57;
  --ss-green: #3aa66b;
  --ss-cream: #fff8ec;
  --ss-line: #f0dcc0;
  --ss-ink: #2b2b2b;
  --ss-muted: #7a6f63;
  --ss-yellow: #ffc93c;
}

/* --- 一番上の案内 --- */
.ss-hero {
  position: relative;
  margin: 0 0 24px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ss-navy), var(--ss-blue));
  color: #fff;
  overflow: hidden;
}

.ss-hero::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.ss-hero .ss-hero__title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 24px !important;
  line-height: 1.4;
  color: #fff !important;
}

.ss-hero .ss-hero__title::before,
.ss-hero .ss-hero__title::after {
  content: none !important;
}

.ss-hero__title b {
  color: var(--ss-yellow);
}

.ss-hero__text {
  margin: 0 0 14px !important;
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.9;
}

.ss-hero__btns {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.ss-btn:hover {
  transform: translateY(-2px);
}

.ss-btn--red {
  background: var(--ss-red);
  color: #fff !important;
}

.ss-btn--white {
  background: #fff;
  color: var(--ss-navy) !important;
}

/* --- 見出し --- */
.ss-sec {
  margin: 0 0 28px;
}

.main .ss-h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 3px solid var(--ss-line) !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 18px !important;
  color: var(--ss-ink) !important;
}

.main .ss-h2::before,
.main .ss-h2::after {
  content: none !important;
}

.ss-h2 small {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.ss-h2 small a {
  color: var(--ss-blue);
}

/* --- 新着カード --- */
.main ul.ss-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.main ul.ss-cards > li.ss-cards__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ss-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--ss-line);
  border-left: 5px solid var(--ss-blue);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 var(--ss-line);
  color: var(--ss-ink) !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.ss-card:hover {
  transform: translateY(-2px);
}

.ss-cards--friend .ss-card { border-left-color: var(--ss-red); }
.ss-cards--talk .ss-card   { border-left-color: var(--ss-green); }

.ss-card__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.ss-card__game {
  font-size: 12px;
  color: var(--ss-muted);
}

.ss-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 11.5px;
  color: var(--ss-muted);
}

.ss-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ss-cream);
  color: var(--ss-navy);
  font-weight: 700;
}

.ss-tag--date {
  background: #fff3cd;
  color: #8a5a00;
}

.ss-card__date {
  margin-left: auto;
}

.ss-card__new {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ss-yellow);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ss-ink);
}

.ss-card__new--hot {
  background: var(--ss-red);
  color: #fff;
}

.ss-more {
  display: block;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--ss-cream);
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ss-blue) !important;
  text-decoration: none !important;
}

.ss-more:hover {
  background: #ffefd2;
}

/* --- スマホ --- */
@media screen and (max-width: 600px) {
  .ss-hero {
    padding: 18px;
  }

  .ss-hero .ss-hero__title {
    font-size: 20px !important;
  }

  .ss-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .main ul.ss-cards {
    grid-template-columns: 1fr;
  }

  /* 見出しが改行されないように、画面の幅に合わせて文字を小さくする */
  .main .ss-h2 {
    gap: 6px;
    font-size: clamp(14px, 4.2vw, 18px) !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
}

/* --- お知らせバー [ss_notice] --- */
a.ss-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 14px;
  border: 1px solid var(--ss-line);
  border-left: 4px solid var(--ss-yellow);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--ss-ink) !important;
  text-decoration: none !important;
}

a.ss-notice:hover {
  background: #fffaf0;
}

.ss-notice__label {
  flex: none;
  font-weight: 700;
  color: var(--ss-red);
}

.ss-notice__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-notice__date {
  flex: none;
  font-size: 11.5px;
  color: var(--ss-muted);
}

.ss-notice__date::after {
  content: " ›";
}

/* トップ1ページ目の下にあった「お知らせ一覧」は出さない（新しいお知らせは上のバーで表示） */
.home:not(.paged) #list,
.home:not(.paged) .pagination,
.home:not(.paged) .pagination-next {
  display: none !important;
}

/* --- 開催日の状態（今日・あと○日・終了） --- */
.ss-card__status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ss-status {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.ss-status--today {
  background: var(--ss-red);
  color: #fff;
}

.ss-status--soon {
  background: #fff3cd;
  color: #8a5a00;
}

.ss-status--past {
  background: #eceff1;
  color: #8a949b;
}

.ss-status--sticky {
  background: var(--ss-navy);
  color: #fff;
}

.ss-cards__item.is-today .ss-card {
  border-color: var(--ss-red);
  box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.25), 0 2px 0 var(--ss-line);
}


/* =============================
   掲示板の一覧ページ（子テーマの bbpress/loop-topics.php）
============================= */
#bbpress-forums ul.ss-forum-list {
  clear: both; /* 「新規トピックを作成する」ボタンの下から並べる */
  width: 100%;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

#bbpress-forums ul.ss-forum-list > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

#bbpress-forums .ss-forum-list .ss-card {
  border: 1px solid var(--ss-line) !important;
  border-left: 5px solid var(--ss-blue) !important;
  background: #fff !important;
}

#bbpress-forums .ss-forum-list .ss-cards__item--friend .ss-card {
  border-left-color: var(--ss-red) !important;
}

#bbpress-forums .ss-forum-list .ss-cards__item--talk .ss-card {
  border-left-color: var(--ss-green) !important;
}

#bbpress-forums .ss-forum-list .ss-cards__item.is-today .ss-card {
  border-color: var(--ss-red) !important;
}

#bbpress-forums .bbp-pagination-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  float: none;
}

#bbpress-forums .bbp-pagination {
  margin: 0 0 16px;
}

#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span {
  display: inline-block;
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #fff;
  text-align: center;
  text-decoration: none;
}

#bbpress-forums .bbp-pagination-links span.current {
  border-color: var(--ss-blue);
  background: var(--ss-blue);
  color: #fff;
}

/* =============================
   都道府県から探す [ss_area] [ss_area_chips]
============================= */
.ss-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ss-chips__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ss-chips__label {
  flex: 0 0 6.5em;
  padding-top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ss-muted);
  white-space: nowrap;
}

.ss-chips__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

a.ss-chip {
  padding: 4px 11px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  color: var(--ss-ink) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease;
}

a.ss-chip small {
  margin-left: 3px;
  font-weight: 700;
  color: var(--ss-red);
}

a.ss-chip:hover,
a.ss-chip.is-on {
  border-color: var(--ss-red);
  color: var(--ss-red) !important;
  font-weight: 700;
}

a.ss-chip.is-on {
  background: #fdecec;
}

a.ss-chip.is-empty {
  color: #aaa !important;
}

/* 都道府県ページ */
.ss-area__lead {
  margin: 0 0 16px !important;
  padding: 14px 18px;
  border: 1px solid var(--ss-line);
  border-left: 5px solid var(--ss-red);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.8;
}

.ss-area__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.ss-area__cta .ss-btn--white {
  border: 1px solid var(--ss-line);
}

.ss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ss-tabs button {
  padding: 6px 12px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ss-ink);
  font-size: 12.5px;
  cursor: pointer;
}

.ss-tabs button.is-on {
  border-color: var(--ss-navy);
  background: var(--ss-navy);
  color: #fff;
  font-weight: 700;
}

/* 募集・フレンド・雑談が混ざった一覧でも、左の線の色を分ける */
.ss-cards__item--friend .ss-card { border-left-color: var(--ss-red); }
.ss-cards__item--talk .ss-card   { border-left-color: var(--ss-green); }

@media screen and (max-width: 600px) {
  .ss-chips__row {
    flex-direction: column;
    gap: 4px;
  }

  .ss-chips__label {
    flex: none;
    padding-top: 0;
  }

  .ss-area__cta .ss-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.ss-area__note {
  margin: 10px 0 0 !important;
  font-size: 12px;
  color: var(--ss-muted);
}

/* =============================
   いまココ！すれちがいマップ [ss_now]
============================= */
.ss-now {
  border: 2px solid var(--ss-red);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.ss-now__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ss-red);
  color: #fff;
}

.ss-now__head b {
  font-size: 17px;
}

.ss-now__head .ss-btn {
  padding: 6px 14px;
  border: 0;
  font-size: 13px;
  cursor: pointer;
}

.ss-now__live {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: #7dff8a;
  box-shadow: 0 0 0 3px rgba(125, 255, 138, 0.35);
  animation: ss-blink 1.6s ease-in-out infinite;
}

@keyframes ss-blink {
  50% { opacity: 0.35; }
}

.ss-now__map {
  height: 280px;
  z-index: 0;
}

.ss-pin span {
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--ss-red);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.main ul.ss-now__list {
  margin: 0 !important;
  padding: 4px 14px !important;
  list-style: none !important;
}

.main ul.ss-now__list li.ss-now__item {
  display: block;
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px dashed var(--ss-line);
  list-style: none !important;
  font-size: 13.5px;
}

.main ul.ss-now__list li::before,
.main ul.ss-chat__list li::before {
  content: none !important;
}

.main ul.ss-now__list li.ss-now__item:last-child {
  border-bottom: 0;
}



.ss-now__line {
  font-size: 13.5px;
  line-height: 1.5;
}

.ss-now__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.ss-now__info {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ss-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-now__game::before {
  content: "　🎮 ";
}

.ss-now__actions {
  display: flex;
  flex: none;
  gap: 4px;
}

.ss-now__chat,
.ss-now__report {
  padding: 2px 10px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--ss-ink);
  cursor: pointer;
}

.ss-now__chat {
  border-color: var(--ss-blue);
  color: var(--ss-blue);
  font-weight: 700;
}

.ss-now__report {
  color: var(--ss-muted);
}

/* 自分のチェックインに新しいメッセージが来たとき */
.ss-now__chat.has-new {
  border-color: var(--ss-red);
  background: var(--ss-red);
  color: #fff;
  animation: ss-blink 1.2s ease-in-out infinite;
}

.ss-now__chat.has-new::after {
  content: " 新着！";
}

/* ひとことチャット */
.ss-chat {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--ss-cream);
}

.ss-chat[hidden] {
  display: none;
}

.main ul.ss-chat__list {
  max-height: 220px;
  overflow-y: auto;
  margin: 0 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
}

.main ul.ss-chat__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0 0 6px !important;
  padding: 6px 10px !important;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  list-style: none !important;
}

.main ul.ss-chat__list li.is-owner {
  background: #eaf3fb;
}

.main ul.ss-chat__list li.ss-chat__none {
  display: block;
  background: none;
  color: var(--ss-muted);
  font-size: 12px;
}

.ss-chat__owner {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ss-blue);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.ss-chat__msg {
  flex: 1 1 100%;
  word-break: break-all;
}

.ss-chat__list small {
  font-size: 10.5px;
  color: var(--ss-muted);
}

.ss-chat__report {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 11px;
  color: #bbb;
  cursor: pointer;
}

.ss-chat__form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ss-chat__form input {
  padding: 8px 10px;
  border: 1px solid #e6d3b5;
  border-radius: 8px;
  background: #fff;
  font-size: 16px; /* iPhoneで勝手に拡大されないように */
  box-sizing: border-box;
}

.ss-chat__name {
  flex: 0 0 8.5em;
  width: 8.5em;
}

.ss-chat__text {
  flex: 1 1 10em;
  min-width: 0;
}

.ss-chat__form button {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ss-blue);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.ss-chat__err {
  margin: 6px 0 0 !important;
  font-size: 12px;
  color: var(--ss-red);
}

.ss-chat__note {
  margin: 6px 0 0 !important;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ss-muted);
}



.ss-now__who {
  font-weight: 700;
}

.ss-now__where {
  font-weight: 700;
  color: var(--ss-blue);
}


.ss-now__out {
  padding: 2px 8px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.ss-now__empty {
  margin: 0 !important;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ss-muted);
}

.ss-now__foot {
  padding: 10px 14px;
  background: var(--ss-cream);
  font-size: 11.5px;
  color: var(--ss-muted);
}

/* チェックイン画面 */
.ss-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(20, 30, 45, 0.6);
}

.ss-modal[hidden] {
  display: none;
}

body.ss-modal-open {
  overflow: hidden;
}

.ss-modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: calc(100dvh - 24px); /* スマホのアドレスバー・ツールバーを除いた高さ */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px;
  border-radius: 18px;
  background: #fff;
  font-size: 14px;
  color: var(--ss-ink);
  box-sizing: border-box;
}

/* 上の見出しと×ボタンは、スクロールしても常に表示 */
.ss-modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -18px 4px;
  padding: 14px 18px 8px;
  background: #fff;
}

.ss-modal__head h3 {
  margin: 0;
  font-size: 18px;
}

.ss-modal__close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ss-cream);
  font-size: 24px;
  line-height: 40px;
  color: var(--ss-ink);
  cursor: pointer;
}

/* 下の「チェックインする」ボタンも、スクロールしても常に表示 */
.ss-modal__foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -18px;
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -6px 12px rgba(255, 255, 255, 0.9);
}

.ss-cancel {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--ss-muted);
  cursor: pointer;
}

.ss-modal__lead {
  margin: 0 0 14px !important;
  font-size: 12.5px;
  color: var(--ss-muted);
}

.ss-f {
  display: block;
  margin-bottom: 12px;
}

.ss-f > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 700;
}

.ss-f input,
.ss-f select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e6d3b5;
  border-radius: 10px;
  background: #fffdf8;
  font-size: 16px; /* iPhoneで勝手に拡大されないように16px */
  box-sizing: border-box;
}

.ss-row {
  display: flex;
  gap: 8px;
}

.ss-row > * {
  flex: 1;
  min-width: 0;
}

.ss-sugg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 12px;
}

.ss-sugg:empty {
  display: none;
}

.ss-sugg button {
  padding: 3px 10px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: var(--ss-cream);
  font-size: 12px;
  cursor: pointer;
}

.ss-hint {
  margin: -6px 0 12px !important;
  font-size: 11.5px;
  color: var(--ss-muted);
}

.ss-seg {
  display: flex;
  overflow: hidden;
  border: 1px solid #e6d3b5;
  border-radius: 10px;
}

.ss-seg label {
  flex: 1;
  margin: 0;
  border-right: 1px solid #e6d3b5;
  cursor: pointer;
}

.ss-seg label:last-child {
  border-right: 0;
}

.ss-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ss-seg span {
  display: block;
  padding: 9px 0;
  text-align: center;
  font-size: 13px;
}

.ss-seg input:checked + span {
  background: var(--ss-red);
  color: #fff;
  font-weight: 700;
}

.ss-hp {
  position: absolute !important;
  left: -9999px !important;
}

.ss-safe {
  margin: 4px 0 14px !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef5fa;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ss-navy);
}

.ss-now__msg {
  margin: 0 0 10px !important;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fdecec;
  font-size: 13px;
  color: var(--ss-red);
}

.ss-submit {
  display: block;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-red);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 3px 0 #a8242a;
  cursor: pointer;
}

.ss-submit:disabled {
  opacity: 0.6;
}

@media screen and (max-width: 600px) {
  .ss-now__map {
    height: 230px;
  }

  /* スマホでは画面の下から出てくるシートにする */
  .ss-modal {
    align-items: flex-end;
    padding: 0;
  }

  .ss-modal__box {
    max-height: 88vh;
    max-height: calc(100dvh - 40px);
    border-radius: 18px 18px 0 0;
  }

  .ss-modal__lead {
    display: none;
  }

  .ss-f {
    margin-bottom: 10px;
  }

  .ss-safe {
    font-size: 11.5px;
  }

  .ss-row {
    flex-direction: column;
    gap: 0;
  }
}

/* =============================
   スレッド（トピック）ページ（子テーマの bbpress/loop-replies.php）
============================= */
.tp {
  --tp-main: var(--aq-main, #00a0c6);
  --tp-deep: var(--aq-deep, #0089b0);
  --tp-dark: var(--aq-dark, #0a5a73);
  --tp-pale: var(--aq-pale, #eef9fc);
  --tp-line: var(--aq-line, #cfe9f1);
  --tp-accent: var(--aq-accent, #ff5a5f);
  font-size: 14px;
  color: #1f2d36;
}

/* カードの中にタイトル（H1）があるので、上のタイトルは隠す */
.single-topic .article > .entry-title,
.single-topic .entry-header .entry-title,
.single-topic h1.entry-title {
  display: none !important;
}

/* 「このトピックには○件の返信…」の案内と、表の見出しは不要に */
.single-topic #bbpress-forums > .bbp-template-notice.info {
  display: none;
}

/* --- 募集カード --- */
.tp-card {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 0 var(--tp-line);
}

.tp-card__top {
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--tp-deep), #2ec5e0);
  color: #fff;
}

.tp-card__forum {
  font-size: 11.5px;
  opacity: 0.9;
}

.tp .tp-card__title {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1.4;
  color: #fff !important;
}

.tp .tp-card__title::before,
.tp .tp-card__title::after {
  content: none !important;
}

.tp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px 0;
}

.tp-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tp-pale);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tp-dark);
}

.tp-tag--date {
  background: #fff3cd;
  color: #8a5a00;
}

.tp-tag--game {
  font-weight: 500;
}

.tp-mood {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tp-pale);
}

.tp-mood__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tp-dark);
  white-space: nowrap;
}

.tp-mood__bar {
  display: flex;
  flex: none;
  gap: 3px;
}

.tp-mood__bar i {
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: #d6e6ec;
}

.tp-mood__bar i.on {
  background: var(--tp-accent);
}

.tp-mood__text {
  font-size: 12.5px;
}

.tp-body {
  padding: 14px 18px 6px;
  font-size: 15px;
  line-height: 1.8;
}

.tp-body p {
  margin: 0 0 0.8em !important;
}

.tp-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 18px 12px;
  font-size: 12px;
  color: #5f7480;
}

.tp-ava {
  display: inline-grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--tp-main);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.tp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--tp-line);
  background: #fbfeff;
}

/* 「行きたい！」ボタン（WP ULike）を大きく */
.tp-like {
  flex: 1;
}

.tp-like .wpulike {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ボタンと数字を、1つのつながったピル型ボタンにする */
.tp-like .wp_ulike_general_class {
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
  height: 46px;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: 0 3px 0 #c63c41;
}

.tp-like .wp_ulike_btn {
  display: flex !important;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--tp-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0 !important; /* 「Liked」などの文字は隠して、下で日本語に置きかえる */
  color: #fff !important;
  cursor: pointer;
}

.tp-like .wp_ulike_btn > span,
.tp-like .wp_ulike_btn img,
.tp-like .wp_ulike_btn svg {
  display: none !important;
}

.tp-like .wp_ulike_btn::before {
  content: "🙋 行きたい！";
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

/* 押したあと */
.tp-like .wp_ulike_is_liked .wp_ulike_btn::before {
  content: "✔ 行きたい！済み";
}

.tp-like .wp_ulike_is_liked .wp_ulike_btn {
  background: #e14a4f !important;
}

.tp-like .count-box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0 !important;
  background: #e14a4f !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1 !important;
  color: #fff !important;
}

.tp-like .count-box::before,
.tp-like .count-box::after {
  content: none !important;
  display: none !important;
}

/* WP ULike のアニメーションやツールチップの位置ずれ防止 */
.tp-like .wpulike-default .wp_ulike_put_text {
  min-width: 0 !important;
}

.tp-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

.tp-btn--reply {
  border: 2px solid var(--tp-main) !important;
  background: #fff !important;
  color: var(--tp-dark) !important;
}

.tp-btn--share {
  flex: 0 0 46px;
  border: 2px solid transparent;
  background: var(--tp-pale);
}

/* --- やり取り --- */
.tp .tp-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 3px solid var(--tp-line) !important;
  background: none !important;
  font-size: 17px !important;
  color: #1f2d36 !important;
}

.tp .tp-h::before,
.tp .tp-h::after {
  content: none !important;
}

.tp-h small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: #5f7480;
}

.tp ul.tp-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
}

.tp ul.tp-chat > li.tp-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 88%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tp ul.tp-chat > li.tp-msg::before {
  content: none !important;
}

.tp ul.tp-chat > li.tp-msg.is-owner {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.tp-msg.is-owner .tp-ava {
  background: var(--tp-accent);
}

.tp-msg__box {
  min-width: 0;
}

.tp-msg__name {
  margin: 0 0 3px;
  font-size: 11.5px;
  color: #5f7480;
}

.tp-msg.is-owner .tp-msg__name {
  text-align: right;
}

.tp-owner {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tp-accent);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.tp-bubble {
  padding: 9px 13px;
  border-radius: 4px 16px 16px 16px;
  background: var(--tp-pale);
  line-height: 1.7;
  word-break: break-word;
}

.tp-bubble p {
  margin: 0 0 0.5em !important;
}

.tp-bubble p:last-child {
  margin-bottom: 0 !important;
}

.tp-msg.is-owner .tp-bubble {
  border-radius: 16px 4px 16px 16px;
  background: #ffe9ea;
}

.tp-msg__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: #8a9aa4;
}

.tp-msg.is-owner .tp-msg__meta {
  justify-content: flex-end;
}

.tp-empty {
  margin: 0 0 24px !important;
  padding: 14px;
  border-radius: 12px;
  background: var(--tp-pale);
  text-align: center;
  font-size: 13px;
  color: #5f7480;
}

/* 管理人用リンク（管理人にしか見えない） */
.tp-admin {
  font-size: 11px;
}

.tp-admin summary {
  cursor: pointer;
  color: #8a9aa4;
}

.tp-admin .bbp-admin-links {
  display: block;
  margin-top: 4px;
  float: none !important;
}

/* --- 下の便利リンク --- */
.tp-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tp-link {
  flex: 1 1 200px;
  padding: 12px 14px;
  border: 1px solid var(--tp-line);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tp-dark) !important;
  text-decoration: none !important;
}

.tp-link small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: #5f7480;
}

.tp-link--now {
  border-color: var(--tp-accent);
  background: #fff5f5;
  color: #c63c41 !important;
}

@media screen and (max-width: 600px) {
  .tp .tp-card__title {
    font-size: 18px !important;
  }

  .tp-actions {
    flex-wrap: wrap;
  }

  .tp-like {
    flex: 1 1 100%;
  }
}

/* =============================
   最近の返信 [ss_recent_replies]（サイドバー・スマホのメニュー）
============================= */
.ss-rr {
  --rr-main: var(--aq-main, #00a0c6);
  --rr-line: var(--aq-line, #cfe9f1);
  --rr-pale: var(--aq-pale, #eef9fc);
}

#sidebar .ss-rr__title,
.ss-rr__title {
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 3px solid var(--rr-line) !important;
  background: none !important;
  font-size: 16px !important;
  font-weight: 800;
  color: var(--aq-dark, #0a5a73) !important;
}

.ss-rr__title::before,
.ss-rr__title::after {
  content: none !important;
}

ul.ss-rr__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.ss-rr__list > li.ss-rr__item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

ul.ss-rr__list > li.ss-rr__item::before {
  content: none !important;
}

.ss-rr__item a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--rr-line);
  border-left: 4px solid var(--aq-deep, #0089b0);
  border-radius: 10px;
  background: #fff;
  color: #1f2d36 !important;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.ss-rr__item a:hover {
  background: var(--rr-pale);
}

.ss-rr__item--friend a { border-left-color: var(--aq-accent, #ff5a5f); }
.ss-rr__item--talk a   { border-left-color: #20b486; }

.ss-rr__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-rr__head .tp-ava {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.ss-rr__name {
  font-size: 12.5px;
  font-weight: 700;
}

.ss-rr__time {
  margin-left: auto;
  font-size: 11px;
  color: #8a9aa4;
}

.ss-rr__text {
  font-size: 13px;
  line-height: 1.5;
}

.ss-rr__topic {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--aq-deep, #0089b0);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-rr__empty {
  font-size: 12.5px;
  color: #8a9aa4;
}

/* サイドバーの検索フォームもアクアブルーに */
#sidebar .wp-block-search__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--aq-dark, #0a5a73);
}

#sidebar .wp-block-search__input {
  border: 1px solid var(--aq-line, #cfe9f1) !important;
  border-radius: 999px !important;
  background: #fff !important;
  padding: 8px 14px !important;
}

#sidebar .wp-block-search__button {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--aq-main, #00a0c6) !important;
  color: #fff !important;
  font-weight: 700;
}

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

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

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


/* =============================
   投稿フォーム（新規トピック・返信）（2026/10）
============================= */
#bbpress-forums #new-post fieldset.bbp-form {
  margin: 24px 0 0;
  padding: 0 0 4px;
  border: 1px solid var(--aq-line) !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 120, 150, 0.08);
  overflow: hidden;
}

/* 見出し（「新規トピックを作成」） */
#bbpress-forums #new-post fieldset.bbp-form > legend {
  float: left; /* 枠の中に入れる */
  width: 100%;
  margin: 0 0 20px;
  padding: 14px 20px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--aq-main), var(--aq-deep));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.04em;
}

#bbpress-forums #new-post fieldset.bbp-form > legend::before {
  content: "✏️ ";
}

#bbpress-forums #new-post fieldset.bbp-form > legend + * {
  clear: both;
}

/* 入力欄の並び（パソコンは2列、スマホは1列） */
#bbpress-forums #new-post fieldset.bbp-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  padding: 0 20px 16px;
}

#bbpress-forums #new-post fieldset.bbp-form > div > * {
  grid-column: 1 / -1;
  margin: 0 !important;
}

#bbpress-forums #new-post fieldset.bbp-form > div > p:has(#date),
#bbpress-forums #new-post fieldset.bbp-form > div > p.ss-time-field,
#bbpress-forums #new-post fieldset.bbp-form > div > p:has(#prefecture),
#bbpress-forums #new-post fieldset.bbp-form > div > p:has(#mood) {
  grid-column: auto;
}

#bbpress-forums #new-post fieldset.bbp-form > div > script {
  display: none;
}

/* 「本文:」のラベルの段は下の入力欄とくっつける */
#bbpress-forums #new-post fieldset.bbp-form > div > p:has(label[for$="_content"]) {
  margin-bottom: -12px !important;
}

#bbpress-forums #new-post p > br {
  display: none;
}

/* ラベル */
#bbpress-forums #new-post label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--aq-dark);
}

/* 入力欄 */
#bbpress-forums #new-post input[type="text"],
#bbpress-forums #new-post input[type="email"],
#bbpress-forums #new-post input[type="url"],
#bbpress-forums #new-post input[type="date"],
#bbpress-forums #new-post input[type="time"],
#bbpress-forums #new-post select,
#bbpress-forums #new-post textarea {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--aq-line) !important;
  border-radius: 10px !important;
  background-color: var(--aq-pale);
  font-size: 16px; /* スマホで勝手に拡大されない大きさ */
  color: #2b2b2b;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#bbpress-forums #new-post textarea {
  height: auto;
  min-height: 180px;
  padding: 12px 14px;
  line-height: 1.7;
}

#bbpress-forums #new-post input:focus,
#bbpress-forums #new-post select:focus,
#bbpress-forums #new-post textarea:focus {
  border-color: var(--aq-main) !important;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 160, 198, 0.15);
  outline: none;
}

#bbpress-forums #new-post input::placeholder,
#bbpress-forums #new-post textarea::placeholder {
  color: #9aaab0;
}

/* 選ぶ欄（▼をすっきり） */
#bbpress-forums #new-post select {
  padding-right: 38px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300a0c6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px !important;
  cursor: pointer;
}

/* 日付・時間 */
#bbpress-forums #new-post input[type="date"],
#bbpress-forums #new-post input[type="time"] {
  cursor: pointer;
}

#bbpress-forums #new-post p.ss-time-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

#bbpress-forums #new-post p.ss-time-field > label,
#bbpress-forums #new-post p.ss-time-field > small {
  flex: 1 1 100%;
}

#bbpress-forums #new-post p.ss-time-field > input {
  flex: 1 1 0;
}

#bbpress-forums #new-post p.ss-time-field > span {
  margin: 0 !important;
  font-weight: 700;
  color: var(--aq-main);
}

#bbpress-forums #new-post small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #8a949b;
}

/* 本文の上の小さいボタン列 */
#bbpress-forums #new-post .wp-editor-container {
  border: 0;
}

#bbpress-forums #new-post .quicktags-toolbar {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
}

#bbpress-forums #new-post .quicktags-toolbar input.button {
  height: auto;
  padding: 3px 10px;
  border: 1px solid var(--aq-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--aq-dark);
}

/* チェックボックス（返信をメールで受け取る など） */
#bbpress-forums #new-post input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  vertical-align: -3px;
  accent-color: var(--aq-main);
}

#bbpress-forums #new-post input[type="checkbox"] + label {
  display: inline;
  font-weight: 400;
}

/* 投稿ボタン */
#bbpress-forums #new-post .bbp-submit-wrapper {
  float: none;
  margin: 4px 0 0 !important;
  text-align: center;
}

#bbpress-forums #new-post .bbp-submit-wrapper button.submit {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 52px;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--aq-main), var(--aq-deep));
  box-shadow: 0 4px 0 var(--aq-dark);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#bbpress-forums #new-post .bbp-submit-wrapper button.submit:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--aq-dark);
}

/* スマホ */
@media screen and (max-width: 600px) {
  #bbpress-forums #new-post fieldset.bbp-form > div {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }

  #bbpress-forums #new-post fieldset.bbp-form > div > p:has(#date),
  #bbpress-forums #new-post fieldset.bbp-form > div > p.ss-time-field,
  #bbpress-forums #new-post fieldset.bbp-form > div > p:has(#prefecture),
  #bbpress-forums #new-post fieldset.bbp-form > div > p:has(#mood) {
    grid-column: 1 / -1;
  }

  #bbpress-forums #new-post fieldset.bbp-form > legend {
    padding: 12px 14px;
    font-size: 16px;
  }
}