@charset "utf-8";
/* ============================================================
   営業カレンダー
   ------------------------------------------------------------
   ★このファイルはプラグインが自動で読み込みます（貼り付け不要）。
   ★色を変えたいときは、追加CSSで下の変数を上書きしてください。

       .ckd-cal { --cal-short-bg: #eaf3e3; }

   ★PCとスマホで作りを変えています。
     PC   … 7列の面グリッド（ひと月をひと目で）
     スマホ … 面グリッドは色だけにして、下の「いつもと違う日」で読ませる
             （7列を小さくしただけでは、指でも目でもつらいため）
   ============================================================ */

/* ★既定の幅。カレンダーは広すぎるとマスが伸びて読みにくくなります。
   　 置いた場所に合わせたいときは [ckd_calendar width="783"]、
   　 枠いっぱいにしたいときは width="full" を使ってください。 */
/* ★クラスを2回書いて、詳細度を1段上げています。
   　 追加CSS（wp-custom-css）は、プラグインのCSSより「後」に出ます。
   　 同じ詳細度だと、後に書いたほうが勝つので、中央寄せが外れます。
   　 !important は使いません。効かせたい理由が読めなくなるためです。 */
.ckd-cal.ckd-cal {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.ckd-cal.is-full { max-width: none; }

.ckd-cal {
  --cal-ink:       #3F3F3D;
  --cal-faint:     #BFC4C8;
  --cal-sat:       #8FBBE0;
  --cal-sun:       #EE9A5E;
  --cal-holi:      #DD5F52;
  --cal-mono:      #9BA7AF;
  --cal-accent:    #79826F;
  --cal-today:     #47513C;

  --cal-open-bg:   #FAFAF8;   /* ふつうの営業日 */
  --cal-closed-bg: #EDEDE9;   /* お休み */
  --cal-closed-fg: #9E9E99;
  --cal-short-bg:  #EAF3E3;   /* 時短 */
  --cal-short-fg:  #5E7A4B;
}

/* --- 今月／来月 --- */
.ckd-cal-tabs { display: flex; gap: .6em; margin: 0 0 1.3em; }
.ckd-cal-tab {
  flex: 0 1 auto;
  padding: .5em 1.5em;
  min-height: 44px;
  border: 1px solid var(--cal-accent);
  border-radius: 999px;
  background: #FFF;
  color: var(--cal-accent);
  font-size: .88rem; font-weight: 600; line-height: 1.4;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ckd-cal-tab.is-active { background: var(--cal-accent); color: #FFF; }
.ckd-cal-tab:focus-visible { outline: 3px solid var(--cal-today); outline-offset: 2px; }

.ckd-cal-panel[hidden] { display: none; }

/* ------------------------------------------------------------
   シート
   ------------------------------------------------------------ */
.ckd-cal-sheet {
  display: grid;
  grid-template-columns: minmax(128px, 0.85fr) 3.65fr;
  gap: 0 clamp(12px, 3vw, 40px);
  align-items: start;
}

.ckd-cal-side {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: .55rem;
  align-items: start;
}
.ckd-cal-mnum {
  grid-row: 1;
  font-size: clamp(4rem, 8.5vw, 6.6rem);
  font-weight: 200; line-height: .8;
  color: var(--cal-mono); letter-spacing: -.03em;
}
.ckd-cal-mtext { grid-row: 1; display: flex; flex-direction: column; padding-top: .5em; }
.ckd-cal-year { font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.1; color: var(--cal-mono); }
.ckd-cal-en   { font-size: clamp(.8rem, 1.5vw, 1.05rem); font-weight: 300; line-height: 1.2; color: var(--cal-mono); letter-spacing: .2em; }

.ckd-cal-rules {
  grid-column: 1 / -1; grid-row: 2; align-self: end;
  width: 68%;                 /* ★罫線を短くして、そのぶんカレンダーを広く */
  margin-top: 5.6em;          /* ★もう少し下に */
  height: 7em;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(1.4em - 1px),
    #E6E6E2 calc(1.4em - 1px), #E6E6E2 1.4em);
}

/* ------------------------------------------------------------
   表（面で見せる）
   ------------------------------------------------------------ */
.ckd-cal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  color: var(--cal-ink);
}

.ckd-cal-head {
  padding: .2em 0 .7em;
  font-size: .68rem; font-weight: 500;
  color: #A2A29E; letter-spacing: .2em; text-transform: lowercase;
}
.ckd-cal-head.is-sat { color: var(--cal-sat); }
.ckd-cal-head.is-sun { color: var(--cal-sun); }

.ckd-cal-cell {
  position: relative;
  height: 3.6em;
  padding: .5em .2em;
  border-radius: 9px;
  background: var(--cal-open-bg);
  text-align: center;
  vertical-align: top;
}
.ckd-cal-day { display: block; font-size: 1.02rem; font-weight: 400; line-height: 1.1; }

/* 前月・翌月 */
.ckd-cal-cell.is-other { background: transparent; }
.ckd-cal-cell.is-other .ckd-cal-day { color: var(--cal-faint); font-size: .82rem; }
.ckd-cal-cell.is-other .ckd-cal-mark { opacity: .5; }

/* お休み・時短 */
.ckd-cal-cell.is-closed { background: var(--cal-closed-bg); }
.ckd-cal-cell.is-closed .ckd-cal-day { color: var(--cal-closed-fg); }
.ckd-cal-cell.is-short  { background: var(--cal-short-bg); }
.ckd-cal-cell.is-short .ckd-cal-day { color: var(--cal-short-fg); }
.ckd-cal-cell.is-other.is-closed,
.ckd-cal-cell.is-other.is-short { background: transparent; }

/* 祝日 */
.ckd-cal-cell.is-holiday .ckd-cal-day { color: var(--cal-holi); }
.ckd-cal-cell.is-holiday.is-other .ckd-cal-day { color: var(--cal-faint); }

/* 今日 */
.ckd-cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--cal-today); }

/* セルの中の小さい字 */
.ckd-cal-mark { display: block; margin-top: .3rem; font-size: .62rem; line-height: 1; }
.ckd-cal-cell.is-open  .ckd-cal-mark { visibility: hidden; }
.ckd-cal-cell.is-short .ckd-cal-mark { color: var(--cal-short-fg); }
.ckd-cal-cell.is-short .ckd-cal-mark::after { content: "時短"; }
.ckd-cal-cell.is-closed .ckd-cal-mark { color: var(--cal-closed-fg); }
.ckd-cal-cell.is-closed .ckd-cal-mark::after { content: "休"; }

.ckd-cal-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   凡例
   ------------------------------------------------------------ */
.ckd-cal-legend {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: .5em 1.5em;
  margin: 1.2em 0 0; padding: 0;
  list-style: none;
  font-size: .86rem; color: var(--cal-ink);
}
.ckd-cal-legend-item { display: flex; align-items: center; gap: .5em; }
/* ★色そのものを見せます。中に文字は入れません（セルと同じ色であることが要点） */
.ckd-cal-legend-mark {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.2rem;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.07);
  background: var(--cal-open-bg);
}
.ckd-cal-legend-item.ckd-cal-is-closed .ckd-cal-legend-mark { background: var(--cal-closed-bg); }
.ckd-cal-legend-item.ckd-cal-is-short  .ckd-cal-legend-mark { background: var(--cal-short-bg); }

/* ------------------------------------------------------------
   いつもと違う日
   ★スマホでいちばん読まれる場所です。
   ------------------------------------------------------------ */
.ckd-cal-notes {
  margin: 1.4em 0 0;
  padding: 1em 1.2em;
  border-radius: 10px;
  background: #FAFAF8;
}
.ckd-cal-notes-title {
  margin: 0 0 .6em;
  font-size: .85rem; font-weight: 700;
  color: var(--cal-today); letter-spacing: .04em;
}
.ckd-cal-notes-list { margin: 0; padding: 0; list-style: none; }
.ckd-cal-note {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2em .8em;
  padding: .45em 0;
  border-top: 1px solid #ECECE8;
  font-size: .93rem; line-height: 1.6;
}
.ckd-cal-note:first-child { border-top: 0; padding-top: 0; }
.ckd-cal-note-date { flex: 0 0 auto; font-weight: 700; min-width: 5.2em; }
.ckd-cal-note.is-closed .ckd-cal-note-date { color: var(--cal-closed-fg); }
.ckd-cal-note.is-short  .ckd-cal-note-date { color: var(--cal-short-fg); }

/* ============================================================
   スマホ（≤640px）
   ★7列を小さくするのではなく、役割を分けます。
     グリッド … 色だけの「ひと目」
     一覧　　 … 実際に読む場所
   ============================================================ */
@media (max-width: 640px) {

  .ckd-cal-tabs { gap: .5em; }
  .ckd-cal-tab { flex: 1 1 0; padding: .5em .6em; }

  .ckd-cal-sheet { grid-template-columns: 1fr; gap: 0; }

  .ckd-cal-side {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
    align-items: baseline;
    column-gap: .55rem;
    padding: 0 0 .6em;
  }
  .ckd-cal-mnum { font-size: 2.5rem; line-height: 1; }
  .ckd-cal-mtext { flex-direction: row; align-items: baseline; gap: .5rem; padding-top: 0; }
  .ckd-cal-year { font-size: 1.05rem; }
  .ckd-cal-en   { font-size: .82rem; letter-spacing: .12em; }
  .ckd-cal-rules { display: none; }

  .ckd-cal-table { border-spacing: 3px; }
  .ckd-cal-head  { font-size: .58rem; letter-spacing: .06em; padding: 0 0 .4em; }

  /* 面の色で読ませます。中の小さい字は消します（潰れて読めないため） */
  .ckd-cal-cell { height: 2.5em; padding: .35em .1em; border-radius: 7px; }
  .ckd-cal-day  { font-size: .88rem; font-weight: 500; }
  .ckd-cal-cell.is-other .ckd-cal-day { font-size: .72rem; }
  .ckd-cal-mark { display: none; }

  .ckd-cal-legend { justify-content: flex-start; gap: .4em .9em; font-size: .78rem; margin-top: .9em; }
  .ckd-cal-legend-mark { width: 1.5rem; height: 1rem; }

  /* 一覧を主役にします */
  .ckd-cal-notes { margin-top: 1.1em; padding: .9em 1em; }
  .ckd-cal-notes-title { font-size: .9rem; }
  .ckd-cal-note { font-size: .95rem; padding: .55em 0; }
  .ckd-cal-note-date { min-width: 5.4em; }
}