/*
Theme Name:     Lightning-child
Description:    Lightningの子テーマ
Author:         toshi
Template:       lightning

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/


.widget{
	display:none;
}

legend {
    display: none;
}




/* -----------------------------
	ログインユーザー名非表示
----------------------------- */

.login_status{
	display:none;
}


/* -----------------------------
	スクロールスムーズ
----------------------------- */

html {
  scroll-behavior: smooth;
}


/* -----------------------------
	自動ログイン
----------------------------- */

.logged-in-user-id {
    position: fixed;
    bottom: 10px;    /* 下からの距離 */
    left: 10px;      /* 左からの距離 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    z-index: 9999;   
}


/* -----------------------------
	https://yoyaku.eco-westsaga.or.jp/booking-form/の「予約受付期間外です。」を見えなくする
----------------------------- */

.error-message, .error-box{
	display:none !important;
}


/* -----------------------------
	h3タイトル
----------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Playfair+Display:wght@700&display=swap');

.entry-title {
    font-size: 36px;
    font-weight: 700;
    font-family: 'Playfair Display', serif; /* 高級感のあるフォント */
    color: #3c6;
    text-transform: uppercase; /* すべて大文字にして印象を強く */
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* 影を強める */
    letter-spacing: 1.5px; /* 文字間隔を広げる */
    background: linear-gradient(135deg, #3c6, #1a3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* グラデーションを文字に適用 */
    border-bottom: 4px solid #3c6;
    padding-bottom: 10px;
    display: inline-block;
}

/* -----------------------------
	クイズフィールド
----------------------------- */

/* クイズフィールドの長さ */
#client-quiz {
    width: 100px; /* ここで幅を調整 */
}

/*一覧表のスマホ用横スクロール*/
.scrollable-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scrollable-table-container table {
    width: 100%;
    table-layout: fixed;
    min-width: 960px;
}

.scrollable-table-container th,
.scrollable-table-container td {
    padding: 10px;
    text-align: left;
    white-space: normal; /* これを追加: テキストを改行させる */
    word-wrap: break-word; /* 長い単語でも折り返しさせる */
}

.scrollable-table-container td {
    max-width: 200px; /* お名前列の最大幅を制限する場合 */
}



/* -----------------------------
	予約検索ボタン
----------------------------- */

/*予約検索ボタンを大きく*/
#subscription-search-button {
    font-size: 18px; /* 文字サイズを大きくする */
    padding: 10px 20px; /* 内側の余白を増やしてボタンを大きくする */
    width: 200px; /* ボタンの幅を指定 */
    height: 50px; /* ボタンの高さを指定 */
}

#subscription-search-button:hover {
    background-color: #6cf; /* ホバー時の背景色 */
}


/* -----------------------------
	検索結果テーブルのセルを左寄
----------------------------- */

.result-table td {
    text-align: left;
    padding: 8px;
}


/* -----------------------------
	予約一覧表テーブルのセル幅など
----------------------------- */

.users-check {
    width: 50px !important;
}

.users-number {
	width: 60px !important;
	text-align:center !important; 
    padding: 5px;
}

.users-number-td{
	text-align:center !important; 
}

.users-booking-id {
    width: 120px;
	text-align:center !important; 
}

.users-name {
    width: 130px;
	text-align:center !important; 
}

.users-address {
    width: 290px;
	text-align:center !important; 
}

.users-tel {
    width: 130px;
	text-align:center !important; 
}

.users-date {
    width: 110px;
	text-align:center !important; 
}

.users-time {
    width: 140px;
	text-align:center !important; 
}


/* -----------------------------
	予約一覧を印刷するボタン
----------------------------- */

.print-button, .print-button2 {
	margin:20px 0 30px 40px !important;
    background-color: #ff80ab; 
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px; 
    font-size: 18px;
    font-family: 'Comic Sans MS', cursive, sans-serif; 
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
}

/* ホバー時の効果 */
.print-button:hover, .print-button2:hover {
    background-color: #ff4081; /* ホバー時に少し暗くなる */
    transform: translateY(-2px);
}

/* ボタンを押した時の効果 */
.print-button:active, .print-button2:active {
    transform: translateY(1px);
}

/* ボタンの影をつけて立体的に */
.print-button:focus, .print-button2:focus {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.pagination-buttons-memo{
	color:#f00;
}


/* -----------------------------
	月別集計表を印刷ボタン、日別集計表を印刷ボタン
----------------------------- */

.syukei4 button, .syukei5 button {
	margin:0 0 30px 40px !important;
    background-color: #ff80ab; 
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px; 
    font-size: 18px;
    font-family: 'Comic Sans MS', cursive, sans-serif; 
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
}

/* ホバー時の効果 */
.syukei4 button:hover, .syukei5 button:hover {
    background-color: #ff4081; /* ホバー時に少し暗くなる */
    transform: translateY(-2px);
}

/* ボタンを押した時の効果 */
.syukei4 button:active, .syukei5 button:active {
    transform: translateY(1px);
}

/* ボタンの影をつけて立体的に */
.syukei4 button:focus, .syukei5 button:focus {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* -----------------------------
	日別集計表を表示ボタン
----------------------------- */

.toggle-btn{
	background-color: #c90; /* 緑色の背景 */
    margin: 10px 0 0 40px;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
	transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時の変化をスムーズに */
}

.toggle-btn:hover {
	background-color: #c90; 
	transform: scale(1.05); /* 少し拡大する */
}

/* ボタンがクリックされたとき */
.toggle-btn:active {
	transform: scale(0.98); /* クリック時に少し縮小 */
}


/* -----------------------------
	各申請書印刷ボタン
----------------------------- */


.print-btn, .print-all-btn, .toggleBtn, .toggleBtn2 {
    background: #218838;
	margin:0 0 30px 40px !important;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px; 
    font-size: 18px;
    font-family: 'Comic Sans MS', cursive, sans-serif; 
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
}


.print-btn:hover {
    background: #28a745 ;
    transform: translateY(-2px);
}

.print-btn:hover:active {
    transform: translateY(1px);
}

/* ボタンの影をつけて立体的に */
.print-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.toggleBtn, .toggleBtn2 {
    background: #39bfff;
}

.toggleBtn:hover, .toggleBtn2:hover {
    background: #69f ;
    transform: translateY(-2px)
}

.toggleBtn:hover:active, .toggleBtn2:hover:active {
    transform: translateY(1px);
}

/* ボタンの影をつけて立体的に */
.toggleBtn:hover, .toggleBtn2:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.print-all-btn {
    background: #f60;
}

.print-all-btn:hover {
    background: #f96;
    transform: translateY(-2px);
}

.print-all-btn:hover:active {
    transform: translateY(1px);
}

/* ボタンの影をつけて立体的に */
.print-all-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



.pagination-buttons {
    text-align: center;
    margin: 20px 0;
}
.pagination-buttons button {
    padding: 10px;
    font-size: 16px;
    margin: 0 5px;
}



/* 日別予約一覧を印刷するときは個別予約を非表示 */
/*
.hide-individual .reservation-page,
.hide-individual .pagination-buttons,
.hide-individual .print-btn {
    display: none !important;
}
*/

/* 個別予約を印刷するときは一覧を非表示 */
/*
.hide-list #daily-reservations,
.hide-list .print-button {
    display: none !important;
}
*/


/* -----------------------------
	戻るボタン
----------------------------- */

.close-btn {
    background-color: #f99; 
    color: white; 
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.return-btn:hover {
    background-color: #fcf; 
}


/* -----------------------------
	閉じるボタン
----------------------------- */

.close-btn {
    background-color: #f99; 
    color: white; 
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
	border-radius: 8px;
}

.close-btn:hover {
    background-color: #fcf; 
}


/* -----------------------------
	規約ページの閉じるボタン
----------------------------- */

.close-btn02{
    background-color: #f99; 
    color: white; 
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
	border-radius: 8px;
}

.close-btn02:hover {
    background-color: #fcf;
	color:#666;
}


/* -----------------------------
	スマホ画面用で↑職員側でキャンセル実行後は必ずクリック（更新）を見えないように
----------------------------- */

	@media (max-width: 768px) {
	    .zenken2 {
	        display: none; /* スマホの画面幅以下でこの要素を非表示 */
	    }
	}


/* -----------------------------
	スマホ画面用で月別集計表の整理番号の幅を狭く
----------------------------- */

/* スマホ画面用で月別集計表の整理番号の幅を狭く */
@media screen and (max-width: 768px) { 
    th[style*="width:150px"] {
        width: 50px !important;
    }
}


/* -----------------------------
	日別集計表
----------------------------- */

.summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.summary-table th,
.summary-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.summary-table th {
    background-color: #f0f0f0;
}

.summary-table tfoot th {
    font-weight: bold;
    background-color: #ddd;
}


/* -----------------------------
	日別集計表
----------------------------- */

dl.kiyaku dt {
        font-weight: bold;
        margin-top: 55px;
        font-size: 1.4em;
        color: #06c;
        display: flex;
        align-items: center;
    }

dl.kiyaku dd {
        margin: 5px 0 15px 10px;
        font-size: 1.2em;
		line-height: 2; 
        color: #111;
        padding-left: 10px;
        background: #fff2ff;
        padding: 8px;
		border:none;
    }
    


/* -----------------------------
	改行
----------------------------- */

.hidden {
	display: none;
}

.hidden.pcBlock {
	display: inline;
}

@media screen and (max-width: 768px) {
	.hidden.pcBlock {
		display: none;
	}

	.hidden.spBlock {
		display: inline;
	}
}


/* -----------------------------
	規約に同意しますのチェックボックスを大きく
----------------------------- */

#terms-accedence {
    transform: scale(1.5); /* 1.5倍に拡大 */
    margin-right: 5px; /* 余白を調整 */
}


/* -----------------------------
	ID検索領域
----------------------------- */

#search-container {
    background: #f8f9fa;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
}

#searchInput {
    padding: 8px;
    width: 200px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-btn {
    background: linear-gradient(135deg, #5a7be2, #9263d9);
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.search-btn:hover {
    background: linear-gradient(135deg, #4a69bd, #6a5acd);
}

#search-result {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.result-table th {
    background: #007bff;
    color: white;
    padding: 8px;
}

.result-table td {
    padding: 8px;
    border: 1px solid #ddd;
}


/* -----------------------------
	全件一覧表示のページネーションボタン
----------------------------- */

.pagination {
    text-align: center; /* テキストを中央寄せ */
    margin: 20px auto; /* 上下に余白を追加して中央配置 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    width: 100%; /* 親要素の幅を100%に */
}

.memo3 {
    text-align: center;
	font-size:90%;
	color:#f00;
	margin-top:-20px;
}

.prev-btn, .next-btn {
    display: inline-block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
}

.prev-btn:hover, .next-btn:hover {
    background-color: #005177;
    text-decoration: none;
	color:#fff;
}

.current-page {
    font-weight: bold;
    margin: 13px 10px 0;
}

.pagination a {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    text-decoration: none;
    background-color: #0073aa; /* ボタンの背景色（WordPress風） */
    color: #fff;
    border-radius: 5px;
}
.pagination a:hover {
    background-color: #005177; /* ホバー時の色 */
}
.current-page {
    font-weight: bold;
    margin: 0 10px;
}



/* 数字ページリンクを中央寄せのブロック要素に */
.page-number {
  display: inline-block;  /* または inline */
  padding: 4px 8px;
  margin: 0 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.current-page-number {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  border-color: #007bff;
}




/* -----------------------------
	印刷非表示箇所
----------------------------- */

@media print {
    /* ヘッダー、フッターを非表示に */
    header, footer {
        display: none !important;
    }

    .zenken {
        display: none !important;
    }

    /* 印刷時にページ内の他の内容（body部分）を表示 
    body {
        visibility: visible;
    }
	*/

    body {
        visibility: hidden;
    }

    /* body内の不要な要素も非表示にする場合 */
    body {
        visibility: visible !important;
    }

    /* body内のスクロールバーを非表示にする場合 */
    body, scrollable-table-container {
        overflow-x: hidden !important;  /* 横スクロールバーを非表示にする */
        overflow-y: hidden !important;  /* 縦スクロールバーを非表示にする */
    }

	body.syukei1,body.syukei2{
        display: none !important;
	}

    html, body {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

	.tukibetusyuukeiyou {
        display: none !important;
	}

/* 月別集計表　戻るボタン
	.close-btn {
        display: none !important;
	}
*/
	.syukei4 {
        display: none !important;
	}

	.toggle-btn {
        display: none !important;
	}

	.syukei5 {
        display: none !important;
	}

	.print-button{
        display: none !important;
	}

	.print-button2{
        display: none !important;
	}

	.shinseisyo-hyouji{
        display: none !important;
	}

	.print-btn{
        display: none !important;
	}

    .pagination-buttons {
        display: none !important;
    }

	.prev-btn, .current-page, .next-btn {
        display: none !important;
    }

    .reservation-page {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
    }

	.memo, .memo2, .memo3, .pagination-buttons-memo {
        display: none !important;
	}

    .print-button {
        margin-bottom: 50mm !important; /* 印刷時に50mmの余白を追加 */
    }

	/* 印刷時に各ページで改ページする */
	.booking-table tr {
		page-break-inside: avoid; /* 行の途中で改ページしない */
	}

    .booking-table tr:nth-child(10n) {
        page-break-after: always; /* 10行ごとに改ページ */
    }

    .hide-print .mtssb-users2-1,
    .hide-print .hibetu-btn,
    .hide-print .tukibetu {
        display: none !important;
    }

    .hide-tukibetu .tukibetu {
        display: none;
    }

	/*別集計表を非表示*/
    .hibetu {
        display: none;
    }

    /* 日別予約一覧を印刷する際、 月別集計表を印刷しない */
    .hide-on-print {
        display: none !important;
    }

    #search-container, #search-result {
        display: none !important;
    }
}


/* -----------------------------
	申請書の全件印刷
----------------------------- */

@media print {
    .reservation-page {
        page-break-after: always;
    }
}


/* -----------------------------
	予約情報の詳細　数字ページリンク・ページネーションボタン
----------------------------- */

.page-number-btn {
    padding: 6px 12px;
    margin: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* ホバー時（ただし現在のページではない） */
.page-number-btn:hover:not(.current-page-number) {
    background-color: #e5f3ff;
}

/* 現在ページの見た目 */
.page-number-btn.current-page-number {
    background-color: #0073aa !important;
    color: #fff !important;
    font-weight: bold;
    border-color: #0073aa;
}

/* フォーカス時に白くならないように */
.page-number-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}




/* 電話番号クリック
---------------------------- */

@media(min-width: 768px){
	a[href^="tel:"]{
  	  pointer-events: none;
	}
}

/* headに記述も忘れずに
<!--電話リンクsafariやEdgg無効-->
<meta name="format-detection" content="telephone=no">
*/


/* フッター電話番号
---------------------------- */

@media(max-width:700px){
	.footer_tel{
		margin:20px 0 0 20px;
		text-align:left !important;
		font-size:110%;
	}
}


/* 休日等ごみ搬入
---------------------------- */

@media only screen and (min-width: 768px) {

	.banner02{
		display: none; !important;
	}
}