/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* 「われわれの時間」を消すコード */
#sb_booking_company_time,
.sb-company-time {
  display: none !important;
}

/* 地図本体（#sb_map）を含んでいる親枠（row）を丸ごと非表示にする */
.row:has(#sb_map) {
  display: none !important;
}

/* 決済確認画面の謎の暗号（予約ID）を「...」で隠す魔法 */
.inv-cell-info-content p:last-child {
  max-width: 170px; /* 暗号の手前で文字をカットする絶妙な幅 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 支払い方法（Square）の下のカタカナ「スクエア」を非表示にする */
.payment-system-squareup .name,
.payment-system .name {
  display: none !important;
}

/* 不要なシステム情報（決済方法、保留中）をピンポイントで非表示にする */
.inv-cell-processor,
.inv-cell-status {
  display: none !important;
}

/* 「注文の概要」という無機質な文言を「ご予約内容」に書き換える魔法 */
.right-block--header h4.title--h4 {
  font-size: 0 !important; /* 元の文字をサイズ0にして見えなくする */
}
.right-block--header h4.title--h4::before {
  content: "ご予約内容の確認"; /* 新しい文字を印字する */
  font-size: 18px !important; /* ちょうどいい大きさに戻す */
  font-weight: bold;
}

/* 決済画面に日本語のガイドメッセージを印字する */
#sb_invoice_payment_container::before {
  content: "クレジットカード情報を入力し、「Pay now」ボタンを押して決済を完了してください。";
  display: block;
  text-align: center;
  font-size: 14px;
  color: #474747; /* サイト全体の文字色に合わせています */
  margin-bottom: 20px; /* 下のカード入力欄との隙間 */
  font-weight: bold;
}

/* --- エラータイトルの暗号を日本語化 --- */
h4.title.booking-status.subscribe-component--title {
  font-size: 0 !important;
}
h4.title.booking-status.subscribe-component--title::before {
  content: "お手続きの有効期限切れ";
  font-size: 20px !important;
  display: block;
  font-weight: bold;
  color: #d9534f; /* 少し赤みを入れて注意を引きます */
  margin-bottom: 10px;
}

/* --- エラー詳細の暗号を優しい案内に変更 --- */
p.p.booking-message.subscribe-component--txt {
  font-size: 0 !important;
}
p.p.booking-message.subscribe-component--txt::before {
  content: "一定時間操作がなかったため、ご予約枠の仮押さえが解除されました。お手数ですが、もう一度最初からお手続きをお願いいたします。";
  font-size: 14px !important;
  display: block;
  line-height: 1.5;
  color: #474747;
}

/* --- 邪魔なプッシュ通知勧誘エリアを根こそぎ消去 --- */
.subscribe-component--divider,
.subscribe-component--body,
.subscribe-component--content,
#push-subscribe-region {
  display: none !important;
}

/* ホーム画面の「地図・アクセス」ボタンを完全に非表示にする */
div.btn.map {
  display: none !important;
}

/* お問い合わせ欄の住所の見た目を変更し、上下の隙間を均等にする */
#contacts .info ul li .links a[href*="maps"] {
  font-size: 0 !important;
  line-height: 0 !important;
}

#contacts .info ul li .links a[href*="maps"]::after {
  content: "東京都文京区本郷４丁目７−１";
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* 予約完了画面の「領収書を印刷する」ボタンを非表示にする */
#booking-result-view a[href*="invoice"],
#booking-result-view a[href*="receipt"],
a.btn[href*="invoice"],
.btn-print-invoice,
.invoice-btn {
    display: none !important;
}

/* --- 1. 元のSquareロゴ画像(img)のみを非表示（※カタカナ消去は既存コードで対応済み） --- */
.payment-system-squareup img {
  display: none !important;
}

/* --- 2. 支払いボタン全体の枠を、無機質で洗練されたボタン風に整える --- */
.payment-system-squareup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background-color: #fcfcfc !important; 
  border: 1px solid #e0e0e0 !important; 
  border-radius: 4px !important;        
  margin-bottom: 10px !important;
  cursor: pointer !important;
  gap: 12px !important; 
}

/* --- 3. 【正解】Square風の「面（ソリッド）」カードアイコン（左側） --- */
.payment-system-squareup::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  /* ↓ここを修正！中が塗りつぶされた、Square風のソリッドなカードアイコンのSVGデータです↓ */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23474747' d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- 4. 汎用的なテキスト「クレジットカード決済」（右側） --- */
.payment-system-squareup::after {
  content: "クレジットカード決済";
  font-size: 16px;
  font-weight: bold;
  color: #474747;
}

/* --- フッターの不要な要素をまとめて非表示にする --- */
#footer .copyright,
#footer .footer-copyright,
#footer .powered-by,
#footer .simplybook-link,
#sb_gdpr_report_module_container,
#sb_gdpr_show_form_btn,
footer#footer a {
    display: none !important;
}

/* --- フッターエリアに特定のテキストを改行して印字する --- */
footer#footer::after {
    /* 改行したい場所に \A を入れます */
    content: "© Eocytes, inc. ヒャクパーセントネコ\A展示 23東京都展第007992号 Cattery Sakuraquiet"; 
    white-space: pre-wrap; /* ← \A を実際の改行として認識させる魔法のコード */
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 1.8; /* 改行した時の行間（お好みで調整してください） */
    color: #474747;
    padding: 20px 0;
}