/* ==========================================================================
   place-calendar.css
   場所別 定休日カレンダー（Contact Form 7 対応）
   すべて .sc-widget と #ui-datepicker-div.sc-dp の中だけに効きます
   ========================================================================== */

.sc-widget{
  /* 色や角丸はここだけ変えればサイトに馴染みます */
  --sc-ink:#22282c;
  --sc-soft:#6b747a;
  --sc-line:#d8dcd9;
  --sc-bg:#ffffff;
  --sc-closed:#b8402c;      /* 休業日：朱 */
  --sc-closed-bg:#f8e7e3;
  --sc-accent:#1f4b73;      /* 選択・強調：藍 */
  --sc-accent-bg:#e2ecf4;
  --sc-radius:4px;
  color:var(--sc-ink);
  line-height:1.8;
}
.sc-widget *,.sc-widget *::before,.sc-widget *::after{box-sizing:border-box}

.sc-field{margin:0 0 20px}
.sc-label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;margin:0 0 8px}
.sc-label .sc-req{color:var(--sc-closed);font-size:11px;margin-left:6px;font-weight:400}
.sc-help{font-size:12px;color:var(--sc-soft);margin:0 0 10px}

/* CF7 の [text* place] を視覚的にだけ隠す（エラーメッセージは表示されます） */
.sc-widget input.sc-hidden-field{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- 絞り込みボタン（エリア／都道府県） ---- */
.sc-filter{display:flex;flex-wrap:wrap;gap:6px}
.sc-filter-btn{
  border:1px solid var(--sc-line);background:var(--sc-bg);color:var(--sc-ink);
  border-radius:var(--sc-radius);padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.sc-filter-btn:hover{background:var(--sc-accent-bg);border-color:var(--sc-accent)}
.sc-filter-btn[aria-pressed="true"]{
  background:var(--sc-accent);border-color:var(--sc-accent);color:#fff;font-weight:700;
}
.sc-filter-btn .sc-count{font-size:11px;opacity:.7;margin-left:5px}

/* ---- 場所ボタン（JSが生成） ---- */
.sc-places{display:flex;flex-wrap:wrap;gap:8px}
.sc-place-btn{
  border:1px solid var(--sc-line);background:var(--sc-bg);color:var(--sc-ink);
  border-radius:var(--sc-radius);padding:9px 16px;font:inherit;text-align:left;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.sc-place-btn:hover{background:var(--sc-accent-bg);border-color:var(--sc-accent)}
.sc-place-btn[aria-pressed="true"]{
  background:var(--sc-accent);border-color:var(--sc-accent);color:#fff;
}
.sc-place-name{display:block;font-size:14px;font-weight:700;line-height:1.5}
.sc-place-pref{display:block;font-size:11px;color:var(--sc-soft);line-height:1.5}
.sc-place-btn[aria-pressed="true"] .sc-place-pref{color:rgba(255,255,255,.75)}
.sc-empty{font-size:13px;color:var(--sc-soft);margin:0}

/* URLで場所が固定されているとき */
.sc-widget.is-place-locked .sc-filter-field{display:none}
.sc-place-fixed{
  display:inline-block;padding:9px 16px;border-radius:var(--sc-radius);
  background:var(--sc-accent);color:#fff;font-weight:700;font-size:14px;
}
.sc-place-fixed small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.75)}

/* ---- 読み込みエラー ---- */
.sc-error{
  border:1px solid var(--sc-closed);border-left-width:3px;border-radius:var(--sc-radius);
  background:var(--sc-closed-bg);padding:14px 16px;margin:0 0 20px;
}
.sc-error strong{display:block;font-size:14px;color:var(--sc-closed);margin-bottom:2px}
.sc-error span{display:block;font-size:13px}
.sc-error small{
  display:block;margin-top:8px;font-size:11.5px;color:var(--sc-soft);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.sc-widget.is-loading{opacity:.5}
.sc-widget.is-dataerror .sc-filter-field,
.sc-widget.is-dataerror .sc-places,
.sc-widget.is-dataerror .sc-wish{display:none}

/* ---- 場所情報 ---- */
.sc-placeinfo{
  display:none;margin:0 0 20px;padding:12px 14px;border-radius:var(--sc-radius);
  background:var(--sc-accent-bg);font-size:13px;
}
.sc-placeinfo.is-visible{display:block}
.sc-placeinfo dl{display:grid;grid-template-columns:5.5em 1fr;gap:2px 10px;margin:0}
.sc-placeinfo dt{color:var(--sc-soft);font-size:12px}
.sc-placeinfo dd{margin:0}

/* ---- 希望日ブロック（第1希望／第2希望…） ---- */
.sc-wish{
  border:1px solid var(--sc-line);border-radius:var(--sc-radius);
  padding:18px 18px 6px;margin:0 0 18px;
}
.sc-wish.is-collapsed{padding-bottom:16px;background:#fafbfa}
.sc-wish.is-collapsed .sc-wish-body{display:none}
.sc-wish-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sc-wish.is-collapsed .sc-wish-head{margin-bottom:0}
.sc-wish-title{font-size:15px;font-weight:700;letter-spacing:.04em}
.sc-badge{
  font-size:11px;padding:1px 7px;border-radius:2px;
  background:#eef0ee;color:var(--sc-soft);
}
.sc-wish-toggle{
  margin-left:auto;border:1px solid var(--sc-line);background:var(--sc-bg);
  border-radius:var(--sc-radius);padding:5px 12px;font:inherit;font-size:12.5px;
  color:var(--sc-accent);cursor:pointer;
}
.sc-wish-toggle:hover{background:var(--sc-accent-bg)}

/* ---- 日付・時間の入力 ---- */
/* 見出しの下に入力欄を置きます。入力欄は広がりすぎないよう上限を設けています。
   CF7 は入力欄を <span class="wpcf7-form-control-wrap"> で包むので、
   幅の指定はその <span> にも当てる必要があります。 */
.sc-wish .sc-field > .wpcf7-form-control-wrap{
  display:block;
  width:100%;
  max-width:480px;
}
.sc-widget .sc-input-row{display:block;width:100%;max-width:480px}
/* エラー文言は入力欄の下に出します */
.sc-wish .sc-field .wpcf7-not-valid-tip{display:block;font-size:12px;margin-top:4px}
.sc-widget input.sc-date{
  width:100%;max-width:480px;padding:11px 13px;border:1px solid var(--sc-line);
  border-radius:var(--sc-radius);background:var(--sc-bg);
  /* iOS はフォーカス時に 16px 未満の入力欄があるとページを自動で拡大します。
     それを避けるため 16px を下限にしています */
  font-size:16px;line-height:1.4;
  color:var(--sc-ink);cursor:pointer;
}
.sc-widget input.sc-date:focus{outline:2px solid var(--sc-accent);outline-offset:-1px}
.sc-widget input.sc-date[disabled]{background:#f2f4f2;color:#a6adaa;cursor:not-allowed}
/* クリアボタン。メッセージ欄の下、左詰めで置きます */
.sc-clear{
  display:block;
  margin:2px auto 6px 0;
  border:none;background:none;padding:4px 0;font:inherit;font-size:12.5px;
  color:var(--sc-soft);text-decoration:underline;cursor:pointer;
}
.sc-clear:hover{color:var(--sc-closed)}
.sc-clear:focus-visible{outline:2px solid var(--sc-accent);outline-offset:2px}
/* iOS Safari は <select> にネイティブの外観を当てるため、
   文字が小さくなったり青くなったりします。appearance を切って
   日付欄と同じ見た目に揃え、矢印は背景画像で自前に描いています。 */
.sc-widget select.sc-time{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:100%;
  max-width:480px;
  /* 上下左は日付欄と同じ 11px / 13px。右だけ矢印のぶんを空けています */
  padding:11px 34px 11px 13px;
  border:1px solid var(--sc-line);
  border-radius:var(--sc-radius);
  background-color:var(--sc-bg);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6 L8 11 L13 6' fill='none' stroke='%2322282c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:13px 13px;
  font-family:inherit;
  font-size:16px;                       /* 16px 未満だと iOS が自動でズームします */
  line-height:1.4;
  color:var(--sc-ink);                  /* iOS では inherit だと効かないことがあります */
  cursor:pointer;
  /* iOS で角丸や影が勝手に付くのを防ぎます */
  box-shadow:none;
  text-indent:0.01px;
}
.sc-widget select.sc-time::-ms-expand{display:none}
/* テーマや他プラグインが select に padding を当てている場合の保険。
   CF7 が付ける .wpcf7-form-control / .wpcf7-select も並べて詳細度を上げ、
   .sc-wish select.wpcf7-form-control.wpcf7-select（クラス3つ）より
   強くしています（クラス4つ＋要素）。 */
.sc-widget select.sc-time.wpcf7-form-control.wpcf7-select,
.sc-wish select.sc-time.wpcf7-form-control.wpcf7-select,
.sc-widget .sc-field select.sc-time.wpcf7-select{
  padding:11px 34px 11px 13px;
  font-size:16px;
  line-height:1.4;
  height:auto;
  min-height:0;
  box-sizing:border-box;
}
.sc-widget select.sc-time:focus{outline:2px solid var(--sc-accent);outline-offset:-1px}
.sc-widget select.sc-time[disabled]{
  background-color:#f2f4f2;color:#a6adaa;cursor:not-allowed;opacity:1;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6 L8 11 L13 6' fill='none' stroke='%23a6adaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 選択肢の色。OS が描画するため、指定できる範囲は限られます */
.sc-widget select.sc-time option{color:var(--sc-ink)}
.sc-widget select.sc-time option:disabled{color:#b4bab6}
.sc-note{font-size:12.5px;color:var(--sc-soft);margin:6px 0 0;min-height:1.8em}
.sc-note.is-alert{color:var(--sc-closed)}

/* ---- カレンダー ---- */
.sc-calendar{margin:6px 0 0;position:relative}
.sc-calendar.is-locked{opacity:.45;pointer-events:none}
.sc-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--sc-soft);margin-top:12px}
.sc-legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.sc-legend .sc-sw-closed{background:var(--sc-closed-bg);border:1px solid var(--sc-closed)}
.sc-legend .sc-sw-open{background:var(--sc-accent-bg);border:1px solid var(--sc-accent)}

/* ==========================================================================
   datepicker 本体のスタイル（jQuery UI の CSS なしで完結させる）
   ========================================================================== */

/* jQuery UI の CSS には .ui-datepicker{display:none} が含まれています。
   そちらを読み込んでいないため、初期状態の非表示をここで指定します。
   表示する際は jQuery UI が display をインラインで書き込むので上書きされます。 */
#ui-datepicker-div{display:none}

#ui-datepicker-div.sc-dp,
.sc-calendar .ui-datepicker{
  background:var(--sc-bg,#fff);border:1px solid var(--sc-line,#d8dcd9);
  border-radius:var(--sc-radius,4px);padding:0;font-size:13px;line-height:1.6;
}
#ui-datepicker-div.sc-dp{
  position:absolute;display:none;width:min(92vw,320px);z-index:1001;
  --sc-ink:#22282c; --sc-soft:#6b747a; --sc-line:#d8dcd9; --sc-bg:#fff;
  --sc-closed:#b8402c; --sc-closed-bg:#f8e7e3; --sc-accent:#1f4b73; --sc-accent-bg:#e2ecf4;
  color:var(--sc-ink);box-shadow:0 14px 34px rgba(20,30,40,.18);
}
.sc-calendar .ui-datepicker{width:100%}

.sc-dp .ui-datepicker-header,.sc-calendar .ui-datepicker-header{
  position:relative;padding:11px 40px;border-bottom:1px solid var(--sc-line);
}
.sc-dp .ui-datepicker-title,.sc-calendar .ui-datepicker-title{
  text-align:center;font-size:15px;font-weight:700;letter-spacing:.06em;
}
.sc-dp .ui-datepicker-prev,.sc-dp .ui-datepicker-next,
.sc-calendar .ui-datepicker-prev,.sc-calendar .ui-datepicker-next{
  position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;cursor:pointer;
  border-radius:var(--sc-radius);
}
.sc-dp .ui-datepicker-prev,.sc-calendar .ui-datepicker-prev{left:5px}
.sc-dp .ui-datepicker-next,.sc-calendar .ui-datepicker-next{right:5px}
.sc-dp .ui-datepicker-prev:hover,.sc-dp .ui-datepicker-next:hover,
.sc-calendar .ui-datepicker-prev:hover,.sc-calendar .ui-datepicker-next:hover{background:var(--sc-accent-bg)}
.sc-dp .ui-datepicker-prev span,.sc-dp .ui-datepicker-next span,
.sc-calendar .ui-datepicker-prev span,.sc-calendar .ui-datepicker-next span{
  display:block;width:100%;height:100%;text-indent:-9999px;overflow:hidden;
  background-repeat:no-repeat;background-position:center;background-size:13px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 2 L4 8 L10 14' fill='none' stroke='%2322282c' stroke-width='1.7'/%3E%3C/svg%3E");
}
.sc-dp .ui-datepicker-next span,.sc-calendar .ui-datepicker-next span{transform:rotate(180deg)}
.sc-dp .ui-state-disabled,.sc-calendar .ui-state-disabled{opacity:.35;cursor:default}

.sc-dp table,.sc-calendar .ui-datepicker table{
  width:100%;border-collapse:collapse;margin:0;table-layout:fixed;
}
.sc-dp th,.sc-calendar .ui-datepicker th{
  padding:8px 0;font-size:11.5px;font-weight:700;color:var(--sc-soft);
  border-bottom:1px solid var(--sc-line);text-align:center;
}
.sc-dp th:first-child,.sc-calendar .ui-datepicker th:first-child{color:var(--sc-closed)}
.sc-dp th:last-child,.sc-calendar .ui-datepicker th:last-child{color:var(--sc-accent)}
.sc-dp td,.sc-calendar .ui-datepicker td{padding:1px;border:none;text-align:center}
.sc-dp td span,.sc-dp td a,
.sc-calendar .ui-datepicker td span,.sc-calendar .ui-datepicker td a{
  display:block;padding:10px 2px;text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:2px;background:var(--sc-bg);
  color:var(--sc-ink);font-variant-numeric:tabular-nums;
}
.sc-dp td a:hover,.sc-calendar .ui-datepicker td a:hover{
  background:var(--sc-accent-bg);border-color:var(--sc-accent);
}
/* クリックした瞬間から選択色にする（:hover より詳細度を高く） */
.sc-dp td a:active,.sc-dp td a.ui-state-active,
.sc-dp td a.ui-state-active:hover,.sc-dp td a.ui-state-active.ui-state-hover,
.sc-calendar .ui-datepicker td a:active,
.sc-calendar .ui-datepicker td a.ui-state-active,
.sc-calendar .ui-datepicker td a.ui-state-active:hover,
.sc-calendar .ui-datepicker td a.ui-state-active.ui-state-hover{
  background:var(--sc-accent);border-color:var(--sc-accent);color:#fff;font-weight:700;
}
.sc-dp td.sc-closed span,.sc-calendar .ui-datepicker td.sc-closed span{
  background:var(--sc-closed-bg);border-color:var(--sc-closed-bg);
  color:var(--sc-closed);text-decoration:line-through;
}
.sc-dp td.sc-extra a,.sc-calendar .ui-datepicker td.sc-extra a{
  background:var(--sc-accent-bg);border-color:var(--sc-accent);color:var(--sc-accent);font-weight:700;
}
.sc-dp td.sc-extra a.ui-state-active,.sc-calendar .ui-datepicker td.sc-extra a.ui-state-active{
  background:var(--sc-accent);color:#fff;
}
.sc-dp td.sc-dup span,.sc-calendar .ui-datepicker td.sc-dup span{
  background:#f0f1ef;border-color:#f0f1ef;color:#a8afa8;
}
/* もう一方の希望で選ばれている日（同日でも時間が違えば選べるモード用） */
.sc-dp td.sc-picked a,.sc-calendar .ui-datepicker td.sc-picked a{
  box-shadow:inset 0 0 0 2px var(--sc-accent-bg);
}
.sc-dp .ui-datepicker-today a,.sc-dp .ui-datepicker-today span,
.sc-calendar .ui-datepicker-today a,.sc-calendar .ui-datepicker-today span{
  box-shadow:inset 0 -2px 0 var(--sc-ink);
}
.sc-dp .ui-datepicker-other-month span,
.sc-calendar .ui-datepicker-other-month span{color:#c3c9c5;background:transparent}

/* スマートフォン：下から出るシート形式にして画面外に出ないようにする */
.sc-dp-overlay{display:none;position:fixed;inset:0;background:rgba(20,26,32,.42);z-index:1000}
@media (max-width:640px){
  body.sc-dp-open .sc-dp-overlay{display:block}
  body.sc-dp-open{overflow:hidden}
  #ui-datepicker-div.sc-dp{
    position:fixed !important;left:0 !important;right:0 !important;
    top:auto !important;bottom:0 !important;
    width:100% !important;max-width:none;
    border-radius:14px 14px 0 0;border-bottom:none;z-index:1001 !important;padding-bottom:10px;
  }
  #ui-datepicker-div.sc-dp .ui-datepicker-header{padding:15px 44px}
  #ui-datepicker-div.sc-dp .ui-datepicker-title{font-size:17px}
  #ui-datepicker-div.sc-dp th{font-size:13px;padding:10px 0}
  #ui-datepicker-div.sc-dp td span,#ui-datepicker-div.sc-dp td a{padding:14px 2px;font-size:16px}
  .sc-wish{padding:14px 14px 4px}

  .sc-places{gap:6px}
  .sc-place-btn{padding:8px 12px}
}

@media (prefers-reduced-motion:reduce){.sc-widget *{transition:none !important;animation:none !important}}