@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){
  /*必要ならばここにコードを書く*/
}
/* カレンダー全体のフォントとApple風UI調整 */
#lovot-calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 20px;
    margin-bottom: 40px;

	box-sizing: border-box; /* 余白を含めて幅100%に収める設定 */
    width: 100%;
    overflow-x: hidden; /* 万が一はみ出しても横スクロールさせない */
}

/* ヘッダー周り（月送りなど） */
.fc-toolbar-title {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    color: #333;
}
.fc .fc-button-primary {
    background-color: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    color: #1d1d1f !important;
    border-radius: 8px !important;
    text-transform: capitalize !important;
    box-shadow: none !important;
}
.fc .fc-button-primary:hover {
    background-color: #e8e8ed !important;
}

/* カレンダーのグリッドと日付 */
.fc-theme-standard td, .fc-theme-standard th {
    border-color: #f0f0f2 !important;
}
.fc .fc-daygrid-day-number {
    color: #1d1d1f;
    font-size: 0.9em;
    padding: 8px;
}

/* イベントの帯（バー）設定 */
.fc-event {
    border-radius: 6px !important;
    font-size: 0.85em !important;
    padding: 2px 5px !important;
    margin-bottom: 2px !important;
    border: none !important;
    transition: transform 0.2s ease;
    cursor: pointer;
}
.fc-event:hover {
    transform: scale(1.02);
}

/* 祝日（背景）の文字色 */
.fc-bg-event {
    opacity: 0.6;
}
.fc-bg-event .fc-event-title {
    color: #ff6b6b;
    font-size: 0.8em;
    padding: 4px;
}

/* ツールチップ（Tippy.js）の白枠カスタマイズ */
.tippy-box[data-theme~='light'] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 5px;
}
/* =========================================
   Cocoonの標準デザインを打ち消す設定
========================================= */

/* 1. 曜日や日付の下線を消し、リンクとしての動作（ホバー）を無効化 */
#lovot-calendar .fc-col-header-cell-cushion,
#lovot-calendar .fc-daygrid-day-number {
    text-decoration: none !important; /* 下線を消す */
    color: #1d1d1f !important;        /* Apple風の濃いグレーに統一 */
    pointer-events: none !important;  /* クリックやホバー自体を無効化 */
}

/* 2. カレンダーの行（曜日や週）にマウスを乗せたときの背景色変化を無効化 */
#lovot-calendar table tr:hover,
#lovot-calendar table tbody tr:hover,
#lovot-calendar table th:hover,
#lovot-calendar table td:hover {
    background-color: transparent !important;
}

/* 3. 曜日の下の不要な行・隙間・太い線を消す（Cocoonのテーブル装飾リセット） */
#lovot-calendar table th {
    background-color: transparent !important; /* Cocoonのグレー背景を消す */
    border-bottom: 1px solid #f0f0f2 !important; /* カレンダーの標準線に合わせる */
    padding: 5px 0 !important; /* 余計な余白をリセット */
}
#lovot-calendar .fc-scrollgrid-section-header td {
    border: none !important; /* 曜日と日付の間にできる謎の隙間線を消す */
}
/* =========================================
   Cocoonのテーブル装飾を完全に無効化（優先度高）
========================================= */

/* 1. カレンダーをホバーした時に一週間分（行）の色が変わるのを防ぐ */
.entry-content #lovot-calendar table tr:hover,
.entry-content #lovot-calendar table tr:hover td,
.entry-content #lovot-calendar table tr:hover th,
.entry-content #lovot-calendar table tbody tr:hover {
    background-color: transparent !important;
    background: none !important;
}

/* 2. 曜日の下の不要な行（Cocoon特有の隙間や余白）を消す */
.entry-content #lovot-calendar table,
.entry-content #lovot-calendar table th,
.entry-content #lovot-calendar table td {
    margin-bottom: 0 !important;
}
.entry-content #lovot-calendar .fc-scrollgrid-section-header td,
.entry-content #lovot-calendar .fc-scrollgrid-section-header th {
    border-bottom: 0 !important;
    padding: 0 !important;
}
.entry-content #lovot-calendar .fc-col-header-cell-cushion {
    padding: 10px 0 !important; /* 曜日周りの余白をスッキリさせる */
    display: inline-block;
}

/* =========================================
   LOVOTらしい、やさしいデザインへの調整
========================================= */

/* 3. イベント帯（バー）の角を丸くする */
#lovot-calendar .fc-event,
#lovot-calendar .fc-daygrid-event,
#lovot-calendar .fc-daygrid-block-event,
#lovot-calendar .fc-h-event {
    border-radius: 8px !important; /* 角の丸み（数字を大きくするとさらに丸くなります） */
    overflow: hidden !important;   /* 中身のはみ出しを防ぐ */
    border: none !important;       /* 枠線を消す */
    padding: 3px 6px !important;   /* 文字の周りに少し余白を持たせてふっくらさせる */
    margin-bottom: 4px !important; /* イベント同士の縦の隙間 */
}
/* =========================================
   カレンダーのマスと文字サイズの微調整
========================================= */

/* 1. カレンダーの1行（マス）を縦長にしてイベントを多く表示させる */
.entry-content #lovot-calendar .fc-daygrid-day-frame {
    min-height: 110px !important; /* ★ここの数字を大きくするとさらに縦長になります（例：130pxなど） */
}

/* 2. イベント帯の文字をもう少し小さくする */
.entry-content #lovot-calendar .fc-event,
.entry-content #lovot-calendar .fc-event-title {
    font-size: 11px !important; /* ★文字の大きさ（例：10px や 0.7em に変更も可能） */
    line-height: 1.3 !important; /* 複数行になった時の行間を少し詰める */
}
/* =========================================
   スマホ版（リスト表示）のカスタマイズ
========================================= */

/* 1. 日付や曜日の下線をなくし、クリック・ホバー時の色変化を無効化 */
.entry-content #lovot-calendar .fc-list-day-cushion,
.entry-content #lovot-calendar .fc-list-day-cushion a {
    text-decoration: none !important;
    color: #1d1d1f !important;
    pointer-events: none !important; /* クリック操作を無効化 */
}

/* リストの行（日付の帯やイベント）をホバーした時のCocoonの背景色変化を防ぐ */
.entry-content #lovot-calendar .fc-list-table tr:hover td,
.entry-content #lovot-calendar .fc-list-table tr:hover th {
    background-color: inherit !important;
}

/* 2. 日付の帯（ヘッダー）の背景色をApple風の薄いグレーで固定 */
.entry-content #lovot-calendar .fc-list-day th {
    background-color: #f5f5f7 !important;
    border: none !important;
}

/* 3. スマホのイベント文字を大きくする（見やすくタップしやすいサイズに） */
.entry-content #lovot-calendar .fc-list-event-title {
    font-size: 14px !important; /* 前回の11pxより大きくしています */
    padding: 12px 10px !important; /* 上下に少し余白を持たせて窮屈さをなくす */
}
.entry-content #lovot-calendar .fc-list-event-title a {
    text-decoration: none !important;
    color: #333 !important;
}

/* リスト表示の時のイベント左側にある丸いポッチ（・）の色を調整 */
.entry-content #lovot-calendar .fc-list-event-dot {
    border-width: 4px !important; /* 丸を少し大きく */
}