body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

.calendar-container {
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* ヘッダー */
.calendar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    text-align: center;
}

.kanteishi-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.kanteishi-photo {
    width: 80px;
    height: 96px; /* 300:360の比率に合わせる */
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover; /* 縦横比を保って切り抜き */
   border: 3px solid rgba(255,255,255,0.3);
}

.service-selected {
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
}




.no-kanteishi {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 10px;
    color: #666;
}

.week-group {
    margin-bottom: 10px;
}

.week-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.week-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.date-btn {
    font-size: 11px;
    padding: 4px 8px;
}


/* ナビゲーション */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.nav-buttons {
    display: flex;
    gap: 10px;
}

.nav-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.nav-btn:hover {
    background: #5a6268;
}

.nav-btn.active {
    background: #007bff;
}

.controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.controls select, .controls input {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}


/* 店舗名の小さい表示 */
.tenpo-small {
    font-size: 9px;
    opacity: 0.9;
    line-height: 1;
}

/* 7日間出勤日表示用のスタイル */
.workdays-view {
    display: grid;
    grid-template-columns: 80px repeat(var(--day-columns, 7), 1fr);
    grid-template-rows: 50px repeat(var(--time-slots), 60px);
    min-height: 600px;
}

/* 出勤日がない場合のメッセージ */
.no-schedule {
    text-align: center;
    font-size: 18px;
    color: #666;
    padding: 50px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}
  
/* カレンダーセルの調整 */
.calendar-cell.available {
    background: rgba(40, 167, 69, 0.05);
    cursor: pointer;
}

.calendar-cell.available:hover {
    background: rgba(40, 167, 69, 0.15);
}

/* 今日ボタンを削除したためのナビゲーション調整 */
.calendar-nav .nav-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* タイトルの調整 */
#period-title {
    text-align: center;
    margin: 15px 0;
    word-spacing: 150%;
    font-weight: 100;
    font-size: 14px;
    padding:6px 8px 5px 40px ;
    border-radius:3% ;
    color: #fff;
}

/* 時間スロットのスタイル修正 */
.time-slot {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 2px 5px; /* 高さを縮小 */
    font-size: 12px; /* デフォルトサイズを小さく */
    text-align: center;
    color: #333;
    font-weight: 400; /* 少し薄く */
    position: relative;
}

/* 0分の時間スロット（大きく・太く） */
.time-slot.hour-start {
    font-size: 14px;
    font-weight: 600;
    border-top: 2px solid #666; /* 上罫線を濃く */
}

/* カレンダーセルの高さも縮小 */
.week-view {
    grid-template-rows: 50px repeat(var(--time-slots), 16px); /* 20px → 16px */
}

.calendar-cell {
    min-height: 16px;
}

/* 利用可能時間の店舗名表示 */
.available-info {
    font-size: 8px;
    color: #666;
    opacity: 0.7;
    line-height: 1;
    text-align: center;
    padding: 1px;
}

.tenpo-small {
    font-size: 8px;
    opacity: 0.7;
    line-height: 1;
}


/* 時間スロットの全体的なスタイル修正 */
.time-slot {
    background: #f8f9fa;
    border-right: 1px solid #e9ecef; /* 薄くする */
    border-bottom: 1px solid #f0f0f0; /* さらに薄く */
    padding: 2px 5px;
    font-size: 12px;
    text-align: center;
    color: #666; /* 少し薄く */
    font-weight: 400;
    position: relative;
}

/* 0分の時間スロット（さりげなく強調） */
.time-slot.hour-start {
    font-size: 13px; /* 14px → 13px に控えめに */
    font-weight: 500; /* 600 → 500 に控えめに */
    border-top: 1px solid #ccc; /* 2px #666 → 1px #ccc にさりげなく */
    color: #333; /* 少し濃く */
}

/* カレンダーセル全体に罫線 */
.calendar-cell {
    min-height: 16px;
    border-right: 1px solid #f0f0f0; /* 全域に薄い線 */
    border-bottom: 1px solid #f0f0f0; /* 全域に薄い線 */
    position: relative;
}

/* 利用可能時間の店舗名表示 */
.available-info {
    font-size: 9px; /* 8px → 9px に少し大きく */
    color: #888; /* #666 → #888 に少し見やすく */
    opacity: 0.8; /* 0.7 → 0.8 に少し濃く */
    line-height: 1.2;
    text-align: center;
    padding: 1px;
}

.tenpo-small {
    font-size: 8px;
    opacity: 0.8; /* 少し見やすく */
    line-height: 1.1;
    position: absolute;
    top: 2px;
    right: 2px; 
     padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    z-index: 2;
  }
  
  /* --- 店舗別カラー定義 --- */
  .tenpo-4  { color: #fff; background: #6c9; border-color: #6c9; }   /* 伊勢佐木 */
  .tenpo-28 { color: #fff; background: #c96; border-color: #c96; }   /* 大久保 */
  .tenpo-38 { color: #fff; background: #69c; border-color: #69c; }   /* 上野 */
  .tenpo-51 { color: #fff; background: #999; border-color: #999; }   /* リモート */
  .tenpo-53 { color: #fff; background: #c66; border-color: #c66; }   /* 自由が丘 */
  .tenpo-58 { color: #fff; background: #996; border-color: #996; }   /* 御徒町 */
  .tenpo-60 { color: #fff; background: #6c6; border-color: #6c6; }   /* 浅草 */
  .tenpo-66 { color: #fff; background: #66c; border-color: #66c; }   /* 神田 */
  .tenpo-67 { color: #fff; background: #c6c; border-color: #c6c; }   /* 浅草駅前 */
  .tenpo-72 { color: #fff; background: #cc6; border-color: #cc6; }   /* 広小路 */
  .tenpo-73 { color: #fff; background: #c33; border-color: #c33; }   /* 自由が丘南口 */
  .tenpo-83 { color: #fff; background: #36c; border-color: #36c; }   /* すしや通り */
  .tenpo-86 { color: #fff; background: #3c9; border-color: #3c9; }   /* 白山 */
  .tenpo-36 { color: #fff; background: #666; border-color: #666; }   /* (店舗名未設定) */
  

.event {
    font-size: 9px; /* さらに小さく */
    padding: 1px 3px;
    line-height: 1.1;
}

/* カレンダーグリッド */
.calendar-grid {
    position: relative;
}

/* 週表示 */
.week-view {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    grid-template-rows: 50px repeat(var(--time-slots), 60px);
    min-height: 600px;
}

.time-header {
    background: #667eea;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.day-header {
    background:hsl(156deg 27% 67%);
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
    font-weight: 500;
}

.time-slot {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 5px;
    font-size: 14px;
    text-align: center;
    color: #333;
    font-weight: 500;
}

.calendar-cell {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    cursor: pointer;
}

.calendar-cell:hover {
    background: #e3f2fd;
}

.calendar-cell.available {
    background: rgba(76, 175, 80, 0.1);
}

.calendar-cell.available:hover {
    background: rgba(76, 175, 80, 0.2);
}

/* 過去日付は濃い斜線 */
.calendar-cell.past-date {
    background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 5px, #ddd 5px, #ddd 10px);
    cursor: not-allowed;
    opacity: 0.9;
}

/* 出勤なし・未設定は薄い斜線 */
.calendar-cell.off-duty {
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 5px, #eee 5px, #eee 10px);
    cursor: not-allowed;
    opacity: 0.7;
}

/* 予約表示 */
.event {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    overflow: hidden;
    cursor: pointer;
}

 


.event.reserved:hover
,.calendar-cell.reserved:hover
,.calendar-cell.interval:hover
{
    cursor: not-allowed;
}


.event.temp-reserved {
    background: #fd7e14;
}

.event.interval {
    background: #6c757d;
}

/* 日表示 */
.day-view {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: repeat(var(--time-slots), 40px);
    min-height: 800px;
}

.day-view .calendar-cell {
    height: 40px;
}

/* 予約確認モーダル */
.booking-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: left;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
}

.modal-content h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 18px;
}

.modal-content label {
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.modal-content select {
    background: white;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .week-view {
        grid-template-columns: 60px repeat(7, 1fr);
        font-size: 12px;
    }
    
    .day-header {
        padding: 5px;
        font-size: 12px;
    }
    
    .controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .calendar-nav {
        flex-direction: column;
        gap: 15px;
    }
}

/* 出勤日表示用の追加スタイル */
.workdays-view {
    display: grid;
    grid-template-columns: 80px repeat(var(--day-columns, 7), 1fr);
    grid-template-rows: 50px repeat(var(--time-slots), 60px);
    min-height: 600px;
}

.no-schedule {
    text-align: center;
    font-size: 18px;
    color: #666;
    padding: 50px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}


/* 予約可能・不可のマーク */
.available-mark {
    font-size: 20px;
    font-weight: bold;
    color: #28a745;
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 20px;
}

.unavailable-mark {
    font-size: 18px;
    font-weight: bold;
    color: #dc3545;
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 20px;
}

/* 店舗名表示 */
.tenpo-small {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 2px;
}

/* 予約済みのスタイル - 薄い青に変更 */
.event.reserved-light {
    background: #b3d9ff;
    color: #333;
    border: 1px solid #4da6ff;
}

.event.reserved {
    background: #dc3545;
}


/* 出勤日表示用の追加スタイル */
.workdays-view {
    display: grid;
    grid-template-columns: 80px repeat(var(--day-columns, 7), 1fr);
    grid-template-rows: 50px repeat(var(--time-slots), 60px);
    min-height: 600px;
}

.no-schedule {
    text-align: center;
    font-size: 18px;
    color: #666;
    padding: 50px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}
  
/* 店舗名表示 */
.tenpo-small {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 2px;
}

/* 予約済みのスタイル - 薄い青に変更 */
.event.reserved-light {
    background: #b3d9ff;
    color: #333;
    border: 1px solid #4da6ff;
}

.event.reserved {
    background: #dc3545;
}


/* 予約状況の説明 */
.legend {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.legend h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.legend-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-symbol {
    font-size: 18px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.legend-symbol.available {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.legend-symbol.unavailable {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.legend-symbol.partial, .partial-mark {
    color: rgb(217, 244, 68); 
}

.partial-mark {
    font-size: 20px;
    font-weight: bold;
    color: rgb(217, 244, 68); 
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 20px;
}



.legend-text {
    font-size: 14px;
    color: #333;
}

.week-view, .workdays-view {
    grid-template-columns: 60px repeat(var(--day-columns, 7), 1fr);
    font-size: 12px;
}



/* =========================
   新機能追加CSS（ここから追加）
   ========================= */

/* 曜日ヘッダーの色分け */
.day-header.sunday {
    background: #ffe6e6 !important;
    color: #cc0000 !important;
}

.day-header.saturday {
    background: #e6f7ff !important;
    color: #0066cc !important;
}

/* 店舗名ヘッダー */
.tenpo-header {
    font-size: 10px;
    color: #666;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    padding: 2px 4px;
    margin-top: 2px;
}

.tenpo-header:hover {
    background: rgba(255, 255, 255, 1);
    color: #333;
}

/* 時間帯による背景色 */
.time-slot.morning-time {
    background: #fff3e0 !important;
    color: #e65100 !important;
}

.time-slot.evening-time {
    background: #e8eaf6 !important;
    color: #283593 !important;
}

/* セルの時間帯背景 */
.calendar-cell.morning-cell {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="8" fill="%23ffcc80" opacity="0.3"/></svg>');
    background-size: 50px 50px;
}
 
/* 部分的予約可能 */
.partial-mark {
    font-size: 20px;
    font-weight: bold;
    color: #ffc107;
    display: block;
    text-align: center;
    line-height: 1;
}

.calendar-cell.partial-available {
    background: rgba(255, 193, 7, 0.1);
    cursor: pointer;
}

.calendar-cell.partial-available:hover {
    background: rgba(255, 193, 7, 0.2);
}

/* 凡例に部分利用可能を追加 */
.legend-symbol.partial {
    color: #ffc107;
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}

/* 今 表示ボタン */
.nav-btn#now-btn {
    background: #ff6b35 !important;
    color: white !important;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
}

.nav-btn#now-btn:hover {
    background: #ff5722 !important;
}


/* 店舗名を小さく表示（レイアウト破綻防止） */
.tenpo-mini {
    font-size: 7px;
    color: #666;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    padding: 1px 2px;
    margin-left: 2px;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
}

.tenpo-mini:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: underline;
}
 
/* 店舗行を含むグリッド */
.workdays-view-with-tenpo {
    display: grid;
    grid-template-columns: 80px repeat(var(--day-columns, 7), 1fr);
    grid-template-rows: 50px 40px repeat(var(--time-slots), 60px); /* 店舗行40px追加 */
    min-height: 600px;
}

/* 店舗ラベル */
.tenpo-label {
    background: #e9ecef;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 店舗セル */
.tenpo-cell {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 5px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tenpo-cell:hover {
    background: #e9ecef;
}

/* 鑑定士セル（店舗検索モード用） */
.kanteishi-cell {
    background: #fff3cd;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 3px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kanteishi-cell:hover {
    background: #ffeaa7;
}

.mini-photo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2px;
}

.mini-name {
    font-size: 8px;
    line-height: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 店舗別カラー（店舗セル用） */
.tenpo-cell.tenpo-4  { color: #fff !important; background: #6c9 !important; }
.tenpo-cell.tenpo-28 { color: #fff !important; background: #c96 !important; }
.tenpo-cell.tenpo-38 { color: #fff !important; background: #69c !important; }
.tenpo-cell.tenpo-51 { color: #fff !important; background: #999 !important; }
.tenpo-cell.tenpo-53 { color: #fff !important; background: #c66 !important; }
.tenpo-cell.tenpo-58 { color: #fff !important; background: #996 !important; }
.tenpo-cell.tenpo-60 { color: #fff !important; background: #6c6 !important; }
.tenpo-cell.tenpo-66 { color: #fff !important; background: #66c !important; }
.tenpo-cell.tenpo-67 { color: #fff !important; background: #c6c !important; }
.tenpo-cell.tenpo-72 { color: #fff !important; background: #cc6 !important; }
.tenpo-cell.tenpo-73 { color: #fff !important; background: #c33 !important; }
.tenpo-cell.tenpo-83 { color: #fff !important; background: #36c !important; }
.tenpo-cell.tenpo-86 { color: #fff !important; background: #3c9 !important; }
.tenpo-cell.tenpo-36 { color: #fff !important; background: #666 !important; }


/* 夜の星の装飾を削除（コメントアウト） */
/*
.calendar-cell.evening-cell {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="20,15 25,25 35,25 27,32 30,42 20,37 10,42 13,32 5,25 15,25" fill="%23b39ddb" opacity="0.3"/></svg>');
    background-size: 60px 60px;
}
*/

/* 店舗ラベルを固定ヘッダー化 */
.tenpo-label {
    background: #e9ecef;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 50px; /* 日付ヘッダーの下に固定 */
    z-index: 5;
}

/* 日付ヘッダーも固定 */
.day-header {
    position: sticky;
    top: 0;
    z-index: 6;
}

.time-header {
    position: sticky;
    top: 0;
    z-index: 7;
}

/* 店舗検索モード時のヘッダー調整 */
.day-header.shop-mode {
    font-size: 11px;
    line-height: 1.2;
}

.modal-content h3{
    color: #FFF!important;
    margin-bottom: 15px;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 40px;
    
    letter-spacing: 0.15em; /* ← これで文字間を少し広げる */
}

h3{
    color: #EEE!important;

}



  /* 検索フォームのスタイル */
  .search-form {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.search-field {
    flex: 1;
    min-width: 200px;
}

.search-field.date-buttons {
    min-width: 400px;
}

.search-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

/* 共通ボタンスタイル */
.button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.filter-btn {
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    border: 2px solid;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.filter-btn.active {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 日付ボタン（緑色） */
.date-btn {
font-size: 11px;
padding: 4px 8px;
}

.narrow {
flex: 0 0 120px;
}
.date-btn:hover, .date-btn.active {
    background: #28a745;
    color: white;
}

/* 占いの型ボタン（青色） */
.uranai-btn {
    border-color: #007bff;
    color: #007bff;
}

.uranai-btn:hover, .uranai-btn.active {
    background: #007bff;
    color: white;
}

/* 店舗ボタン（オレンジ色） */
.tenpo-btn {
    border-color: #fd7e14;
    color: #fd7e14;
}

.tenpo-btn:hover, .tenpo-btn.active {
    background: #fd7e14;
    color: white;
}

/* 鑑定士カードのスタイル */
.kanteishi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.kanteishi-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.kanteishi-card:hover {
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px;
    text-align: center;
}

.date-badge {
    background: rgba(255,255,255,0.9);
    color: #667eea;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.tenpo-badge {
    background: rgba(255,255,255,0.2);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.card-body {
    padding: 15px;
}

.next-time {
    color: #ff6b35;
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 20px;
}

.book-btn {
    width: 100%;
    padding: 10px;
    background: #ff6b35;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.book-btn:hover {
    background: #e55a2b;
}

.no-kanteishi {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 10px;
    color: #666;
}


/* -----------------------------
  元の見た目を保ちつつ“高さだけ”詰める最終版
  ページ末尾にそのまま貼る（重要：既存CSSより後）
   - 色/影/角丸は残す
   - 高さ・上下余白をコンパクト化
  ----------------------------- */

/* ---------- NAV（上部） ---------- */
body ul.head_menu_yoyaku,
ul.head_menu_yoyaku {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;            /* やや詰める */
  padding: 6px 10px !important;    /* 高さを抑える */
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* マーカー保険 */
ul.head_menu_yoyaku li::marker { display: none !important; }

/* li は横並び */
ul.head_menu_yoyaku > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ロゴ（トリム済）のサイズ：元より小さめだが視認性を残す */
ul.head_menu_yoyaku > li.head_logo img {
  width: 40px !important;     /* 元より小さく、だけど目立つ */
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 8px 0 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  display: block !important;
  vertical-align: middle !important;
}

/* リンク（ボタン）をコンパクトに。色・角丸・影は残す */
ul.head_menu_yoyaku > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;        /* ← 高さの要 (小さめに) */
  min-height: 36px !important;         /* タップ領域は確保 */
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg,#122e6b 0%, #1f3b8a 100%) !important;
}

/* CTA を右端に寄せ、やや強調 */
ul.head_menu_yoyaku > li.head_bt2 { margin-left: auto !important; }
ul.head_menu_yoyaku > li.head_bt2 > a {
  background: linear-gradient(135deg,#ff6b35 0%, #f79b2b 100%) !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  box-shadow: 0 8px 22px rgba(247,155,43,0.22) !important;
}

/* ホバーは控えめに（高さ感を崩さない） */
ul.head_menu_yoyaku > li > a:hover,
ul.head_menu_yoyaku > li > a:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}

/* ---------- HERO（now-header）を圧縮 ---------- */
/* ヘッダー全体の余白を詰め、横並びで整列 */
.now-header {
  padding: 8px 12px !important;   /* 小さく */
  margin-bottom: 8px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
}

/* 丸アイコン（プロファイル）は中くらいのサイズに */
.now-header img,
.card-header img {
  width: 64px !important;   /* 元より小さめ。必要なら 56px に */
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 !important;
}

/* 名前・サブの文字は元より少し小さくして高さを抑える */
.now-header .kanteishi-name,
.card-header .kanteishi-name {
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.now-header .kanteishi-yomigana,
.card-header .kanteishi-yomigana {
  font-size: 12px !important;
  margin: 0 !important;
}

/* ヒーロー内のバッジ等の余白も詰める */
.now-header .badge,
.now-header .some-badge {
  padding: 4px 8px !important;
  font-size: 12px !important;
}

/* ---------- コンテンツ（カード等）の詰め ---------- */
.now-container, .search-form.open {
  padding: 8px !important;
}

/* カード群のギャップを小さく */
.kanteishi-grid { gap: 10px !important; margin-top: 6px !important; }

/* 各カードの余白を抑える */
.kanteishi-card {
  padding: 8px !important;
  border-radius: 10px !important;
  min-height: auto !important;
}

/* カード内のヘッダ／本文のパディングを小さく */
.card-header { padding: 6px !important; }
.card-body { padding: 8px !important; gap: 8px !important; }

/* カード内画像を適度に小さく */
.card-body img { max-width: 120px !important; }

/* 鑑定メニューのアイコンを詰める */
.classification-image-group > div { gap: 8px !important; }

/* テーブル等の余白も詰める */
table, table td, table th { font-size: 13px !important; padding: 6px 8px !important; }

/* モバイルではさらに少し詰めるが可読性をキープ */
@media (max-width: 420px) {
  ul.head_menu_yoyaku { gap: 6px !important; padding: 6px 8px !important; }
  ul.head_menu_yoyaku > li.head_logo img { width: 36px !important; height: 36px !important; }
  ul.head_menu_yoyaku > li > a { padding: 8px 10px !important; min-height: 36px !important; font-size: 14px !important; }
  .now-header { padding: 6px 8px !important; gap: 8px !important; }
  .now-header img, .card-header img { width: 56px !important; height: 56px !important; }
  .card-body img { max-width: 100px !important; }
}

/* 最終保険：もし古い "非表示" ルールなどが残って見え方が変なら、以下のコメントアウトを外して上書き可能（慎重に） */
/*
li.head_logo { display: inline-flex !important; }
.now-header img:not([src*="logo.png"]) { display: none !important; } 
*/


/* ====== ギャップを即潰す（ページ末尾に追加） ====== */

/* ナビ下の余白を消す（ボタン下の青いすきま対策） */
ul.head_menu_yoyaku {
    margin: 0 !important;
    padding: 4px 8px 0 8px !important; /* 下パディングを 0 に近づける */
    padding-bottom: 0 !important;
    list-style: none !important;
  }
  ul.head_menu_yoyaku::after,
  ul.head_menu_yoyaku::before { display: none !important; }
  ul.head_menu_yoyaku li::marker { display: none !important; }
  
  /* ナビ直後に来る主要コンテナの上マージン／パディングも潰す */
  .now-header,
  .calendar-container,
  .syosai_content,
  #period-title,
  div.calendar-container,
  div.syosai_content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* 今回のページ構造に合うように隣接セレクタも潰す（確実性UP） */
  ul.head_menu_yoyaku + .now-header,
  ul.head_menu_yoyaku + .calendar-container,
  ul.head_menu_yoyaku + div,
  ul.head_menu_yoyaku ~ .now-header,
  ul.head_menu_yoyaku ~ .calendar-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* ヘッダー（ヒーロー）内部の縦余白を半分くらいにする */
  .now-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
    align-items: center !important;
  }
  
  /* ヘッダー内の表示テキストを詰める（行間・余白） */
  .now-header * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
  
  /* 名前やよみがなの余白をさらに小さく */
  .now-header .kanteishi-name,
  .card-header .kanteishi-name {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: calc(100% - 8%) !important; /* 少し小さめに */
  }
  
  .now-header .kanteishi-yomigana,
  .card-header .kanteishi-yomigana {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: calc(100% - 20%) !important;
  }
  
  /* nav 内ボタンの縦余白も抑える（上下を半分に） */
  ul.head_menu_yoyaku > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 32px !important; /* 必要ならここを 28px にするとさらに縮む */
    line-height: 1 !important;
  }
  
  /* カード群／コンテンツの上余白も抑える */
  .kanteishi-grid { margin-top: 6px !important; gap: 8px !important; }
  .now-container, .search-form.open { padding-top: 6px !important; }
  
  /* テーブルやスロット行の上下パディングを縮める */
  table, table td, table th, .time-slot {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  
  /* 万が一、丸め（border-radius）や box-shadow の影が余白に見える場合は
     下のコメントを外して影を小さくできます（慎重に） */
  /*
  ul.head_menu_yoyaku > li > a {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important;
  }
  */
  
  /* ===== 最後の保険：特定要素の高さが消えない場合は DevTools でその要素を特定してください =====
     - 貼ってもまだ消えないときは、DevTools（要素選択）で青いギャップをクリックして、
       どの要素がハイライトされるかのスクショを送ってください。exact selector を見て1行で潰します。
  */
  
/* 選択中ヘッダー */
.day-header.selected-day {
    box-shadow: inset 0 -4px 0 #ffcf33; /* 下線風の強調 */
    border-radius: 4px;
    position: relative;
}

/* 列全体の薄い背景ハイライト */
.calendar-cell.selected-column {
    background-color: rgba(255, 223, 93, 0.08); /* 優しい黄色系の薄色 */
}


.time-slot {
    font-size: 14px!important;
    padding-top: 20px!important; 
    
letter-spacing: 0.1px!important;   /* 0.5px 単位で微調整 */
    text-indent: 0px!important;
}
.time-slot.hour-start {
    font-size: 16px!important;
    font-weight: bold!important;

}

/* 軽いパルスアニメ（強調アニメ） */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 rgba(255,207,52,0); }
  50% { box-shadow: 0 0 18px rgba(255,207,52,0.35); }
  100% { box-shadow: 0 0 0 rgba(255,207,52,0); }
}
.day-header.pulse {
  animation: pulseGlow 1.4s ease-in-out 1;
}

.classification-image-option
{
    width: 100%; max-width: 180px; height: auto; border: 3px solid transparent; border-radius: 8px; transition: all 0.3s;
}
.count-option{
    cursor: pointer; padding: 8px 16px; border: 2px solid #ddd; border-radius: 20px; background: white; transition: all 0.3s; color: #333;
}/* レスポンシブ */
@media (max-width: 768px) {
    .count-option{
        cursor: pointer; padding: 5px 10px; border: 2px solid #ddd; border-radius: 12px; background: white; transition: all 0.3s; color: #333;
        margin-right:0px;
        margin-left:0px;
    }
    /* 店舗行を含むグリッド */
    .workdays-view-with-tenpo {
        grid-template-columns: 40px repeat(var(--day-columns, 7), 1fr);
        
    }
    .time-slot {
        font-size: 12px!important;
        padding-top: 20px!important; 
        
  letter-spacing: -0.5px!important;   /* 0.5px 単位で微調整 */
        text-indent: 0px!important;
    }
    
.classification-image-option img { max-width: 80px !important; }
     
#period-title{
    display: none;
}
.syosai_content{
    padding: 0px!important;
margin: 0px;
width: 100%;;
}
.tenpo-cell{
    line-height: 100%;
    word-spacing: 120%;;
}
.calendar-container{
    padding: 0px!important;
}
.calendar-header{
    padding: 0px!important;
    margin-top: 0px;
}

}
#kanteishi-name{
    color:#FFF; 
    font-size: 18px;
}



/* 電話アプリ告知バナー */
#phone-announcement .pa-banner {
    --bg: linear-gradient(90deg,#ffd37a,#ff9a1f);
    --text: #16324a;
    position: relative;
    box-sizing: border-box;
    max-width: 980px;
    margin: 18px auto;
    padding: 16px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(12,36,60,0.12);
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .34s ease, opacity .34s ease;
  }
  
  /* 表示クラス */
  #phone-announcement .pa-banner.pa-visible {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* 左アイコン */
  #phone-announcement .pa-icon {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
  }
  
  /* 中央テキスト */
  #phone-announcement .pa-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  #phone-announcement .pa-body .pa-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
  }
  #phone-announcement .pa-body .pa-desc {
    font-size: 13px;
    opacity: 0.95;
    line-height: 1.4;
  }
  
  /* 右ボタン群 */
  #phone-announcement .pa-actions-mobile,
  #phone-announcement .pa-actions-pc
  {
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
  }

  #phone-announcement .pa-actions-mobile { display: none;     }
  #phone-announcement .pa-actions-pc {   display: flex; }

  
  /* 詳しく見るボタン */
  #phone-announcement .pa-cta {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.98);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(12,36,60,0.08);
  }
  
  /* 閉じるボタン */
  #phone-announcement .pa-close {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
    color: rgba(12,36,60,0.8);
  }
  
  /* 小さい補助行（次回表示しない用） */
  #phone-announcement .pa-footer {
    margin-top: 8px;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:12px;
    color: rgba(12,36,60,0.85);
  }
  
  /* レスポンシブ */
  @media (max-width:720px){
    #phone-announcement .pa-banner { padding:12px; gap:10px; border-radius:8px; }
    #phone-announcement .pa-icon { width:56px; height:56px; font-size:28px; }
    #phone-announcement .pa-title { font-size:14px; }
    #phone-announcement .pa-cta { padding:7px 10px; font-size:13px; }
    #phone-announcement .pa-actions-mobile { flex-direction: column; display: flex; }
    .pa-icon, #phone-announcement .pa-actions-pc { display: none!important; }
     #phone-announcement .pa-actions-mobile .icon { width:56px; height:56px; font-size:56px;  }
     .pa-close{background-color: #b3d9ff!important;
        border-radius: 8px; font-size:100%!important;}

        .time-slot.hour-start {
            font-size: 16px !important;
            font-weight: bold !important;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .time-slot.evening-time {
            background: 🌙 #e0eaf6 !important;
            color: #283593 !important;
            word-break: break-word;
            overflow-wrap: break-word;
        }
  }

  

  /* ? ボタン */
.phone-help-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    min-width:26px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,0.12);
    background:#fff;
    color:#0b3a57;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    margin-left:8px;
    vertical-align:middle;
    box-shadow: 0 2px 6px rgba(10,30,50,0.06);
    z-index:9999;
  }
  
  /* モーダル */
  .phone-help-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.28); z-index:12000;
  }
  .phone-help-modal {
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    background:#fff; border-radius:10px; padding:14px; z-index:12010;
    box-shadow:0 18px 40px rgba(10,30,50,0.25); min-width:260px; font-family: "Noto Sans JP", sans-serif;
  }
  .phone-help-modal .phm-title{ font-weight:700; margin-bottom:8px; }
  .phone-help-modal .phm-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
  .phone-help-modal .phm-btn{ padding:8px 12px; border-radius:8px; cursor:pointer; border:none; }
  .phone-help-modal .phm-yes{ background:#0b61a4; color:#fff; }
  .phone-help-modal .phm-no{ background:#efefef; color:#111; }
  
 

/* 点滅する通知バッジ（オプション） */
#phone-announcement  .pa-banner::before {
  content:"";
  position:absolute;
    top:20px;left:0px;
  translate: 100% -40%;
  width:10px;height:10px;border-radius:50%;
  background:#ff3953;
  box-shadow:0 0 0 0 rgba(255,57,83,.6);
  animation: ping 1.6s ease-out infinite;
}
#phone-announcement { position: relative; }
@keyframes ping {
  0%   { box-shadow:0 0 0 0 rgba(255,57,83,.6); }
  80%  { box-shadow:0 0 0 12px rgba(255,57,83,0); }
  100% { box-shadow:0 0 0 0 rgba(255,57,83,0); }
}

/* 1回だけ再生したい場合（クラス切替で） */
.play-once { animation-iteration-count: 1; }

/* アニメ苦手な人向け */
@media (prefers-reduced-motion: reduce) {
  .pururun, .play-once { animation: none; }
}