/* ===========================================
   UQ Mobile Device Price Simulator - CSS
   シミュレーター (.uq-f-sim) + デバイスリスト (.uq-dl-item)
   =========================================== */

/* --- 共通コンポーネント（両スコープ共用） --- */
.uq-f-sim, .uq-dl-item { max-width: 620px; color: inherit; font-family: inherit; line-height: 1.5; }
.uq-f-sim { margin: 20px auto; }
.uq-dl-item { margin: 0 auto 48px; }

.uq-f-sim .uq-f-sec, .uq-dl-item .uq-f-sec { display: block; font-weight: bold; font-size: 0.95em; color: #333; }
.uq-f-sim .uq-f-sec { margin: 22px 0 8px; }
.uq-dl-item .uq-f-sec { margin: 16px 0 8px; }

.uq-f-sim .uq-f-grid, .uq-dl-item .uq-f-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.uq-f-sim .uq-f-grid { margin-bottom: 18px; }
.uq-dl-item .uq-f-grid { margin-bottom: 14px; }

/* カード（ラジオボタン） */
.uq-f-sim .uq-f-card, .uq-dl-item .uq-f-card { border: 1px solid #d0d0d0; border-radius: 6px; padding: 12px 14px; cursor: pointer; display: flex; align-items: center; position: relative; background: #fff; transition: border-color 0.15s ease; }
.uq-f-sim .uq-f-card:hover, .uq-dl-item .uq-f-card:hover { border-color: #0099ff; }
.uq-f-sim .uq-f-card.is-active, .uq-dl-item .uq-f-card.is-active { border-color: #0099ff; background: #f0f8ff; }
.uq-f-sim .uq-f-radio, .uq-dl-item .uq-f-radio { width: 16px; height: 16px; border: 2px solid #bbb; border-radius: 50%; margin-right: 10px; position: relative; flex-shrink: 0; }
.uq-f-sim .is-active .uq-f-radio, .uq-dl-item .is-active .uq-f-radio { border-color: #0099ff; }
.uq-f-sim .is-active .uq-f-radio::after, .uq-dl-item .is-active .uq-f-radio::after { content: ""; width: 8px; height: 8px; background: #0099ff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.uq-f-sim .uq-f-card input, .uq-dl-item .uq-f-card input { display: none; }
.uq-f-sim .uq-f-label, .uq-dl-item .uq-f-label { font-weight: bold; font-size: 0.9em; }

/* 販売終了・在庫なし */
.uq-f-sim .uq-f-card.is-sold-out, .uq-dl-item .uq-f-card.is-sold-out { opacity: 0.4; pointer-events: none; cursor: default; background: #f3f3f3; }
.uq-f-sim .uq-f-sold-label, .uq-dl-item .uq-f-sold-label { font-size: 0.7em; color: #999; margin-left: auto; }

/* 価格ブロック */
.uq-f-sim .uq-box-relative, .uq-dl-item .uq-box-relative { border-top: 3px solid #0099ff; padding: 20px 0 0; background: transparent; display: none; }
.uq-f-sim .uq-box-relative { margin-top: 28px; }
.uq-dl-item .uq-box-relative { margin-top: 20px; padding-top: 16px; }

.uq-f-sim .uq-f-badge, .uq-dl-item .uq-f-badge { display: inline-block; background: #0099ff; color: #fff; padding: 3px 12px; font-size: 0.75em; font-weight: bold; margin-bottom: 10px; }
.uq-f-sim .uq-f-sub-title, .uq-dl-item .uq-f-sub-title { display: block; font-weight: bold; font-size: 1em; margin-bottom: 4px; }
.uq-f-sim .uq-f-sub-desc, .uq-dl-item .uq-f-sub-desc { display: block; font-size: 0.82em; color: #666; }
.uq-f-sim .uq-pink, .uq-dl-item .uq-pink { color: #e4007f; }
.uq-f-sim .uq-f-price-big, .uq-dl-item .uq-f-price-big { font-size: 2.4em; font-weight: bold; margin: 6px 0; }
.uq-f-sim .uq-f-yen, .uq-dl-item .uq-f-yen { font-size: 0.4em; margin-left: 2px; font-weight: normal; }
.uq-f-sim .uq-f-times { font-size: 0.35em; font-weight: normal; margin-left: 4px; color: #666; }
.uq-f-sim .uq-f-dashed, .uq-dl-item .uq-f-dashed { border: none; border-bottom: 1px dashed #ccc; margin: 14px 0; }

/* テーブル */
.uq-f-sim .uq-f-table, .uq-dl-item .uq-f-table { width: 100%; border-collapse: collapse; border: 0 !important; background: transparent !important; margin: 0; max-width: 100%; }
.uq-f-sim .uq-f-table thead, .uq-dl-item .uq-f-table thead { background: transparent !important; border: 0 !important; }
.uq-f-sim .uq-f-table th, .uq-f-sim .uq-f-table td, .uq-dl-item .uq-f-table th, .uq-dl-item .uq-f-table td { padding: 6px 0; border: 0 !important; color: inherit !important; background: transparent !important; }
.uq-f-sim .uq-f-table th, .uq-dl-item .uq-f-table th { text-align: left; font-weight: normal; font-size: 0.9em; color: #666; }
.uq-f-sim .uq-f-table td, .uq-dl-item .uq-f-table td { text-align: right; font-size: 1em; }
.uq-f-sim .uq-table-large td, .uq-dl-item .uq-table-large td { font-size: 1.8em; font-weight: bold; }
.uq-f-sim .uq-f-val { font-size: 1em; }

/* 画像 */
.uq-f-sim .uq-f-device-img, .uq-dl-item .uq-f-device-img { text-align: center; margin: 12px 0; min-height: 140px; }
.uq-f-sim .uq-f-device-img img, .uq-dl-item .uq-f-device-img img { max-width: 140px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

/* 注意書き */
.uq-f-sim .uq-f-notes, .uq-dl-item .uq-f-notes { margin-top: 14px; font-size: 0.72em; line-height: 1.6; text-align: left; color: #888; }
.uq-f-sim .uq-f-notes .uq-pink, .uq-dl-item .uq-f-notes .uq-pink { color: #e4007f; }

/* CTAボタン */
.uq-f-sim .uq-f-cta, .uq-dl-item .uq-f-cta { display: inline-block; padding: 14px 36px; background: #e4007f; color: #fff; text-decoration: none; font-weight: bold; border-radius: 50px; font-size: 0.95em; transition: opacity 0.15s ease; }
.uq-f-sim .uq-f-cta:hover, .uq-dl-item .uq-f-cta:hover { opacity: 0.85; color: #fff; text-decoration: none; }

/* 情報バナー */
.uq-f-sim .uq-f-info-banner, .uq-dl-item .uq-f-info-banner { background: #fff4f9; padding: 12px 14px; font-size: 0.8em; color: #c0006a; border: 1px solid #f0d0e0; text-align: left; line-height: 1.6; margin-bottom: 10px; }

/* 見出し（シミュレーターのみ） */
.uq-f-sim .uq-f-heading { margin-top: 32px; margin-bottom: 14px; font-size: 1.15em; font-weight: bold; text-align: center; }

/* セレクトボックス（シミュレーターのみ） */
.uq-f-sim select.uq-f-card { appearance: none; -webkit-appearance: none; width: 100%; padding: 12px 36px 12px 12px; margin-bottom: 0; outline: none; box-sizing: border-box; font-size: 0.95em; font-family: inherit; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; }
.uq-f-sim select.uq-f-card:focus { border-color: #0099ff; }

/* --- レスポンシブ --- */
@media (max-width: 500px) {
    .uq-f-sim .uq-f-grid, .uq-dl-item .uq-f-grid { grid-template-columns: 1fr; }
    .uq-f-sim .uq-f-price-big, .uq-dl-item .uq-f-price-big { font-size: 1.9em; }
    .uq-f-sim .uq-f-cta, .uq-dl-item .uq-f-cta { padding: 13px 20px; width: 100%; box-sizing: border-box; text-align: center; }
    .uq-f-sim .uq-table-large td, .uq-dl-item .uq-table-large td { font-size: 1.5em; }
}