@charset "UTF-8";

/* =========================================================
   RESPONSIVE
========================================================= */

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

  /* ---------- layout ---------- */

  .mainHeader {
    flex-direction: column;
  }

  .siteName {
    width: 100%;
    padding: 10px 0;
  }

  .tabNavigation ul {
    flex-wrap: wrap;
  }

  .tabNavigation li {
    flex: 1 1 33.333%;
  }

  .tabNavigation a {
    font-size: 0.8125rem; /* 13px相当（拡大に対応） */
    min-height: 48px;
    display: flex; /* 縦方向の中央揃え用 */
    align-items: center;
    justify-content: center;
    padding: 5px; /* 文字が増えても上下に広がるようにする */
  }

  .headF-container {
    display: block !important;
  }

  .headF-item {
    width: 100% !important;
  }

  .headF-item:nth-child(2) {
    display: block !important;
    text-align: center;
  }

   /* ---------- layout カレンダー全体を画面幅にぴったり収める設定 ---------- */

  .tayoriWrap {
    width: 100% ;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .calendarWrap {
    display: flex;
    justify-content: center;
    margin: 10px auto 0;
    width: 100% !important;
    max-width: 100% !important; /* 横幅の制限を解除して画面いっぱいに広げる */
    overflow: hidden !important;  /* 横スクロールを完全に禁止 */
  }

  .calendar {
    display: block;
    width: 100% !important;
  }

  .calendar table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* 💡 カレンダーのマス目を1画面幅の中に均等に強制配置 */
    table-layout: fixed !important; 
    border-collapse: collapse;
  }

  /* 💡 スマホの狭い画面でも文字が潰れてはみ出さないための微調整 */
  .calendar td,
  .calendar th {
    text-align: center !important;
    padding: 6px 2px !important; /* 上下の押しやすさを保ちつつ、左右の余白を狭くしてはみ出しを防止 */
    font-size: 0.85rem !important; /* スマホで1画面に収めるための最適な文字サイズ */
    word-break: break-all !important; /* 長い文字が入っても自動で改行させる */
    box-sizing: border-box !important;
  }


  .tayoriWrap {
    display: flex;
    justify-content: center;
  }

  .tayori {
    max-width: 256px;
  }

  .tayori img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* ---------- components ---------- */

  .flex-events {
    display: grid;
    /* 画面幅が狭いときは自動で1列になり、余裕があれば2列になる設定 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
  }

  .flex-events .item img {
    height: auto; /* 高さを固定せずレスポンシブに */
    max-height: 140px;
    width: 100%;
    object-fit: cover;
  }

  /* ---------- components 貸出部屋一覧カードのスマホ最適化 ---------- */

  .sliderWrap {
    display: flex !important;
    flex-wrap: wrap !important; /* スマホで綺麗に2列に折り返す設定 */
    gap: 10px !important;       /* カード同士の隙間 */
    width: 100% !important;
    box-sizing: border-box;
  }

   /* ---------- components 貸出部屋一覧カードのスマホ最適化（横幅いっぱい版） ---------- */

  .sliderWrap {
    display: flex !important;
    flex-wrap: wrap !important; /* スマホで綺麗に2列に折り返す設定 */
    gap: 10px !important;       /* カード同士の隙間 */
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 💡 部屋カード本体（buttonタグ） */
  .sliderWrap .button-link {
    width: calc((100% - 10px) / 2) !important; /* 2列均等配置 */
    margin: 0 !important;
    padding: 0 !important; /* 端まで広げるために全体のパディングをゼロにします */
    background: #ffffff;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important; /* 上に画像、下に文字を綺麗な縦並びに */
    height: auto !important;          /* 高さを自動にし、縦長の引き伸ばしを強制ストップ */
    align-items: stretch !important;  /* ★中身の要素を横幅いっぱいに広げる設定 */
    box-sizing: border-box;
    cursor: pointer;
  }

  /* 画像の設定（横長4:3に固定） */
  .sliderWrap .button-link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important; 
    object-fit: cover !important;   
    display: block !important;
    margin: 0 !important;
  }

  /* 部屋の名前（和室１など）のテキストエリア */
  .sliderWrap .button-link h3 {
    margin: 0 !important;
    padding: 5px 5px 0 !important; /* 名前の上下左右に余白を作ります（下側はspanが埋めるため0） */
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #333333;
    text-align: center;
    font-weight: bold;
    flex: 1; /* 名前の文字量が変わっても高さを揃えるための設定 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* 💡 (定員:20人 面積:35㎡) の部分をカードの横幅いっぱいに広げる */
  .sliderWrap .button-link h3 span {
    font-size: 16px !important;
    color: #666666;
    font-weight: normal;
    display: block !important;
    width: 100% !important; /* ★横幅いっぱいに広げる */
    margin: 3px 0 0 0 !important; /* 部屋名との間の上の隙間 */
    padding: 8px 2px !important;  /* 内側に上下左右の読みやすい余白を確保 */
    background: transparent !important; /* 🎨 背景色は透明（変えない）に設定 */
    border: none !important;            /* 枠線もなし */
    box-sizing: border-box !important;
  }


  .in-box ul {
    display: block;
    height: auto;
    width: 100%;
  }

  .in-box ul li {
    width: auto;
    position: relative;
    list-style-type: disc; /* 標準のリストマークを使用（音声読み上げ対策） */
    margin-left: 1.5em; /* 左側に余白を作る */
  }

  /* 不要になった擬似要素は削除 */
  .in-box ul li::before {
    content: none; 
  }

  /* ---------- footer ---------- */

  .footer-content {
    flex-direction: column;
  }

  .footer-item {
    width: 100%;
  }

  .footer-kisyo {
    max-height: 42px;
    width: auto;
    flex-shrink: 0;
  }

  .footer-text-group span {
    font-size: 1rem;
  }

  /* ---------- about ---------- */

  .flex-container-2,
  .img-flex-container,
  .flex-service {
    display: block;
  }

  .flex-box,
  .about-item {
    width: 100%;
    margin-bottom: 15px;
  }

  .card-image-wrap {
    height: 220px;
  }

  .gmap iframe {
    height: 300px;
  }

  /* ---------- how ---------- */

  /* 1. フロー全体をFlexboxにして、縦一列に並べる */
  .howFlow {
    display: flex !important;
    flex-direction: column !important; /* 縦並び */
    width: 100% !important;
  }

  /* すべてのボックスの横幅を100%にし、横並びを完全に解除。隙間はmarginで制御 */
  .howFlow > .box {
    width: 100% !important;
    margin: 0 0 25px 0 !important; /* ボックスごとの下マージン */
    float: none !important;
    position: static !important;
  }

  /* 最後のボックスは下マージンをゼロに */
  .howFlow > .box:last-child {
    margin-bottom: 0 !important;
  }

  /* 注意事項のコンテナを「一番上」に強制配置 */
  .howFlow > .box:first-child {
    order: -1 !important; /* HTMLの順序に関わらず最上部へ */
    margin-bottom: 15px !important; /* 注意事項の下の隙間を調整 */
  }

  /* 注意事項の赤いアラート枠の調整 */
  .howFlow .alert {
    flex: none;
    margin-bottom: 0 !important;
    box-sizing: border-box;
  }

  /* 2. 昨日追加された「仮予約タブ」のレスポンシブ対応 */
  .tempRegist .tabs-list {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .tempRegist .tabs-list li {
    flex: 1; /* 2つのボタンを50%ずつ均等に分ける */
  }

  /* タップ領域（48px以上）と文字拡大に耐える設定 */
  .tempRegist .panel-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px; /* WCAG基準の押しやすい高さ */
    padding: 10px 5px;
    font-size: 0.95rem;
    font-weight: bold;
    border: 1px solid #dfdfdf;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
  }

  /* アクティブ（選択中）のタブ */
  .tempRegist .panel-label.active {
    background: #fff;
    border-bottom: 1px solid transparent;
    position: relative;
    z-index: 2;
    color: #000;
  }

  /* タブの中身（テキスト領域） */
  .tempRegistContainer {
    box-sizing: border-box;
    width: 100%;
    line-height: 1.6;
  }

  /* リンクのはみ出し対策 */
  .tempRegistContainer a {
    display: inline-block;
    padding: 2px 0;
    word-break: break-all;
  }

  /* 各フローの枠組み（通常のブロック配置） */
  .flow-box {
    display: block;
    box-sizing: border-box;
  }

  /* 3. テーブル類のレスポンシブ（表示崩れと文字潰れを完全に防止） */
  .reduction-table,
  .printerService table {
    table-layout: auto !important;
    width: 100% !important;
    display: table !important; /* テーブルの本来の性質を維持して背景色崩れを防止 */
  }

  .reduction-table tr th,
  .reduction-table tr td,
  .printerService th,
  .printerService td {
    width: auto !important;
    white-space: normal !important;
    padding: 8px 6px !important;
  }

  /* 4. 画像や並びのレスポンシブ調整 */
  .serviceFlex,
  .printerService {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .serviceFlex div,
  .printerService div {
    width: 100% !important;
    box-sizing: border-box;
  }

  .serviceFlex img {
    width: 100%;
    height: auto;
    margin-top: 10px;
  }

  /* ---------- link ---------- */

  .link-grid {
    flex-direction: column;
    gap: 10px;
  }

  .link-column {
    width: 100%;
  }

  /* ---------- oshirase ---------- */

  .oshirase-index dl {
    /* 固定幅ではなく、文字サイズ（em）基準にするか、スマホでは1列にする */
    grid-template-columns: minmax(auto, max-content) 1fr;
    column-gap: 15px; /* 重なり防止の余白 */
  }

  .oshirase-index dt,
  .oshirase-index dd {
    padding: 4px 0;
  }

  /* ---------- tayori ---------- */

  .tayori-title {
    font-size: 1.1rem;
  }

  .tayori-image iframe {
    height: 70vh;
  }

  /* ---------- slider ---------- */

  .bx-wrapper .bx-viewport {
    height: auto !important;
    text-align: center;
    /* 背景色の固定を解除し、親要素やテーマの背景に合わせる */
    background: transparent; 
  }

  .bx-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .bxslider li {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* 矢印ボタンのタップ領域を拡張 */
  .bx-wrapper .bx-controls-direction a {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    position: relative;
  }

    /* 擬似要素で見えないタップエリアを44px以上に広げる */
  .bx-wrapper .bx-controls-direction a::after {
    content: "";
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
  }

  /* ページネーション（ドット）のタップ領域を拡張 */
  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 8px;
    height: 8px;
    position: relative;
  }
  .bx-wrapper .bx-pager.bx-default-pager a::after {
    content: "";
    position: absolute;
    top: -18px; left: -18px; right: -18px; bottom: -18px;
  }

  /* ---------- modal ---------- */

  #modal-content {
    width: 95% !important;
    height: auto !important;
    max-height: 85vh; /* 画面上下に少し余裕を持たせる */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 15px 15px;
  }

  /* 高さ制限が文字拡大時に悪さをしないよう、柔軟な高さに */
  .modal-main {
    height: auto;
  }

  .modal-upper-section {
    flex-direction: column;
    height: auto;
  }

  .main-photo-area {
    width: 100%;
    height: auto; /* 高さを固定せず、アスペクト比で保つと文字拡大に強い */
    aspect-ratio: 16 / 9;
    max-height: 280px;
  }


  .thumb-photo-area {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-top: 10px;
    flex-direction: row;
    gap: 8px;
  }

  .thumb-click {
    width: calc((100% - 16px) / 3);
    height: auto;
    aspect-ratio: 4 / 3; /* 高さを固定しない */
    flex: none;
    min-height: 48px; /* キーボードフォーカスやタップのため最低限を確保 */
  }

  .modal-lower-section {
    flex-direction: column;
    width: 100%;
    align-self: stretch;
    height: auto;
    flex-shrink: 0;
  }

  .modal-title-box,
  .modal-equipment-box {
    width: 100%;
  }

  .modal-title-box {
    padding: 12px 10px;
  }

  .modal-equipment-box {
    padding: 12px 15px;
    overflow-y: visible;
    height: auto; /* コンテンツ量に応じて自動で伸びるようにする */
  }

  /* ---------- event gallery / banner ---------- */

  .event-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .event-gallery .item img {
    height: auto !important;
  }

  .event-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .banner-left {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }

  .banner-left .item {
    background: none !important;
    border: none !important;
    overflow: visible !important;
  }

  .banner-left .item a {
    padding: 0 !important;
    display: block;
  }

  .banner-left .item img {
    width: 100%;
    height: auto;
    display: block;
  }

  .banner-right {
    width: 100%;
    display: block;
    margin-top: 15px; /* 上下のバナーがくっつかないよう余白を確保 */
    text-align: center; /* スマホでは中央寄せの方が見やすい */
  }

  .banner-right img {
    width: 100% !important; /* スマホ幅に合わせて伸縮させ、文字潰れを防ぐ */
    max-width: 250px;
    height: auto;
    display: inline-block;
  }

  /* =========================================================
     EVENT MOBILE MODAL STYLES（小画面・スマホ用）
     表裏の別々PDFを縮小せず、縦スクロールで繋げて見せる版
  ========================================================= */

  /* モーダル全体 */
  .events-page #modal-content {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* スクロールはコンテナ側に任せるため、一番外枠は固定 */
    overflow: hidden !important; 
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* PDF表示の親枠（ここをスクロールの主役にします） */
  .events-page .tayori-stage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important; /* 💡縦スクロールを完全に有効化 */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* iOSの滑らかなスクロール */
    overscroll-behavior: contain !important;
  }

  /* PDFを包む枠 */
  .events-page .pdf-scroll-container {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* 高さは中身（表裏）に合わせて自動で伸びるようにする */
    min-height: 100% !important;
  }

  /* PDF iframe本体（💡スマートフォン独自の縮小バグを強制解除する設定） */
  .events-page .tayori-frame {
    width: 100% !important;
    min-width: 100% !important;
    
    /* 💡高さを100%（画面ぴったり）にするから縮小されます。
         1つのPDF（片面）あたり、スマホ画面の約1.5倍〜2倍の縦幅（150vh〜200vh）を
         ガチガチに確保してあげることで、縮小を防ぎ、等倍のまま縦に並べます */
    height: 180vh !important; 
    min-height: 180vh !important;
    
    display: block !important;
    border: none !important;
    margin-bottom: 20px !important; /* 表面と裏面の間に少し隙間をあける */
    pointer-events: auto !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  /* 閉じるボタン（文字拡大やズレに強い固定配置） */
  .events-page #modal-close {
    position: fixed !important;
    top: 15px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    z-index: 999999 !important;
    min-width: 48px;
    min-height: 48px;
  }

  /* =========================================================
     MOBILE TAYORI CARD CAROUSEL（スマホ版：たよりカードを縦並びに）
  ========================================================= */

  .events-page .flex-tayori {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .events-page .flex-tayori > .item {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .events-page .flex-tayori > .item a {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
}