@charset "UTF-8";

/* ==========================================================================
   🏥 1日の流れ（ONEDAY）ページ専用：完全独立型・デザイン刷新スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ページ導入（イントロ）部分
   -------------------------------------------------------------------------- */
.oneday_intro {
    text-align: center;
    margin: 40px auto 40px;
    max-width: 1200px;
}

/* ==========================================================================
   【H2タグ不干渉】親の箱の幅を100%に広げて、中のH2が縮むのを防ぐ
   ========================================================================== */
.oneday_intro {
    width: 100% !important;
    display: block !important;
}
.oneday_intro .intro_text {
    font-size: 1.0rem;
    line-height: 1.7;
    color: #444444;
}

/* --------------------------------------------------------------------------
   2. 鉄壁の左右2カラムコンテナ（PCでは並列 / スマホでは自動縦並び）
   -------------------------------------------------------------------------- */
.oneday_schedule_flex_container {
    display: block;
    width: 100%;
    max-width: 1200px; /* 横幅を広げて2カラムがゆったり入るように設定 */
    margin: 0 auto;
}

@media screen and (min-width: 960px) {
    .oneday_schedule_flex_container {
        display: table; /* 古いブラウザや印刷時でも絶対に崩れないテーブルレイアウト */
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 40px 0; /* 左右のカラム（日勤・夜勤）の間の隙間 */
    }
    
    .oneday_column_day,
    .oneday_column_night {
        display: table-cell;
        vertical-align: top;
        width: 50%;
    }
}

/* 各カラムのヘッダー見出し（日勤・夜勤） */
.oneday_column_title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: 30px;
    margin-bottom: 40px;
    color: #ffffff;
    letter-spacing: 0.05em;
}
.oneday_column_day .oneday_column_title {
    background-color: #0091ea; /* 日勤は爽やかな水色 */
    box-shadow: 0 4px 12px rgba(0, 145, 234, 0.2);
}
.oneday_column_night .oneday_column_title {
    background-color: #3d68c9; /* 夜勤は落ち着いた深青 */
    box-shadow: 0 4px 12px rgba(61, 104, 201, 0.2);
}

/* --------------------------------------------------------------------------
   3. スケジュールタイムラインカード（旧吹き出し構造の完全最適化）
   -------------------------------------------------------------------------- */
.oneday_timeline_wrap {
    display: block;
    width: 100%;
}

.oneday_time_card {
    position: relative;
    background: #ffffff;                /* 清潔な白背景 */
    border: 2px solid #e1f5fe;          /* 極薄ブルーの綺麗な枠線 */
    border-radius: 16px;                /* 上品な角丸 */
    box-shadow: 0 6px 16px rgba(0, 85, 136, 0.05); /* 浮き上がるような軽い影 */
    margin-bottom: 35px !important;     /* カード同士の縦の隙間 */
    padding: 25px 30px 25px 105px !important; /* 【重なり完全解消】左側にバッジを避ける105pxの鉄壁余白を確保 */
    box-sizing: border-box;
    width: 100% !important;
}

/* --------------------------------------------------------------------------
   4. 左側に美しく絶対配置される「丸い時間バッジ」
   -------------------------------------------------------------------------- */
.oneday_time_card .oneday_badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* カードの縦中央にドンピシャ配置 */
    left: 20px;                  /* 左端からの適切な距離 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    color: #ffffff;
    font-family: "Helvetica Neue", "Arial", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    z-index: 10;
}

/* 日勤と夜勤でタイムバッジの色を変えて視認性を最高に */
.oneday_column_day .oneday_badge {
    background-color: #0091ea;
    box-shadow: 0 4px 10px rgba(0, 145, 234, 0.25);
}
.oneday_column_night .oneday_badge {
    background-color: #3d68c9;
    box-shadow: 0 4px 10px rgba(61, 104, 201, 0.25);
}

/* --------------------------------------------------------------------------
   5. カード内部のレイアウト（テキスト ＆ 文章の右下に回り込む写真枠）
   -------------------------------------------------------------------------- */
.oneday_card_body {
    display: block; /* 🚀 floatを正常に機能させるため、flexからblockへ変更 */
    width: 100%;
    position: relative;
}

/* 🚀 clearfix：回り込みによるカードの高さ潰れを完璧に防ぐおまじない */
.oneday_card_body::after {
    content: "";
    display: block;
    clear: both;
}

/* テキストエリア */
.oneday_card_text {
    display: block;
    width: 100%;
}

/* 各スケジュールカード内のH4メインタイトル（NEWSと大統一されたアンダーバー仕様） */
.oneday_time_card h4 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.45;
    display: inline-block;
    padding-bottom: 2px;
}
.oneday_column_day .oneday_time_card h4 {
    color: #007bc2;
    border-bottom: 2px solid #b3e5fc;
}
.oneday_column_night .oneday_time_card h4 {
    color: #284fa8;
    border-bottom: 2px solid #c5d3f3;
}

/* 箇条書き用の小見出し（H5） */
.oneday_time_card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #007bc2;
    margin: 15px 0 8px 0;
}

/* カード内の本文テキスト */
.oneday_time_card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333333;
    text-align: left;
}

/* 箇条書き用リストのデザイン最適化 */
.oneday_time_card .oneday_task_list {
    margin: 8px 0 0 0;
    padding-left: 18px;
    list-style-type: disc;
}
.oneday_time_card .oneday_task_list li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 4px;
    font-weight: 500;
}

/* 📸 写真（サムネイル）エリア：【文章の右下へ綺麗に回り込ませる鉄壁の指定】 */
.oneday_card_thumb {
    float: right;            /* 🚀 右側にパチッと寄せる */
    margin-left: 18px;       /* 🚀 左側の文章との間に心地よい余白を作る */
    margin-top: 12px;        /* 🚀 上の文章から少し離す（h4タイトルへの被りを100%回避） */
    margin-bottom: 4px;
    width: 140px;            /* 大きすぎない上品サイズ（140px）をキープ */
    box-sizing: border-box;
}

.oneday_card_thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 写真の角を丸めて馴染ませる */
    border: 1px solid #e1f5fe;
    box-shadow: 0 3px 8px rgba(0, 85, 136, 0.05);
}

/* --------------------------------------------------------------------------
   📱 スマートフォン・タブレット対応（2カラム自動解除・縦並び最適化）
   ========================================================================== */
@media screen and (max-width: 959px) {
    .oneday_schedule_flex_container {
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* 夜勤のカラムを下に落とし、日勤との間に十分な余白を確保 */
    .oneday_column_night {
        margin-top: 60px;
        display: block;
    }

    /* スマホ用にカードの左余白とパディングをタイトに最適化 */
    .oneday_time_card {
        padding: 20px 20px 20px 85px !important; /* 左余白を85pxに縮小 */
        margin-bottom: 25px !important;
        border-radius: 12px;
    }

    /* タイムバッジのスマホサイズ可変 */
    .oneday_time_card .oneday_badge {
        width: 56px;
        height: 56px;
        font-size: 0.9rem;
        left: 15px;
    }

    .oneday_time_card h4 {
        font-size: 1.0rem;
        margin-bottom: 8px;
    }

    /* 📱 スマホ画面では右側回り込み（float）を解除し、文章の下へ自然に落とす */
    .oneday_card_thumb {
        float: none;
        width: 100%;
        max-width: 240px; /* スマホでも主張しすぎないよう最大240pxまでに制限 */
        margin: 12px 0 0 0; /* 上のテキストとの間に余白を確保 */
    }
}

/* ==========================================================================
   ⚙️ タブ切り替え機能システム用追加CSS
   ========================================================================== */

/* 初期状態でアクティブでないタブコンテンツは非表示にする */
.oneday_tab_content {
    display: none;
    width: 100%;
}

/* activeクラスがついたコンテンツのみ表示 */
.oneday_tab_content.active {
    display: block;
}

/* タブボタン部分のカーソルをポインターにする */
.tab_menu_list .tab_item {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

/* ⏳ 回復期病棟（準備中）の美しい案内ボックスデザイン */
.oneday_coming_soon_box {
    max-width: 600px;
    margin: 60px auto;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.oneday_coming_soon_box .coming_icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.oneday_coming_soon_box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 12px;
}

.oneday_coming_soon_box p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* ==========================================================================
   カプセル型スタイリッシュ・タブメニューデザイン（ドット完全抹殺版）
   ========================================================================== */
/* タブを包むエリア全体の調整 */
.oneday_tab_area {
    width: 100%;
    max-width: 600px; /* ボタンが広がりすぎないように制限 */
    margin: 30px auto 40px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 箇条書き（ul）を横並びの土台にリセット */
.oneday_tab_area .tab_menu_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* ボタン同士の隙間 */
    padding: 0;
    margin: 0;
    list-style: none; /* ドット（丸ぽち）を完全に消去 */
}

/* タブボタン単体の基本スタイル（未選択状態） */
.oneday_tab_area .tab_menu_list .tab_item {
    flex: 1; /* 左右のボタンを同じ横幅に均等配分 */
    text-align: center;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #555555; /* 落ち着いたグレー */
    background-color: #f1f5f9; /* スッキリした薄いグレー */
    padding: 14px 20px;
    border-radius: 50px; /* 完璧な丸みを持たせたカプセル型 */
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);

    /* 🚀 【鉄壁のドット抹殺カウンター】 */
    position: relative; 
    list-style: none !important;      /* リストマークを念のため完全消去 */
    padding-left: 20px !important;    /* 既存の強烈な左パディング上書きを無効化 */
}

/* 🚀 【最重要】他所で強制付与されている「紫のドット」の疑似要素を完全に非表示・リセットします */
.oneday_tab_area .tab_menu_list .tab_item::before,
.oneday_tab_area .tab_menu_list .tab_item::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* ホバー時（PCでマウスを乗せた時）のソフトな変化 */
.oneday_tab_area .tab_menu_list .tab_item:hover {
    background-color: #e2e8f0;
    color: #1a1a1a;
}

/* 🚀 【最重要】現在選ばれている（active）タブボタンのアクティブデザイン */
.oneday_tab_area .tab_menu_list .tab_item.active {
    color: #ffffff !important;
    background-color: #005588 !important; /* 固有ヘッダーのNEWSロゴと同じ「あの最高に綺麗な濃紺」へ！ */
    border-color: #005588 !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 85, 136, 0.15); /* ほんのり立体感を出す影 */
    transform: translateY(-1px); /* 押し心地を感じさせる微小な浮き上がり */
}

/* 📱 スマートフォン（767px以下）での極上フィット調整 */
@media screen and (max-width: 767px) {
    .oneday_tab_area {
        margin: 20px auto 30px;
    }
    
    .oneday_tab_area .tab_menu_list {
        gap: 8px; /* スマホ画面用に隙間をややタイトに */
    }
    
    .oneday_tab_area .tab_menu_list .tab_item {
        font-size: 0.85rem; /* 小さなスマホ画面でも文字が溢れないサイズ */
        padding: 12px 10px; /* タップ領域（縦）は広く保ちつつ、横幅をコンパクトに */
        border-radius: 30px;
        padding-left: 10px !important; /* スマホ用に左余白を最適化 */
    }
}

/* ==========================================================================
   🏥 回復期病棟の説明ボックス
   ========================================================================== */
.oneday_kaifuku_desc {
    max-width: 600px;
    margin: 0 auto 20px;
    background-color: #e8f5e9;
    border-radius: 12px;
    padding: 15px;
    text-align: left;
    font-size: 0.9rem;
    color: #2e7d32;
    line-height: 1.6;
    font-weight: 500;
}