@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;
    /* 既存のstyle.cssの装飾（影や背景など）をリセット */
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
}
.manual-container h2.manual-title::before,
.manual-container h2.manual-title::after { content: none !important; display: none !important; }

/* --- 3. H2 セクション見出し (旧H3から格上げ) --- */
/* タグを h3 から h2 に変更しました */
.manual-container h2.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;
    /* 既存のstyle.cssのH2装飾を徹底排除 */
    text-shadow: none !important;
    box-shadow: none !important;
}
.manual-container h2.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;
}


.product-review-card {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e6ed;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  font-family: sans-serif;
  overflow: hidden; /* これで角丸からはみ出す背景をカット */
  margin: 20px 0;
}

.review-header {
  background: #f8f9fa;
  padding: 25px 20px;
  border-bottom: 1px solid #e0e6ed;
  text-align: center;
}

.review-label {
  display: block;
  font-size: 1.3rem; /* 少し大きく */
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.star-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stars {
  font-size: 32px;
  color: #ddd;
  position: relative;
  line-height: 1;
  display: inline-block;
}
.stars::before { content: "★★★★★"; }
.stars::after {
  color: #ffbc00;
  position: absolute;
  left: 0; top: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* 星の数切り替え */
.star-rating[data-rating="1"] .stars::after { content: "★"; }
.star-rating[data-rating="2"] .stars::after { content: "★★"; }
.star-rating[data-rating="3"] .stars::after { content: "★★★"; }
.star-rating[data-rating="4"] .stars::after { content: "★★★★"; }
.star-rating[data-rating="5"] .stars::after { content: "★★★★★"; }

.rating-text {
  font-size: 1rem;
  color: #666;
  font-weight: bold;
}

.review-content {
  padding: 25px 20px; /* 内側の余白 */
}

.point-box {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  border-left: 5px solid; /* 左線の太さだけ指定 */
}
.point-box:last-child { margin-bottom: 0; }

.point-box h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.point-box ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* メリット・デメリットの個別色 */
.merit { background-color: #f0fff4; border-color: #28a745; }
.merit h4 { color: #28a745; }

.demerit { background-color: #fff5f5; border-color: #dc3545; }
.demerit h4 { color: #dc3545; }


/* 手順番号 */
.heading {
    margin-top: 20px;  /* 上に20px */
    margin-bottom: 20px;  /* 下にも20px */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
}

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.heading-text {
    font-weight: bold;
    color: black;
}