/* PCでのロゴの最大高さを指定 */
.custom-logo-link img, .site-header-logo img {
    max-height: 70px; /* 例：50pxに縮小 */
    width: auto;
}

/* スマホ（タブレット）画面でのロゴサイズを調整する場合 */
@media (max-width: 768px) {
    .custom-logo-link img, .site-header-logo img {
        max-height: 50px; /* 例：35pxに縮小 */
    }
}

/* イベントページ */
@media screen and (max-width: 74.99em){
    .hp-template--listing-view-page .hp-listing__attribute iframe{
        width: 100%;
          height: auto;
          aspect-ratio: 16 / 9;
    }   
}

/*リストブロック*/
@media screen {
    .hp-listing--view-block .hp-listing__attribute iframe{
          width: 100%;
          height: auto;
          aspect-ratio: 16 / 9;
    }   
}

/*ロゴフォント ヘッダー*/
.header-logo__name {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
}

/*カレンダーボタン
.calendar{
  display: block;
  width: 100%;
  height: auto;
  padding: 10px,10px;
  margin: auto;
  background: #FFC61A;
  color: #FFF;
  text-decoration: none;
  text-align: center;
}
.calendar:hover{
  background: #FFCA2B;
  color: #FFF;
}
*/

/*メニューのユーザー名を非表示にする*/
/*追加cssに記載*/
.hp-menu__item--user-account span {
    font-size: 0 !important;
    color: transparent !important;
    display: none !important;
}

/*カレンダーUI*/
/* PC・スマホ共通：テーブル全体の横幅を画面（親要素）ぴったりにする */
.hp-timetable-table {
    width: 100% !important;
    table-layout: fixed !important; /* 列の幅をパーセントで固定する */
    border-collapse: collapse !important;
}

/* PC・スマホ共通：「日時」の列の幅を16%にする */
.hp-timetable-table th.col-time,
.hp-timetable-table td.cell-time {
    width: 16% !important;
    text-align: center !important;
    padding: 10px 0 !important; /* 上下の余白 */
}

/* PC・スマホ共通：残り7日間の幅をすべて均等（12%ずつ）にする */
.hp-timetable-table th:not(.col-time),
.hp-timetable-table td:not(.cell-time) {
    width: 12% !important; /* 12% × 7日間 = 84% */
    text-align: center !important;
    padding: 10px 0 !important; /* 上下の余白 */
}

/* PC・スマホ共通：日付と曜日のデザイン調整 */
.hp-timetable-table th {
    line-height: 1.3 !important;
}
.hp-timetable-table th span.day {
    display: block !important; /* 曜日を次の行に落とす */
    margin-top: 2px;
}

/* PC・スマホ共通：「○」や「✕」の記号の調整 */
.hp-timetable-table .cell-available,
.hp-timetable-table .cell-low-availability,
.hp-timetable-table .cell-unavailable {
    font-weight: bold !important;
    line-height: 1 !important;
}

/* カレンダー最下行のセルの下側余白を増やす */
.hp-timetable-table tr:last-child td {
    padding-bottom: 40px !important; /* 元の10pxから30pxに拡大 */
}

/* ===========================================
   【新設】PC版だけのスタイル（文字を薄く・細くする）
=========================================== */
@media screen and (min-width: 481px) {
    /* 「日時」の文字を薄く・通常の細さに */
    .hp-timetable-table th.col-time {
        color: #888888 !important;
        font-weight: normal !important;
    }

    /* 各曜日の「日付（数字）」を薄く・スマートな細さに */
    .hp-timetable-table th {
        color: #777777 !important;
        font-weight: 500 !important;
    }

    /* 「曜日（土日など）」の文字をさらに一歩薄く・通常の細さに */
    .hp-timetable-table th span.day {
        color: #999999 !important;
        font-weight: normal !important;
    }

    /* 「2026年 6月」のフォントを曜日の上の日付と統一する */
    .hp-timetable-current-month {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 500 !important; /* 日付と同じ太さにする */
        color: #666666 !important;  /* 【変更】濃い黒から落ち着いた灰色に変更 */
        font-size: 16px !important;  /* 見出しとして見やすい大きさに調整 */
        letter-spacing: 0.05em !important;
    }

    /* 「前の週へ」「次の週へ」の文字を濃く・太くする */
    .hp-timetable-nav a.hp-timetable-nav-btn {
        color: #222222 !important;     /* 濃い黒色に変更 */
        font-weight: 400 !important;   /* 文字を太くする */
        font-size: 13px !important;    /* 文字のサイズ（必要に応じて調整してください） */
    }

    /* （参考）過去の週など、クリックできない状態の「前の週へ」の薄さも少し濃くしたい場合 */
    .hp-timetable-nav span.hp-timetable-nav-btn {
        color: #aaaaaa !important;     /* 押せないときは少し薄いグレーに */
        font-weight: 400 !important;
    }
}

/* -------------------------------------------
   スマホ画面（横幅が狭いとき）だけの微調整
------------------------------------------- */
@media screen and (max-width: 480px) {
    /* 1. カレンダー外枠の余白調整（位置を左に補正して左右均等に） */
    .hp-timetable-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: -23px !important;  /* 【修正】-20pxから-23pxにして左側に少し引っ張る */
        margin-right: -17px !important; /* 【修正】-20pxから-17pxにして右側に余白を作る */
        width: calc(100% + 40px) !important; 
    }

    .hp-timetable-responsive {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important; /* はみ出しを防ぐ */
    }

    /* 2. 日時の列幅を16%から14%に縮小 */
    .hp-timetable-table th.col-time,
    .hp-timetable-table td.cell-time {
        width: 14% !important; 
        font-size: 13px !important; 
        font-weight: 550 !important;
        padding: 5px 0 !important;
    }

    /* 3. 残りの曜日列を12%から12.2%に微調整（合計100%） */
    .hp-timetable-table th:not(.col-time),
    .hp-timetable-table td:not(.cell-time) {
        width: 12.2% !important; 
        padding: 5px 0 !important;
    }

    /* 4. 日付・曜日の文字サイズをさらに大きく、クッキリさせる */
    .hp-timetable-table th {
        font-size: 13px !important; 
        font-weight: 550 !important; /* スマホで見やすいよう太さを維持（200から変更） */
        color: #666666 !important;  /* 【変更】濃い黒から落ち着いた灰色に変更 */
        line-height: 1.2 !important;
        vertical-align: bottom !important; 
    }
    .hp-timetable-table th span.day {
        display: block !important;
        font-size: 14px !important; 
        font-weight: 400 !important; /* スマホで見やすいよう太さを維持（400から変更） */
        margin-top: 3px !important;  
    }

    /* 5. 「○」や「✕」の記号をさらに大きく、押しやすく */
    .hp-timetable-table .cell-available,
    .hp-timetable-table .cell-low-availability,
    .hp-timetable-table .cell-unavailable {
        font-size: 20px !important; 
        font-weight: 900 !important;  
        line-height: 1 !important;
    }

    /* 「2026年 6月」のフォントを曜日の上の日付と統一する */
    .hp-timetable-current-month {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 500 !important; /* 日付と同じ太さにする */
        color: #666666 !important;  /* 【変更】濃い黒から落ち着いた灰色に変更 */
        font-size: 16px !important;  /* 見出しとして見やすい大きさに調整 */
        letter-spacing: 0.05em !important;
    }

    /* 「前の週へ」「次の週へ」の文字を濃く・太くする */
    .hp-timetable-nav a.hp-timetable-nav-btn {
        color: #222222 !important;     /* 濃い黒色に変更 */
        font-weight: 400 !important;   /* 文字を太くする */
        font-size: 13px !important;    /* 文字のサイズ（必要に応じて調整してください） */
    }

    /* （参考）過去の週など、クリックできない状態の「前の週へ」の薄さも少し濃くしたい場合 */
    .hp-timetable-nav span.hp-timetable-nav-btn {
        color: #aaaaaa !important;     /* 押せないときは少し薄いグレーに */
        font-weight: 400 !important;
    }
}