@charset "UTF-8";

/* ==========================================================================
   スマートフォン対応用レスポンシブスタイル
   既存のPC用スタイル（base_style.css, top_style.css）を崩さずに上書きします。
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* --- 全体レイアウトの調整 --- */
    body {
        background: #f4f6f8 !important; /* レガシーな巨大背景画像を無効化し、爽やかでモダンな淡い背景に */
        text-align: left !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
    }
    
    body #wrap_all {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border-left: none !important;
        border-right: none !important;
        background: #ffffff !important; /* 背景の縦スプリット線を非表示にし白背景に */
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    
    .clearfix::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* --- ヘッダー・ナビゲーション・ロゴ（上部に配置） --- */
    body #wrap_all #navi {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 15px 15px 25px 15px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #eef2f5 !important;
    }
    
    /* ロゴ（XHTMLで絶対配置されていたものを自然な中央配置へ） */
    body #wrap_all #navi h1 {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 20px 0 !important;
        border-bottom: none !important;
        text-align: center !important;
        overflow: visible !important;
    }
    
    body #wrap_all #navi h1 span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    body #wrap_all #navi h1 img {
        position: static !important;
        margin: 0 auto !important;
        display: block !important;
        max-width: 85% !important;
        height: auto !important;
    }
    
    /* メニューリスト */
    body #wrap_all #navi #menu {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body #wrap_all #navi #menu ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    /* メニューの各項目をタップしやすいカード型ボタンへ昇華 */
    body #wrap_all #navi #menu ul li {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 10px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
        text-align: center !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    }
    
    /* タップした際のアニメーションフィードバック */
    body #wrap_all #navi #menu ul li:active {
        transform: scale(0.98) !important;
        background: #f1f5f9 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }
    
    body #wrap_all #navi #menu ul li a {
        display: inline-block !important;
        width: 100% !important;
        text-decoration: none !important;
    }
    
    body #wrap_all #navi #menu ul li img {
        max-width: 90% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* 各種様式下の付記（ニーズ研修などの green テキスト） */
    body #wrap_all #navi #menu ul li p {
        margin: 8px auto 0 auto !important;
        padding: 6px 10px !important;
        background: #f0fdf4 !important;
        border: 1px solid #dcfce7 !important;
        border-radius: 6px !important;
        display: inline-block !important;
        text-align: left !important;
        font-size: 0.85em !important;
        line-height: 1.5 !important;
        color: #166534 !important;
    }

    /* --- メインコンテンツ --- */
    body #wrap_all #content {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 20px 15px !important;
        background: #ffffff !important;
    }
    
    /* --- 新着情報エリア（2カラムの画像を縦並び化） --- */
    body #wrap_all #content #news_area {
        margin: 0 0 25px 0 !important;
        border-top: none !important;
        background: none !important;
        width: 100% !important;
        display: block !important;
    }
    
    body #wrap_all #content #news_area tbody,
    body #wrap_all #content #news_area tr,
    body #wrap_all #content #news_area td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        border: none !important;
    }
    
    body #wrap_all #content #news_area #news_left,
    body #wrap_all #content #news_area #news_right {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* 研修概要・チラシ画像のデザイン調整 */
    body #wrap_all #content #news_area #news_left a img,
    body #wrap_all #content #news_area #news_right a img {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 10px !important;
        /*box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03) !important;*/
        /*border: 1px solid #e2e8f0 !important;*/
        transition: transform 0.2s ease !important;
    }
    
    body #wrap_all #content #news_area #news_left a img:active,
    body #wrap_all #content #news_area #news_right a img:active {
        transform: scale(0.99) !important;
    }

    /* --- eラーニング研修セクション --- */
    body #wrap_all #content #e_learning {
        border-top: 1px solid #f1f5f9 !important;
        padding: 25px 0 10px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    body #wrap_all #content #e_learning h2 {
        font-size: 1.15em !important;
        font-weight: bold !important;
        padding: 8px !important;
        background-color: #ecfccb !important; /* より明瞭で清潔な薄緑 */
        color: #3f6212 !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    body #wrap_all #content #e_learning p {
        font-size: 0.9em !important;
        line-height: 1.6 !important;
        color: #475569 !important;
        margin-bottom: 20px !important;
        display: flex !important;
        flex-direction: column-reverse !important; /* 画像ボタンをテキストの下に配置し、流れをスムーズに */
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* 2つ目のpタグ（ボタンのみ）の調整 */
    body #wrap_all #content #e_learning p + p {
        flex-direction: column !important;
        margin-top: -10px !important;
    }
    
    /* eラーニング画像ボタンを押しやすく最適化 */
    body #wrap_all #content #e_learning p img {
        float: none !important;
        display: block !important;
        margin: 5px auto !important;
        width: 400px;
        max-width: 90% !important;
        height: auto !important;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08)) !important;
        transition: transform 0.2s ease !important;
    }
    
    body #wrap_all #content #e_learning p img:active {
        transform: scale(0.97) !important;
    }

    /* --- フッターエリア --- */
    body #wrap_all #footer {
        margin-top: 30px !important;
        padding: 25px 15px !important;
        font-size: 0.85em !important;
        line-height: 1.7 !important;
        text-align: center !important;
        border-top: 1px solid #dcfce7 !important;
        background: #ecfdf5 !important; /* 清潔感のある現代的な薄緑背景に変更 */
        color: #065f46 !important;
    }
    
    body #wrap_all #footer a {
        color: #047857 !important;
        text-decoration: underline !important;
        font-weight: bold !important;
    }
    
    /*追加*/
    body #wrap_all #navi #menu ul li:nth-child(5),body #wrap_all #navi #menu ul li:nth-child(6),body #wrap_all #navi #menu ul li:nth-child(7) {
        border: 0px !important;
        box-shadow: none !important;
    }
    
}