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

/* --- カスタムプロパティ --- */
.uq-f-sim, .uq-dl-item {
    --uq-blue: #0099ff;
    --uq-blue-light: #f0f8ff;
    --uq-blue-mid: #99d6ff;
    --uq-pink: #e4007f;
    --uq-pink-light: #fff4f9;
    --uq-pink-border: #f0d0e0;
    --uq-text: #1a1a2e;
    --uq-text-sub: #5a6070;
    --uq-text-muted: #8b92a0;
    --uq-border: #dfe2e8;
    --uq-bg-card: #fff;
    --uq-bg-surface: #f7f8fa;
    --uq-transition: 0.15s ease;
}

/* --- ベースコンテナ --- */
.uq-f-sim, .uq-dl-item {
    color: var(--uq-text);
    font-family: inherit;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.uq-f-sim { max-width: 620px; margin: 24px auto; }
.uq-dl-item { margin: 0 auto 52px; }

/* --- セクションラベル --- */
.uq-f-sim .uq-f-sec, .uq-dl-item .uq-f-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--uq-text-sub);
    letter-spacing: 0.04em;
}
.uq-f-sim .uq-f-sec { margin: 26px 0 10px; }
.uq-dl-item .uq-f-sec { margin: 20px 0 10px; }
.uq-f-sim .uq-f-sec::before, .uq-dl-item .uq-f-sec::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--uq-blue);
    flex-shrink: 0;
}

/* --- グリッドレイアウト --- */
.uq-f-sim .uq-f-grid, .uq-dl-item .uq-f-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.uq-f-sim .uq-f-grid { margin-bottom: 20px; }
.uq-dl-item .uq-f-grid { margin-bottom: 16px; }

/* --- カード(ラジオボタン) --- */
.uq-f-sim .uq-f-card, .uq-dl-item .uq-f-card {
    border: 1px solid var(--uq-border);
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--uq-bg-card);
    transition: border-color var(--uq-transition);
}
.uq-f-sim .uq-f-card:hover, .uq-dl-item .uq-f-card:hover {
    border-color: var(--uq-blue);
}
.uq-f-sim .uq-f-card.is-active, .uq-dl-item .uq-f-card.is-active {
    border-color: var(--uq-blue);
    background: var(--uq-blue-light);
}
.uq-f-sim .uq-f-card input, .uq-dl-item .uq-f-card input { display: none; }

/* ラジオサークル */
.uq-f-sim .uq-f-radio, .uq-dl-item .uq-f-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--uq-border);
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
    transition: border-color var(--uq-transition);
}
.uq-f-sim .is-active .uq-f-radio, .uq-dl-item .is-active .uq-f-radio {
    border-color: var(--uq-blue);
}
.uq-f-sim .is-active .uq-f-radio::after, .uq-dl-item .is-active .uq-f-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--uq-blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.uq-f-sim .uq-f-label, .uq-dl-item .uq-f-label {
    font-weight: 600;
    color: var(--uq-text);
    line-height: 1.4;
}

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

/* バッジ */
.uq-f-sim .uq-f-badge, .uq-dl-item .uq-f-badge {
    display: inline-block;
    background: var(--uq-blue);
    color: #fff;
    padding: 4px 14px;
    font-size: 0.72em;
    font-weight: 700;
    margin-bottom: 12px;
}

.uq-f-sim .uq-f-sub-title, .uq-dl-item .uq-f-sub-title {
    display: block;
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 4px;
    color: var(--uq-text);
}
.uq-f-sim .uq-f-sub-desc, .uq-dl-item .uq-f-sub-desc {
    display: block;
    font-size: 0.8em;
    color: var(--uq-text-sub);
}

/* ピンク強調 */
.uq-f-sim .uq-pink, .uq-dl-item .uq-pink { color: var(--uq-pink); }

/* 価格表示(大) */
.uq-f-sim .uq-f-price-big, .uq-dl-item .uq-f-price-big {
    font-size: 2.6em;
    font-weight: 800;
    margin: 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.uq-f-sim .uq-f-yen, .uq-dl-item .uq-f-yen {
    font-size: 0.38em;
    margin-left: 3px;
    font-weight: 500;
    vertical-align: 0.1em;
}
.uq-f-sim .uq-f-times {
    font-size: 0.35em;
    font-weight: normal;
    margin-left: 4px;
    color: var(--uq-text-muted);
}

/* 区切り線 */
.uq-f-sim .uq-f-dashed, .uq-dl-item .uq-f-dashed {
    border: none;
    border-bottom: 1px dashed var(--uq-border);
    margin: 16px 0;
}

/* --- テーブル --- */
.uq-f-sim .uq-f-table, .uq-dl-item .uq-f-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    background: transparent;
    margin: 0;
    max-width: 100%;
}
.uq-f-sim .uq-f-table thead, .uq-dl-item .uq-f-table thead {
    background: transparent;
    border: 0;
}
.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: 7px 0;
    border: 0;
    color: inherit;
    background: transparent;
    vertical-align: middle;
}
.uq-f-sim .uq-f-table th, .uq-dl-item .uq-f-table th {
    text-align: left;
    font-weight: 500;
    font-size: 0.88em;
    color: var(--uq-text-sub);
}
.uq-f-sim .uq-f-table td, .uq-dl-item .uq-f-table td {
    text-align: right;
    font-size: 1em;
    font-weight: 600;
}
.uq-f-sim .uq-table-large td, .uq-dl-item .uq-table-large td {
    font-size: 1.8em;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.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: 16px 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: 16px;
    font-size: 0.72em;
    line-height: 1.7;
    text-align: left;
    color: var(--uq-text-muted);
}
.uq-f-sim .uq-f-notes .uq-pink, .uq-dl-item .uq-f-notes .uq-pink {
    color: var(--uq-pink);
}

/* --- CTAボタン --- */
.uq-f-sim .uq-f-cta, .uq-dl-item .uq-f-cta {
    display: inline-block;
    padding: 14px 36px;
    background: var(--uq-pink);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: opacity var(--uq-transition);
}
.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: var(--uq-pink-light);
    padding: 14px 16px;
    font-size: 0.78em;
    color: var(--uq-pink);
    border: 1px solid var(--uq-pink-border);
    text-align: left;
    line-height: 1.7;
    margin-bottom: 12px;
}

/* --- 見出し(シミュレーターのみ) --- */
.uq-f-sim .uq-f-heading {
    margin-top: 36px;
    margin-bottom: 16px;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    color: var(--uq-text);
    letter-spacing: 0.01em;
}

/* --- セレクトボックス(シミュレーターのみ) --- */
.uq-f-sim select.uq-f-card {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 14px 40px 14px 16px;
    margin-bottom: 0;
    outline: none;
    box-sizing: border-box;
    font-size: 0.92em;
    font-family: inherit;
    font-weight: 600;
    color: var(--uq-text);
    background: var(--uq-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6070' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    transition: border-color var(--uq-transition), box-shadow var(--uq-transition);
}
.uq-f-sim select.uq-f-card:focus {
    border-color: var(--uq-blue);
}

/* --- カスタム情報(説明文/良いところ/気になるところ) --- */
.uq-f-sim .uq-dl-custom, .uq-dl-item .uq-dl-custom { margin: 12px 0 16px; }

.uq-f-sim .uq-dl-desc, .uq-dl-item .uq-dl-desc {
    line-height: 1.8;
    margin-bottom: 14px;
}

.uq-f-sim .uq-dl-pc-wrap, .uq-dl-item .uq-dl-pc-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.uq-f-sim .uq-dl-pros, .uq-dl-item .uq-dl-pros,
.uq-f-sim .uq-dl-cons, .uq-dl-item .uq-dl-cons {
    border: 1px solid var(--uq-border);
    padding: 10px 12px;
    line-height: 1.7;
}
.uq-f-sim .uq-dl-pros ul, .uq-dl-item .uq-dl-pros ul,
.uq-f-sim .uq-dl-cons ul, .uq-dl-item .uq-dl-cons ul {
    margin: 6px 0 0; padding: 0; list-style: none;
}
.uq-f-sim .uq-dl-pros li, .uq-dl-item .uq-dl-pros li,
.uq-f-sim .uq-dl-cons li, .uq-dl-item .uq-dl-cons li {
    padding: 2px 0 2px 20px;
    position: relative;
}
.uq-f-sim .uq-dl-pros li::before, .uq-dl-item .uq-dl-pros li::before {
    content: "\25CB"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--uq-blue);
}
.uq-f-sim .uq-dl-cons li::before, .uq-dl-item .uq-dl-cons li::before {
    content: "\25B3"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--uq-pink);
}

.uq-f-sim .uq-dl-pc-label, .uq-dl-item .uq-dl-pc-label {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}
.uq-f-sim .uq-dl-pc-good, .uq-dl-item .uq-dl-pc-good { color: var(--uq-blue); }
.uq-f-sim .uq-dl-pc-bad, .uq-dl-item .uq-dl-pc-bad { color: var(--uq-pink); }

/* --- レスポンシブ --- */
@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: 2em; }
    .uq-f-sim .uq-f-cta, .uq-dl-item .uq-f-cta { padding: 14px 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; }
    .uq-f-sim .uq-dl-pc-wrap, .uq-dl-item .uq-dl-pc-wrap { grid-template-columns: 1fr; }
}