@charset "utf-8";

/* --- 1. 全体のコンテナ --- */
.manual-container {
    max-width: 100% !important;
    margin: 40px 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: #333 !important;
    line-height: 1.8 !important;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
    text-align: left !important;
    box-sizing: border-box;
}

/* --- 2. H2 タイトル --- */
.manual-container h2.manual-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    margin: 0 0 50px 0 !important;
    padding: 20px 0 !important;
    color: #000 !important;
    border-top: 4px solid #000 !important;
    border-bottom: 4px solid #000 !important;
    background: none !important;
    position: relative !important;
}
.manual-container h2.manual-title::before,
.manual-container h2.manual-title::after { content: none !important; display: none !important; }

/* --- 3. H3 セクション見出し --- */
.manual-container h3.section-title {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 54px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin: 60px 0 30px 0 !important;
    padding: 10px 20px !important;
    color: #fff !important;
    background: #000 !important;
    border: none !important;
    background-image: none !important;
    box-sizing: border-box !important;
}
.manual-container h3.section-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 24px !important;
    background-color: #fff !important;
    margin-right: 15px !important;
}

/* --- 4. 小見出し (step-title / sub-title) --- */
.manual-container .step-title,
.manual-container .sub-title {
    display: block !important;
    font-size: 19px !important;
    font-weight: bold !important;
    color: #000 !important;
    margin: 35px 0 15px 0 !important;
    padding-left: 12px !important;
    border-left: 4px solid #000 !important;
    line-height: 1.2 !important;
}

/* --- 5. A-G ボタン操作表（修正：画像を元にデザイン復元） --- */
.offline-button-table {
    width: 100% !important;
    margin: 20px 0 !important;
    border-collapse: collapse !important;
    border: none !important;
    background: #fff !important;
}

/* 表のヘッダー（ボタン・操作内容） */
.offline-button-table thead th {
    background: #fff !important;
    color: #333 !important;
    padding: 10px 15px !important;
    font-weight: bold !important;
    text-align: left !important;
    border-bottom: 1px solid #eee !important;
    font-size: 16px !important;
}
.offline-button-table thead th:first-child {
    text-align: center !important;
    width: 50px !important;
}

/* 各セル */
.offline-button-table td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
    font-size: 16px !important;
    vertical-align: middle !important;
}

/* A, B, C... が入る左側の列（黒い正方形） */
.offline-button-table td.btn-id {
    background: #000 !important;
    color: #fff !important;
    width: 50px !important;
    height: 50px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 0 !important;
    border: 2px solid #fff !important; /* 行間の区切り用 */
}

/* --- 6. LEDテーブル --- */
.manual-container .led-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 40px 0 !important;
}
.manual-container .led-table th {
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    width: 40% !important;
    text-align: left !important;
    font-weight: bold !important;
}
.manual-container .led-table td {
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    background-color: #fff !important;
}
.manual-container .color-dot {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* --- 7. ステップ数字 --- */
.manual-container .step-list { list-style: none !important; padding: 0 !important; }
.manual-container .step-list > li { position: relative !important; padding-left: 60px !important; margin-bottom: 50px !important; }
.manual-container .step-number {
    position: absolute !important; left: 0 !important; top: 0 !important;
    width: 40px !important; height: 40px !important;
    background-color: #000 !important; color: #fff !important;
    text-align: center !important; line-height: 40px !important;
    border-radius: 50% !important; font-weight: bold !important;
}

/* --- 8. 画像レイアウト --- */
.manual-container .image-wrap {
    margin: 30px 0 !important;
    text-align: center !important;
    clear: both !important;
}
.manual-container .phone-shot {
    max-width: 280px !important;
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid #eee !important;
}

/* --- 9. アプリーチ --- */
.manual-container .appreach { border: 1px solid #ddd !important; padding: 15px !important; overflow: hidden !important; background: #fff !important; margin: 20px 0 !important; border-radius: 8px !important; }
.manual-container .appreach__icon { float: left !important; width: 80px !important; margin-right: 15px !important; border-radius: 15% !important; }
.manual-container .appreach__name { font-size: 18px !important; font-weight: bold !important; margin: 0 !important; }
.manual-container .appreach__links { display: flex !important; gap: 10px !important; margin-top: 10px !important; }
.manual-container .appreach__links img { height: 35px !important; }

/* --- 10. 特定項目（full-width-step）の回り込み防止設定 --- */
.manual-container .step-list > li.full-width-step {
    padding-left: 0 !important;
}
.manual-container .full-width-step .step-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}
.manual-container .full-width-step .step-number {
    position: static !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}
.manual-container .full-width-step .step-title {
    margin: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

/* 画像とキャプションを縦並びにして、回り込みを完全に防ぐ */
.manual-container .full-width-step .image-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.manual-container .full-width-step .img-caption {
    text-align: left !important;
    max-width: 100% !important;
    margin: 15px auto 0 !important;
    padding: 0 10px !important;
    font-size: 16px !important; /* 15pxから16pxに変更 */
    line-height: 1.6 !important;
    color: #444 !important;
}

/* --- A-G表の最終解決コード（既存スタイルに負けない設定） --- */

/* 1. 表全体の囲み */
.manual-table-final-box {
    margin: 30px 0 !important;
    width: 100% !important;
    background: #fff !important; /* 強制的に白背景 */
}

/* スペック比較表専用の調整 */
.specs-table thead th {
    background-color: #000 !important; /* ヘッダーを黒に */
    color: #fff !important;           /* 文字を白に */
    text-align: center !important;
}

.specs-table td:first-child {
    background-color: #f9f9f9 !important; /* 左端の項目名を薄いグレーに */
    font-weight: bold !important;
    width: 30%;
}

.specs-table td {
    text-align: center !important;
    border: 1px solid #eee !important; /* グリッド線を表示 */
}

/* スマホ表示の時は文字サイズを少し小さくして収まりを良くする */
@media screen and (max-width: 768px) {
    .specs-table td, .specs-table th {
        font-size: 14px !important;
        padding: 10px 5px !important;
    }
}
/* 2. テーブル本体 */
.manual-table-final-style {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    background: #fff !important;
}

/* 3. ヘッダー（ボタン・操作内容）が白抜きになるのを防ぐ */
.manual-table-final-style thead th {
    background: #fcfcfc !important; 
    color: #333 !important;        
    padding: 12px 15px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-align: left !important;
    border-bottom: none !important; /* ← ここを 2px solid #333 から none に変更 */
}

/* 4. 左側「ボタン」項目の幅 */
.manual-table-final-style .th-btn {
    width: 80px !important;
    text-align: center !important;
}

/* 5. 各行のセル */
.manual-table-final-style td {
    background: #fff !important;   /* セル背景を白に固定 */
    color: #333 !important;        /* 文字色を黒に固定 */
    padding: 12px 15px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
}

/* 6. A, B... の黒い正方形デザイン */
.manual-table-final-style td.td-icon-black {
    background: #000 !important;   /* 背景を真っ黒に固定 */
    color: #fff !important;         /* 文字を白に固定 */
    width: 50px !important;
    height: 50px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 0 !important;
    border: 2px solid #fff !important; /* 行間の隙間を白線で表現 */
}

/* 黄色のアンダーライン（マーカー風・太字なし） */
.yellow-line {
    background: linear-gradient(transparent 60%, #ffff00 60%) !important;
    font-weight: normal !important; /* 通常の太さに固定 */
    display: inline !important;
}

/* --- PC/スマホ表示切り替え設定 --- */

/* 1. まずスマホ用を隠す（PC表示が基本） */
.mobile-only {
    display: none !important;
}

/* 2. PC用を表示する */
.pc-only {
    display: block !important;
}

/* 3. 画面幅が768px以下（スマホ）の場合の設定 */
@media screen and (max-width: 768px) {
    /* PC用を隠す */
    .pc-only {
        display: none !important;
    }
    /* スマホ用を表示する */
    .mobile-only {
        display: block !important;
    }
}

/* 手順ごとの余白調整 */
.order-step {
    margin-bottom: 50px !important;
    text-align: center;
}

.order-step img {
    margin-bottom: 10px !important;
}

/* --- 画像右下に虫眼鏡アイコンを表示 --- */

/* 拡大リンク(aタグ)をアイコンの基準点にする */
a[data-lightbox] {
    position: relative !important;
    display: inline-block !important;
    width: 100%; /* 親要素に合わせて調整 */
}

/* 虫眼鏡アイコンの本体 */
a[data-lightbox]::after {
    content: "\1F50D" !important; /* 虫眼鏡の絵文字コード */
    position: absolute !important;
    right: 10px !important;   /* 右からの距離 */
    bottom: 10px !important;  /* 下からの距離 */
    background: rgba(0, 0, 0, 0.5) !important; /* 半透明の黒背景 */
    color: #fff !important;    /* アイコンの色（白） */
    width: 34px !important;    /* 背景の幅 */
    height: 34px !important;   /* 背景の高さ */
    line-height: 34px !important;
    text-align: center !important;
    border-radius: 50% !important; /* 丸くする */
    font-size: 18px !important;
    z-index: 5 !important;
    pointer-events: none !important; /* アイコン自体がクリックの邪魔をしないように */
    opacity: 0.8;
    transition: 0.3s;
}

/* ホバー時に少し強調する（任意） */
a[data-lightbox]:hover::after {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.1);
}

/* =================================================
   購入手順・画像グリッド セクション完全版
   ================================================= */

/* 1. 各手順（箱）と画像ラップの共通設定 */
.order-step, .image-wrap {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央に寄せる */
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    text-align: center; /* inline-blockのキャプションを中央に配置 */
}

/* 2. 縞々背景（ブルー系）の設定 */
.order-step:nth-of-type(odd) {
    background-color: #f0f7ff !important; /* 清潔感のある薄いブルー */
    padding: 30px 15px !important;
}
.order-step:nth-of-type(even) {
    background-color: #ffffff !important;
    padding: 30px 15px !important;
}

/* 3. 画像と説明文（キャプション）の調整 */
.responsive-img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e0e0e0; 
}

.img-caption {
    display: inline-block;    /* 文字量に合わせて幅を可変にする */
    text-align: left;         /* 2行以上の時は左寄せにする */
    max-width: 100%;          /* 親要素からはみ出さない */
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    font-weight: normal !important; 
    color: #333;
    line-height: 1.6;
}

/* 説明文の中のリンク */
.img-caption a {
    color: #0066cc;
    text-decoration: underline;
}

/* 4. PC版の特殊処理（スマホ3分割で空になった箱を消す） */
@media screen and (min-width: 769px) {
    .order-step:has(.pc-only:empty) {
        display: none !important;
    }
}

/* 5. スマホ版の調整 */
@media screen and (max-width: 768px) {
    .order-step {
        padding: 25px 10px !important;
    }
    .order-step:nth-of-type(odd) {
        background-color: #f2f8ff !important;
    }
}

/* 6. 画像右下の虫眼鏡アイコン */
a[data-lightbox] {
    position: relative !important;
    display: inline-block !important;
}
a[data-lightbox]::after {
    content: "\1F50D" !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    text-align: center !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0.8;
}

/* 7. PC/スマホ表示切り替え（共通） */
.pc-only { display: block; }
.mobile-only { display: none; }
@media screen and (max-width: 768px) {
    .pc-only { display: none !important; }
    .mobile-only { display: block !important; }
}

/* --- 横スクロール 最終解決案（PC全幅＆スマホデザイン維持） --- */

.scroll-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 20px 0 !important;
    background-color: transparent !important;
}

/* 基本（PCブラウザ）：横いっぱいに広げる */
.manual-table-final-style {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

/* スマホ実機：画面が狭くなったら表の横幅を固定してスクロールさせる */
@media screen and (max-width: 768px) {
    .manual-table-final-style {
        /* 5列ある表なので、少し広めの 800px を指定すると綺麗に見えます */
        width: 800px !important; 
        min-width: 800px !important;
    }
}

/* スクロールバーを見やすく */
.scroll-container::-webkit-scrollbar {
    height: 8px !important;
    display: block !important;
}
.scroll-container::-webkit-scrollbar-thumb {
    background-color: #cccccc !important;
    border-radius: 4px !important;
}
/* --- ページ全体の横揺れを防ぎつつ、表だけスクロールさせる設定 --- */

/* 1. スクロールさせるコンテナ。ここから外に「はみ出し」を漏らさない */
.scroll-container {
    width: 100% !important;
    overflow-x: auto !important; /* ここで表を閉じ込める */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 20px 0 !important;
    display: block !important;
}

/* 2. PC：通常通り100%幅 */
.manual-table-final-style {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

/* 3. スマホ：ページ幅を壊さず、中身の表だけを広げる */
@media screen and (max-width: 768px) {
    .manual-table-final-style {
        /* 重要：widthを100%以上にせず、min-widthで中身を確保する */
        width: auto !important; 
        min-width: 800px !important; 
    }
}

/* スクロールバーのデザイン */
.scroll-container::-webkit-scrollbar {
    height: 8px !important;
}
.scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc !important;
    border-radius: 4px !important;
}
html {
    scroll-behavior: smooth;
}