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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* =========================
   Layout
========================= */
/* ■本文の外枠：980px で統一（必要なら class="k-top" を外側に付ける） */
.k-top{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ■本文の“縦積み”コンテナ：980px（文章・カード向け） */
.k-stack{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100%;
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ■k-top__grid は本文扱い（980） */
.k-top__grid{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ■ボタン群コンテナ：500px（CTA・ボタン並びだけ細く） */
.k-top__cta, 
.k-split {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100%;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* カード基本 */
.k-card {
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #eef6f2; /* デフォルト */
  padding: 16px;
}

/* カード色分け（統一感：淡いパステル / 判別：色相だけ変更） */
.k-card.k-card--viewer {
  background: #eef6f2 !important; /* 淡いグリーン */
}
.k-card.k-card--organizer {
  background: #fff5e6 !important; /* 淡いクリーム */
}

.k-card__head { margin-bottom: 10px; }

/* タイトル（h2）だけ白背景にする（ベース） */
.k-card__title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 800;

  display: block;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 10px;
}

.k-card__desc {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

/* 区切り線 */
.k-divider {
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 4px 0;
}

/* =========================
   Buttons
========================= */
.k-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.2s;
  border: none;
  box-sizing: border-box;
  width: 100%;
}

/* 色（ベース） */
.k-btn--primary { background-color: #005941 !important; color: #ffffff !important; }
.k-btn--accent  { background-color: #E6B422 !important; color: #2D3436 !important; }
.k-btn--outline { background-color: #ffffff !important; color: #2D3436 !important; border: 2px solid #005941 !important; }
.k-btn--ghost   { background-color: rgba(0,89,65,0.1) !important; color: #005941 !important; border: 1px solid rgba(0,89,65,0.25) !important; }

/* アカウント以外の outline ボタン（役割別に色分け） */
/* 閲覧カード：グリーン寄り */
.k-card--viewer a.k-btn.k-btn--outline:not(.k-btn--account) {
  background-color: #dfeee6 !important;
  border-color: rgba(0,89,65,0.55) !important;
}

/* 主催者カード：クリーム寄り（背景に埋もれないよう少し濃く） */
.k-card--organizer a.k-btn.k-btn--outline:not(.k-btn--account) {
  background-color: #fce8ca !important;
  border-color: rgba(0,89,65,0.55) !important;
}

/* アカウント系ボタンは控えめ */
.k-top a.k-btn.k-btn--outline.k-btn--account {
  background-color: rgba(255,255,255,0.28) !important;
  color: rgba(45,52,54,0.65) !important;
  border-color: rgba(0,89,65,0.22) !important;
  font-weight: 700 !important;
  min-height: 48px !important;
}

/* hover */
.k-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  opacity: 0.95;
}

/* アカウントボタンは hover も控えめ */
.k-top a.k-btn.k-btn--outline.k-btn--account:hover {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.42) !important;
}

/* 2分割ボタン（縦並び） */
.k-split {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* =========================
   Auth block
========================= */
.k-auth {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.k-auth__title {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.75;
}

.k-auth__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 注釈 */
.k-mini__note {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.85;
}

/* =========================
   Foot
========================= */
.k-top__foot {
  max-width: 980px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
}

.k-footcard__title {
  font-weight: 800;
  margin-bottom: 6px;
}

.k-footcard__desc {
  font-size: 14px;
  opacity: 0.85;
}

/* 最優先でタイトル(h2)だけ白背景にする（上書き対策・強制） */
.k-top .k-card .k-card__head h2.k-card__title{
  background-color: #ffffff !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1.35 !important;
}

/* もしテーマ側が h2 の背景を疑似要素で塗っている場合の保険 */
.k-top .k-card .k-card__head h2.k-card__title::before,
.k-top .k-card .k-card__head h2.k-card__title::after{
  background: none !important;
  content: none !important;
}


/* =========================================================
 * KIKKAKE Design Tokens（サイト共通の“土台”）
 * ここは全ページに波及してOK（色/角丸/余白/文字）
 * ======================================================= */
:root{
  --k-primary: #005941;
  --k-accent:  #E6B422;
  --k-text:    #2D3436;

  --k-radius:  12px;
  --k-radius-lg: 14px;

  --k-card-border: #ddd;
  --k-card-bg:     #eef6f2; /* viewer系 */
  --k-card-bg-org: #fff5e6; /* organizer系 */

  --k-btn-h: 54px;
  --k-btn-h-sm: 48px;

  --k-pad: 16px;
  --k-gap: 6px;
}

/* フロント全体の基本トーン（大崩れしにくい範囲だけ） */
body{
  color: var(--k-text);
}
a{
  color: var(--k-primary);
}

/* =========================================================
 * TEC / CE（The Events Calendar / Community Events）
 * “.tribe” スコープ内だけで寄せる（他ページへ副作用を出さない）
 * ======================================================= */

/* --- ボタン（TEC標準ボタン）を k-btn トーンへ --- */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-common button.tribe-common-c-btn{
  border-radius: var(--k-radius) !important;
  min-height: var(--k-btn-h) !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  box-sizing: border-box !important;
}

/* Primary系（多くの画面で“主ボタン”として使われる） */
.tribe-common .tribe-common-c-btn.tribe-common-c-btn--primary,
.tribe-common .tribe-common-c-btn.tribe-common-c-btn--primary:hover{
  background: var(--k-primary) !important;
  border-color: var(--k-primary) !important;
  color: #fff !important;
}

/* Secondary / outline系（枠ボタン寄せ） */
.tribe-common .tribe-common-c-btn.tribe-common-c-btn--secondary{
  background: #fff !important;
  color: var(--k-text) !important;
  border: 2px solid var(--k-primary) !important;
}

/* hover */
.tribe-common .tribe-common-c-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* --- 入力欄（CE申請フォーム含む）を統一 --- */
.tribe-common input[type="text"],
.tribe-common input[type="email"],
.tribe-common input[type="url"],
.tribe-common input[type="tel"],
.tribe-common input[type="number"],
.tribe-common input[type="password"],
.tribe-common select,
.tribe-common textarea{
  border: 1px solid var(--k-card-border) !important;
  border-radius: var(--k-radius) !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* CE 投稿フォームの大枠をカード化（ページ全体が整う） */
#tribe-community-events,
.tribe_community_edit,
.tribe_community_list{
  background: #fff !important;
  border: 1px solid var(--k-card-border) !important;
  border-radius: var(--k-radius-lg) !important;
  padding: var(--k-pad) !important;
}

/* CE フォーム内のセクション見出し（白帯・トップのh2風） */
#tribe-community-events h2,
#tribe-community-events h3{
  background: #fff !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
}

/* --- TECのイベントバーやフィルター周りを“カード”に寄せる --- */
.tribe-events .tribe-events-header,
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-top-bar{
  background: #fff !important;
  border: 1px solid var(--k-card-border) !important;
  border-radius: var(--k-radius-lg) !important;
  padding: 12px !important;
}

/* --- 一覧の各イベント（カードっぽく） --- */
.tribe-events .tribe-events-calendar-list__event,
.tribe-events .tribe-events-calendar-month__multiday-event-wrapper,
.tribe-events .tribe-events-calendar-month__calendar-event{
  border-radius: var(--k-radius-lg) !important;
}

/* =========================================================
 * もし“崩れ”が出た時の切り戻し方
 * 1) 上の「TEC/CE」ブロックだけコメントアウトすれば、他は無傷
 * ======================================================= */

/* =========================================================
 * CE（Community Events）投稿フォーム：ボタン色をサイトテーマに統一
 * 対象：投稿済のイベントを表示 / 画像を選択 など
 * スコープ：CEフォーム内のみ（安全）
 * ======================================================= */
#tribe-community-events .tribe-button,
#tribe-community-events a.tribe-button,
#tribe-community-events button,
#tribe-community-events input[type="button"],
#tribe-community-events input[type="submit"],
#tribe-community-events input[type="reset"],
#tribe-community-events .tribe-common-c-btn,
#tribe-community-events a.tribe-common-c-btn,
#tribe-community-events button.tribe-common-c-btn{
  background: #005941 !important;
  border: 2px solid #005941 !important;
  color: #ffffff !important;

  border-radius: 12px !important;
  min-height: 54px !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

/* hover */
#tribe-community-events .tribe-button:hover,
#tribe-community-events a.tribe-button:hover,
#tribe-community-events button:hover,
#tribe-community-events input[type="button"]:hover,
#tribe-community-events input[type="submit"]:hover,
#tribe-community-events .tribe-common-c-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  opacity: 0.95;
}

/* 無効状態 */
#tribe-community-events button:disabled,
#tribe-community-events input:disabled{
  opacity: 0.55 !important;
  transform: none !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* 画像アップロード周りで「ボタンが細い/小さい」対策（よくあるラッパー） */
#tribe-community-events .tribe-community-events-form .tribe-button,
#tribe-community-events .tribe-community-events-form button,
#tribe-community-events .tribe-community-events-form input[type="button"]{
  width: 100% !important;
  max-width: 360px; /* 広すぎるなら調整 */
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
 * TEC：イベント検索ボタン（イベントバー）をテーマ色に統一
 * 対象：イベントを検索（青いボタン）
 * ======================================================= */
.tribe-common .tribe-common-c-btn.tribe-common-c-btn--primary,
.tribe-common a.tribe-common-c-btn.tribe-common-c-btn--primary,
.tribe-common button.tribe-common-c-btn.tribe-common-c-btn--primary{
  background: #005941 !important;
  border-color: #005941 !important;
  color: #ffffff !important;

  border-radius: 12px !important;
  min-height: 54px !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
}

/* hover */
.tribe-common .tribe-common-c-btn.tribe-common-c-btn--primary:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  opacity: 0.95;
}


/* =========================================================
 * TEC：カレンダー上部の「イベントを検索」ボタンだけ色を統一
 * 他のボタンは触らない
 * ======================================================= */

/* 検索ボタン（多くの環境でこのクラス） */
.tribe-events .tribe-events-c-search__button{
  background: #005941 !important;
  border-color: #005941 !important;
  color: #ffffff !important;
}

/* もし上が効かない場合の保険（Primary扱いの時） */
.tribe-events .tribe-common-c-btn.tribe-common-c-btn--primary{
  background: #005941 !important;
  border-color: #005941 !important;
  color: #ffffff !important;
}

/* =========================
   Global width rule
   本文 980 / ボタン群 500
========================= */

/* ■本文の外枠（ページ本体） */
.k-top{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* ■本文（文章・カード） */
.k-stack{
  width: 100%;
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ■ボタン群（CTA）だけ細く */
.k-top__cta,
.k-top__grid > .k-card__body .k-split,
.k-top__grid,
.k-split{
  width: 100%;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================
   Account button grid width
   アカウント欄のボタン群も 500px に揃える
========================= */
.k-auth__grid{
  width: 100%;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   Header text color on header image
   ヘッダー背景画像の上に乗る文字色（まとめて）
========================= */
.header,
.header a,
.header .site-name a,
.header .tagline,
.header .navi-in a,
.header .navi-in a .caption-wrap{
  color: #ffffff !important;
}

/* 読みやすさ（背景写真に埋もれる対策） */
.header .site-name a,
.header .tagline,
.header .navi-in a{
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}


/* =========================
Community Events 一覧：ボタンデザイン統一
========================= */

/* =========================================================
 * ■ Community Events 一覧（/events/community/list/）ボタン統一
 * - 「イベントを新規登録」など（tribe-button系）に効かせる
 * ======================================================= */
.tribe_community_list a.tribe-button,
.tribe_community_list .my-events-display-options a.tribe-button,
.tribe_community_list #search-submit{
  border-radius: var(--k-radius, 12px) !important;
  min-height: var(--k-btn-h, 54px) !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

/* 主ボタン（例：イベントを新規登録） */
.tribe_community_list a.tribe-button-primary{
  background: var(--k-primary, #005941) !important;
  border: none !important;
  color: #fff !important;
}

/* サブ（タブや補助ボタン） */
.tribe_community_list a.tribe-button-secondary,
.tribe_community_list a.tribe-button-tertiary{
  background: #fff !important;
  color: var(--k-text, #2D3436) !important;
  border: 2px solid var(--k-primary, #005941) !important;
}

/* 検索ボタン */
.tribe_community_list #search-submit{
  background: var(--k-primary, #005941) !important;
  border: none !important;
  color: #fff !important;
  width: auto !important;
}

/* hover */
.tribe_community_list a.tribe-button:hover,
.tribe_community_list #search-submit:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}



/* =========================
   Viewer profile edit
========================= */
.k-ui .k-profile-success {
  background: #e8f7ee;
  border: 1px solid rgba(0, 89, 65, 0.25);
  color: #005941;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
}


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

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

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

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}