@charset "UTF-8";
/* Web商談の予約カレンダー（お問い合わせフォーム「WEB商談依頼」）2026-10-16
   JS（js/web-booking.js）が動いて空き枠を取れたときだけ .rdlp-booking-on が付き、
   カレンダーの欄が出て自由入力欄が隠れる。JS が無い・空き枠が取れないときは自由入力欄のまま。
   ryuki-design.jp 版（2026-10-20）：rdlp.jp の同じファイルと中身は同じ。違いはこのコメントと、最後の「ryuki-design.jp 用」の数行だけ。
   最後の「送信中の表示」は、このサイトのフォーム（CF7 5.1.6）には #form_load が無いので、web-booking.js が作って同じ表示にしている。
   /inquiry・/ad-banner・/it-hojo・/makeshop の PC・スマホで、カレンダーと送信中の表示を確認済み。 */

.rdlp-booking { display: none; position: relative; }
.rdlp-booking-on .rdlp-booking { display: block; }
.rdlp-booking-on .rdlp-booking__fallback { display: none; }
.rdlp-booking__fallback-note { margin: 0 0 8px; font-size: 14px; color: #b32d2e; }

/* 「日付と時間を選択」の欄（フォームの他の入力欄と同じ見た目＋カレンダーの印）
   サイト側の CSS が background の一括指定で上書きするため、印だけ !important で指定 */
.rdlp-booking .rdlp-booking__display {
  cursor: pointer;
  background-color: #ebebeb;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 22px 22px !important;
  padding-right: 48px !important;
  caret-color: transparent;
}
.rdlp-booking .rdlp-booking__display:focus { outline: 2px solid #181818; outline-offset: 1px; }
.rdlp-booking .rdlp-booking__display::placeholder { color: #8a8a8a; }

/* ポップアップ
   専門LP（/lp/〜）では、LP ごとの CSS の初期化（例 `.lp_quality_container div { margin:0; padding:0; border:0; background:transparent; font:inherit }`）が
   クラス1つの指定より強いため、白い背景・枠・余白・文字の大きさが消えて後ろの文字と重なっていた（2026-10-17）。
   そのため、ポップアップの指定はすべて `.rdlp-booking:not(#rdlp-z)` から始めて強くしている（#rdlp-z は存在しない ID。:not() で ID 1つ分の強さになる）。 */
.rdlp-booking:not(#rdlp-z) .rdlp-bk {
  letter-spacing: normal;
  font-weight: normal;
  text-transform: none;
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  background: #fff;
  color: #181818;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  padding: 14px 14px 12px;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk[hidden] { display: none; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk *, .rdlp-booking:not(#rdlp-z) .rdlp-bk *::before, .rdlp-booking:not(#rdlp-z) .rdlp-bk *::after { box-sizing: border-box; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__close {
  position: absolute; top: 6px; right: 8px; width: 32px; height: 32px;
  border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #666; border-radius: 50%;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk__close:hover { background: #f0f0f0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: #fff3f3; color: #b32d2e; font-size: 14px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__msg[hidden] { display: none; }

.rdlp-booking:not(#rdlp-z) .rdlp-bk__panes { display: flex; gap: 14px; align-items: stretch; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__pane--date { flex: 1 1 300px; min-width: 0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__pane--time { flex: 0 0 150px; border-left: 1px solid #e6e6e6; padding-left: 14px; display: flex; flex-direction: column; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__pane--time .rdlp-bk__head { padding-right: 26px; }

.rdlp-booking:not(#rdlp-z) .rdlp-bk__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: bold; font-size: 14px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #dc0000; color: #fff; font-size: 12px; font-weight: bold;
}

/* 月の切り替え */
.rdlp-booking:not(#rdlp-z) .rdlp-bk__nav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__month { font-size: 18px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__month strong { font-weight: bold; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__year { margin-left: 6px; color: #888; font-size: 14px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__arrow {
  width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px; line-height: 1;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk__arrow:hover:not(:disabled) { background: #f3f3f3; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__arrow:disabled { opacity: .3; cursor: default; }

/* カレンダーの升目 */
.rdlp-booking:not(#rdlp-z) .rdlp-bk__grid { display: block; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__wd { text-align: center; font-size: 12px; color: #777; padding: 4px 0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__wd.is-sun { color: #c62828; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__wd.is-sat { color: #1565c0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day {
  display: flex; align-items: center; justify-content: center;
  height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 15px; cursor: pointer; position: relative;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-other, .rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-off { color: #c3c3c3; cursor: default; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-free { color: #181818; font-weight: bold; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-free:hover { background: #f0f0f0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-free.is-sun { color: #c62828; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-free.is-sat { color: #1565c0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-today::after {
  content: ""; position: absolute; inset: 3px; border: 1.5px solid #dc0000; border-radius: 50%; pointer-events: none;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-selected, .rdlp-booking:not(#rdlp-z) .rdlp-bk__day.is-selected:hover { background: #181818; color: #fff; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__day:focus-visible { outline: 2px solid #181818; outline-offset: 1px; }

/* 時間のボタン */
.rdlp-booking:not(#rdlp-z) .rdlp-bk__times { display: flex; flex-direction: column; gap: 8px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__time {
  width: 100%; height: 40px; border: 1px solid #181818; border-radius: 999px; background: #fff; cursor: pointer; font-size: 15px;
}
.rdlp-booking:not(#rdlp-z) .rdlp-bk__time:hover:not(:disabled) { background: #f0f0f0; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__time.is-off { border-color: #e0e0e0; color: #c3c3c3; background: #fafafa; cursor: default; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__time.is-selected { background: #181818; color: #fff; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__time:focus-visible { outline: 2px solid #181818; outline-offset: 1px; }
.rdlp-booking:not(#rdlp-z) .rdlp-bk__note { margin: 10px 0 0; font-size: 12px; color: #777; text-align: center; }

/* スマホ：欄の下に続けて表示し、日付と時間を縦に並べる */
@media (max-width: 599px) {
  .rdlp-booking:not(#rdlp-z) .rdlp-bk { position: static; max-width: none; margin-top: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); padding: 12px 10px 10px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__panes { flex-direction: column; gap: 10px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__pane--time { flex: 0 0 auto; border-left: 0; border-top: 1px solid #e6e6e6; padding-left: 0; padding-top: 10px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__times { flex-direction: row; flex-wrap: wrap; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__time { width: calc(33.333% - 6px); height: 42px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__day { height: 40px; }
}

/* 欄の幅が狭いとき（/lp/simple のパソコン表示の右側のフォームなど）も、日付と時間を縦に並べる（2026-10-17）。
   画面の幅ではなくポップアップ自身の幅で切り替える（container query）。ポップアップはもともと z-index で重なりの順序を
   作っているので、container を付けても重なり方は変わらない（.rdlp-booking 側に付けると後ろの欄の下に潜るので付けない）。 */
.rdlp-booking:not(#rdlp-z) .rdlp-bk { container: rdlp-bk / inline-size; }
@container rdlp-bk (max-width: 500px) {
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__panes { flex-direction: column; gap: 10px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__pane--time { flex: 0 0 auto; border-left: 0; border-top: 1px solid #e6e6e6; padding-left: 0; padding-top: 10px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__times { flex-direction: row; flex-wrap: wrap; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__time { width: calc(33.333% - 6px); height: 42px; }
  .rdlp-booking:not(#rdlp-z) .rdlp-bk__day { height: 40px; }
}

/* =====================================================================
   送信中の表示（2026-10-17）
   送信ボタンを押すと、サイトの sendQ() がボタン（.form-btn）を隠して #form_load（ローディングの gif）を出し、
   Contact Form 7 も自前のくるくる（.wpcf7-spinner）を出すため、ローディングが2つ並んでいた。
   CF7 のくるくるを見えなくし、#form_load を「送信ボタンと同じ形・同じグラデーションの枠＋細い輪＋送信しています」にする。
   対象は、送信ボタンがサイト共通の形（.form-btn ＋ 隠した送信ボタン .form-btn-hidden ＋ #form_load）のフォーム。
   このCSSを読み込むのは /lp-inquiry と専門LP（/lp/〜）・企業LP（2026-10-17 に /lp-inquiry だけ → 専門LPにも広げた）。
   LP ごとの CSS の初期化に負けないよう、ID（#form_load）を含む指定にしている。
   #form_load の無いフォーム（/lp/amazon・/lp/visual・/lp/simple のパソコン用の欄・企業LP。押してもボタンが消えない作り）では、
   CF7 のくるくるが唯一の送信中の表示なので消さず、見た目だけ同じ細い輪にする（2026-10-17。一度すべて消してしまったのを直した）。
   ===================================================================== */
/* CF7 のくるくるは、#form_load のあるフォームでだけ見えなくする（場所は残す。消すとボタンの下の余白が変わるため） */
.wpcf7 form:has(#form_load) .form-btn-hidden + .wpcf7-spinner { visibility: hidden !important; }
/* #form_load の無いフォーム：CF7 のくるくるを残し、見た目を送信中の表示と同じ細い輪に（表示・非表示は CF7 のまま） */
.wpcf7 form:not(:has(#form_load)) .form-btn-hidden + .wpcf7-spinner {
  background: conic-gradient(from 0deg, rgba(236, 236, 236, 0) 0deg, #dc82b4 150deg, #78c8ff 360deg), #ececec;
  opacity: 1;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.wpcf7 form:not(:has(#form_load)) .form-btn-hidden + .wpcf7-spinner::before { display: none; }
.wpcf7 form.submitting:not(:has(#form_load)) .form-btn-hidden + .wpcf7-spinner { animation: rdlp-loader-spin .8s linear infinite; }
.wpcf7 #form_load img { display: none !important; }
/* ボタンと同じ大きさにして、ボタンがあった場所にそのまま出す（下の margin は HTML 側の 1em を打ち消す） */
.wpcf7 #form_load {
  box-sizing: border-box;
  width: 500px;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #dc82b4 0, #78c8ff 100%);
  cursor: progress;
}
.wpcf7 #form_load p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 80px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  background: #fff;
  color: #181818;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}
.wpcf7 #form_load p::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(236, 236, 236, 0) 0deg, #dc82b4 150deg, #78c8ff 360deg), #ececec;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: rdlp-loader-spin .8s linear infinite;
}
.wpcf7 #form_load p::after { content: "送信しています"; }
@keyframes rdlp-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wpcf7 #form_load p::before { animation-duration: 2s; }
}
@media only screen and (max-width: 767px) {
  .wpcf7 #form_load { width: 77.333vw; padding: .533vw; border-radius: .533vw; }
  .wpcf7 #form_load p { height: 14.933vw; gap: 3.2vw; border-radius: .533vw; font-size: 3.733vw; }
  .wpcf7 #form_load p::before { width: 5.333vw; height: 5.333vw; }
}
/* ryuki-design.jp 用（2026-10-20）：#form_load は web-booking.js が作る（フォームに .rdlp-has-form-load が付く）。
   CF7 5.1.6 のくるくる（.ajax-loader）は見えなくする（場所は残す）。
   スマホの送信ボタンの枠は、このサイトの inquiry_rdlp.css では 0.8vw（rdlp.jp は 0.533vw）なので、送信中の表示もボタンに合わせる */
.wpcf7 form.rdlp-has-form-load .ajax-loader { visibility: hidden !important; }
@media only screen and (max-width: 767px) {
  .wpcf7 #form_load { padding: .8vw; border-radius: .8vw; }
  .wpcf7 #form_load p { border-radius: .7vw; }
}