@charset "utf-8";

/* ==========================================================================
    【追加】グローバルリセット（横揺れ防止の基本設定）
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box; /* パディングによる幅の増加を防止 */
}

/* 画像が親要素を絶対に突き抜けないようにする */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ページ全体で横へのはみ出しを強制的に隠す
   ※#wrapperにoverflow-xを設定すると、ヘッダーのsticky（追従）が効かなくなるためbodyに移動 */
#wrapper {
    /* overflow-x: hidden; */ 
    width: 100%;
    position: relative;
}

/* 代わりにbodyで横揺れを防止する */
body {
    overflow-x: hidden;
}

/* ==========================================================================
    表示制御用クラス (PC/SP出し分け・改行制御)
   ========================================================================== */
.is-spOnly { display: none !important; }
.is-pcOnly { display: grid !important; }
.brSp { display: none; }

@media (max-width: 767px) {
    .is-pcOnly { display: none !important; }
    .is-spOnly { display: grid !important; }
    .brSp { display: block; }
}

/* ==========================================================================
    Highlight Section (比較バッジ - SP 2列維持)
   ========================================================================== */
.solutionMedicalNeopos_highlight {
    padding: 0;
    clear: both;
}
.solutionMedicalNeopos_highlightList {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
    gap: 40px 120px;
    width: 100%;
}
.solutionMedicalNeopos_highlightItem {
    width: 200px;
    height: 200px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px; /* 先端見切れ防止 */
    box-sizing: border-box;
}
.solutionMedicalNeopos_highlightItem .imgBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solutionMedicalNeopos_highlightItem img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

@media only screen and (max-width: 767px) {
    .solutionMedicalNeopos_highlight { padding: 40px 0; }
    .solutionMedicalNeopos_highlightList {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
        max-width: 420px;
    }
    .solutionMedicalNeopos_highlightItem {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 4px;
    }
}

/* ==========================================================================
    Solution Grid Section (ABCDリーフ形状 - SP順序入れ替え)
   ========================================================================== */
.solutionMedicalNeopos_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    margin: 40px auto;
    max-width: 800px;
}
.solutionMedicalNeopos_box {
    position: relative;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
.solutionMedicalNeopos_box.type-d { border-radius: 0 100px 0 100px; background: #fff9f0; border: 1px solid #ffcc80; }
.solutionMedicalNeopos_box.type-d .solutionMedicalNeopos_boxTtl { color: #e87400; }
.solutionMedicalNeopos_box.type-a { border-radius: 100px 0 100px 0; background: #fff5f5; border: 1px solid #ffcdd2; }
.solutionMedicalNeopos_box.type-a .solutionMedicalNeopos_boxTtl { color: #e60012; }
.solutionMedicalNeopos_box.type-c { border-radius: 100px 0 100px 0; background: #f0f7ff; border: 1px solid #bbdefb; }
.solutionMedicalNeopos_box.type-c .solutionMedicalNeopos_boxTtl { color: #035fb4; }
.solutionMedicalNeopos_box.type-b { border-radius: 0 100px 0 100px; background: #f1f8e9; border: 1px solid #c8e6c9; }
.solutionMedicalNeopos_box.type-b .solutionMedicalNeopos_boxTtl { color: #04a504; }

.solutionMedicalNeopos_boxIcon { margin-bottom: 15px; height: 70px; display: flex; align-items: center; justify-content: center; }
.solutionMedicalNeopos_boxIcon img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.solutionMedicalNeopos_boxTtl { font-size: 16px; font-weight: bold; margin: 0 0 10px; }
.solutionMedicalNeopos_boxDesc { font-size: 14px; line-height: 1.6; margin: 0; color: #333; }

@media only screen and (max-width: 767px) {
    .solutionMedicalNeopos_grid { grid-template-columns: 1fr; gap: 30px; margin: 30px 20px; }
    .solutionMedicalNeopos_box { padding: 35px 20px; border-radius: 15px !important; }
    
    /* SP限定：一括会計(C)とクリーン運用(B)の順序を逆に */
    .solutionMedicalNeopos_box.type-d { order: 1; }
    .solutionMedicalNeopos_box.type-a { order: 2; }
    .solutionMedicalNeopos_box.type-b { order: 3; } 
    .solutionMedicalNeopos_box.type-c { order: 4; } 
}

/* ==========================================================================
    Medical Pharmacy Grid (メーカー一覧・マーカー復旧)
   ========================================================================== */
.solutionMedicalPharmacy_gridArea { max-width: 1000px; margin: 30px auto; }
.solutionMedicalPharmacy_catch { text-align: center; font-weight: bold; font-size: 24px; margin-top: 30px; margin-bottom: 20px; line-height: 1.6; }

/* メーカー一覧用グリーンマーカー */
.solutionMedicalPharmacy_markerGreen { 
    background: linear-gradient(transparent 60%, #a5d6a7 60%) !important; 
    padding: 0 4px; 
    display: inline;
}

/* セミセルフ用イエローマーカーを元の指定色に復旧 */
.markerType01 { 
    background: linear-gradient(rgba(255, 255, 255, 0) 60%, #FFEC66 60%, #FFEC66 95%, rgba(255, 255, 255, 0) 95%) !important; 
    padding: 0 4px; 
    display: inline;
}

.solutionMedicalPharmacy_gridList { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; justify-content: center; }
.solutionMedicalPharmacy_gridItem {
    flex: 0 0 calc(25% - 6px);
    display: flex; align-items: center; justify-content: center; height: 100px;
    background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px;
    text-align: center; font-size: 14px; font-weight: bold; color: #333; line-height: 1.4; box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    .solutionMedicalPharmacy_catch { font-size: 18px; margin-top: 40px; margin-bottom: 15px; }
    .solutionMedicalPharmacy_gridArea p.fs20 { font-size: 16px !important; line-height: 1.4; padding: 0 10px; }
    .solutionMedicalPharmacy_gridArea p.fs16 { font-size: 14px !important; margin-bottom: 15px; }

    .solutionMedicalPharmacy_gridItem { 
        flex: 0 0 calc(50% - 4px); 
        font-size: 12px; 
        height: 85px; /* SP用高さ */
        padding: 5px;
    }
    
    .solutionMedicalPharmacy_gridArea p.fs14 { font-size: 12px !important; margin-top: 15px; }
}

/* ==========================================================================
    Installation Image Section (設置イメージ・画像フィット)
   ========================================================================== */
.solutionMedicalNeopos_installationGrid {
    display: grid;
    gap: 20px;
    margin: 30px auto !important;
    padding: 0;
    list-style: none;
    max-width: 1000px;
    width: 100%;
    grid-template-columns: 1fr 1fr;
}
/* 枠の設定：サイズを固定し、中身を中央寄せにする */
.solutionMedicalNeopos_imgBox {
    width: 100%; max-width: 490px; height: 370px;
    border-radius: 8px; overflow: hidden; background: #fff;
    border: 1px solid #ddd; box-sizing: border-box; margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 画像の設定：枠からはみ出さず、比率を維持して中央に配置する */
.solutionMedicalNeopos_imgBox img { 
    max-width: 100% !important; 
    max-height: 100% !important; 
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block; 
}

/* ライトボックス動作保護 */
.lightbox-trigger { position: relative; cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.lightbox-trigger:hover img { opacity: 0.85; }

.zoom-hint {
    position: absolute; bottom: 15px; right: 15px;
    background: rgba(3, 95, 180, 0.9); color: #fff;
    padding: 6px 15px 6px 30px; font-size: 12px; font-weight: bold; border-radius: 4px; 
    pointer-events: none; 
}
.zoom-hint::before { content: "+"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; }

.solutionMedicalNeopos_meshOverlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.05); 
    pointer-events: none; 
}

/* SP版サイズ仕様見出し */
.solutionMedicalNeopos_sizeHeader {
    grid-column: 1 / -1; 
    margin: 20px 0 10px; padding: 0; list-style: none;
}
.solutionMedicalNeopos_sizeHeader .mainTitle {
    background: #000080; color: #ffffff; font-size: 18px; font-weight: bold; padding: 10px 15px; text-align: center;
}
.solutionMedicalNeopos_sizeHeader .subTitle {
    color: #000000; font-size: 16px; font-weight: bold; padding: 10px 0; margin-top: 5px;
}
.solutionMedicalNeopos_sizeHeader .note { color: #035fb4; font-size: 12px; font-weight: normal; margin-left: 5px; }

/* ==========================================================================
    Support Section Styles (SPレイアウトの最適化)
   ========================================================================== */
.solutionMedicalNeopos_supportTtl {
    color: #ff0000 !important;
    font-size: 46px;
    font-weight: bold;
    text-align: center;
    margin: 60px 0 30px;
    line-height: 1.3;
}

.solutionMedicalNeoposSupportImgBox {
    margin: 0 auto;
    text-align: center;
    line-height: 0; 
}

.solutionMedicalNeoposSupportImgBox img {
    vertical-align: bottom; /* 画像下のベースライン隙間を削除 */
}

.solutionMedicalNeopos_supportNote {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 30px 0; /* 画像との間を30pxに指定 */
}

@media (max-width: 767px) {
    .solutionMedicalNeopos_supportTtl { 
        font-size: 22px; 
        margin: 40px 10px 25px; 
        line-height: 1.4;
    }
    
    .solutionMedicalNeopos_supportNote { 
        font-size: 15px; 
        line-height: 2.2; /* SP時の読みやすさ向上 */
        margin: 30px 0 40px; 
        padding: 0 15px; 
    }

    .solutionMedicalNeopos_installationGrid { grid-template-columns: 1fr !important; padding: 0 10px; }
    /* SP時：枠の高さ制限を解除し、画像自体の比率で表示されるようにする */
    .solutionMedicalNeopos_imgBox { max-width: 100%; height: auto; min-height: 200px; aspect-ratio: auto; }
}

/* ==========================================================================
    Lightbox Modal Styles (z-index強化)
   ========================================================================== */
.solutionMedicalNeopos_modalOverlay {
    display: none; position: fixed; z-index: 1000000; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
}
.solutionMedicalNeopos_modalOverlay.is-open { display: block; }
.solutionMedicalNeopos_modalBody { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
#solutionMedicalNeopos_modalImg { max-width: 95%; max-height: 90vh; box-shadow: 0 0 30px rgba(0,0,0,0.5); animation: modalPop 0.3s ease; }
@keyframes modalPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.solutionMedicalNeopos_modalClose { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 50px; cursor: pointer; z-index: 100001; }




/* ==========================================================================
    Main Visual Mobile Overlay (SP時メインビジュアル上への絶対配置)
   ========================================================================== */
@media only screen and (max-width: 767px) {
    .solutionMedicalNeoposMainBox {
        position: relative !important;
        display: block !important;
        /* テキストがはみ出る分の余白を確保 */
        margin-bottom: 80px !important;
    }
    .solutionMedicalNeoposMainBox h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
    .solutionMedicalNeoposMainBox img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    /* ボタンを画像の下部に重ねる（画像からはみ出す設定） */
    .solutionMedicalNeoposMainBox .btnStack_ai {
        position: absolute !important;
        top: 65% !important; /* 画像の下端付近に配置 */
        left: 50% !important;
        transform: translate(-50%, -0%) !important;
        width: 100% !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* テキストを2個目のボタンの下（画像外）に配置 */
    .solutionMedicalNeoposMainBox .txt01 {
        position: absolute !important;
        top: 100% !important; /* ボタンスタックのさらに下 */
        left: 0 !important;
        width: 100% !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 12px 0 !important; /* 背景の余白 */
        text-align: center !important;
        color: #ffffff !important;
        /* 背景色を追加 */
        background-color: #78a731 !important; 
        font-weight: bold !important;
    }
}