@charset "UTF-8";.iv-page{--iv-key:#004896;--iv-key-dark:#00366f;--iv-key-pale:#eef4fb;--iv-sale:#c8102e;--iv-text:#1f2a37;--iv-text-sub:#334155;--iv-muted:#4a5563;--iv-gray:#5b6472;--iv-line:#d5dbe3;--iv-line-mid:#c3ccd8;--iv-line-strong:#9aa6b5;--iv-line-row:#dde3ea;--iv-bg-sub:#f4f6f9}.iv-page{color:var(--iv-text);padding-top:16px}.iv-page *,.iv-page *::before,.iv-page *::after{box-sizing:border-box}.iv-wrap{max-width:1850px;margin:0 auto;padding:0 16px}.iv-page a:focus-visible,.iv-page button:focus-visible,.iv-page select:focus-visible,.iv-page input:focus-visible{outline:3px solid var(--iv-key);outline-offset:2px}.iv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--iv-key)}.iv-head__title{margin:0;font-size:24px;font-weight:700;line-height:1.3;text-wrap:balance;word-break:auto-phrase}.iv-head__lead{margin:0;font-size:16px;line-height:1.5;color:var(--iv-muted);line-break:strict;text-wrap:pretty}.iv-filter-toggle{display:none}.iv-filter{margin-bottom:16px;padding:12px 14px 14px;background:var(--iv-bg-sub);border:1px solid var(--iv-line);border-radius:8px}.iv-filter__title{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.3}.iv-filter__grid{display:flex;flex-wrap:wrap;gap:8px 10px}.iv-filter__grid+.iv-filter__grid{margin-top:8px}.iv-field{display:flex;flex:1 1 auto;flex-direction:column;justify-content:flex-end;gap:2px;max-width:100%}.iv-field--kw{flex:1 1 320px}.iv-field__label{font-size:16px;font-weight:700;line-height:1.35;color:var(--iv-text-sub)}.iv-field__note{margin-left:8px;font-weight:400;color:var(--iv-muted)}.iv-field__select,.iv-field__input{width:100%;min-width:0;min-height:38px;padding:4px 6px;font:inherit;font-size:16px;line-height:1.35;color:var(--iv-text);background:#fff;border:1px solid var(--iv-line-strong);border-radius:6px}.iv-field__select.is-active{background:var(--iv-key-pale);border-color:var(--iv-key);box-shadow:inset 0 0 0 1px var(--iv-key);font-weight:700}.iv-field__select option:disabled{color:#6b7280}.iv-checks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;margin:12px 0 0;padding:0;border:0}.iv-checks__legend{float:left;margin-right:4px;padding:0;font-size:16px;font-weight:700;line-height:38px;color:var(--iv-text-sub)}.iv-check{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:4px 12px 4px 10px;font-size:16px;line-height:1.35;white-space:nowrap;background:#fff;border:1px solid var(--iv-line-mid);border-radius:6px;cursor:pointer}.iv-check:has(.iv-check__input:checked) {background:var(--iv-key-pale);border-color:var(--iv-key);font-weight:700}.iv-check.is-disabled{color:var(--iv-gray);background:#eceff3;cursor:not-allowed}.iv-check__input{width:18px;height:18px;margin:0;accent-color:var(--iv-key)}.iv-filter__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.iv-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;font:inherit;font-size:16px;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;border:1px solid transparent;border-radius:6px;cursor:pointer}.iv-page .iv-btn--primary{color:#fff;background:var(--iv-key);border-color:var(--iv-key)}.iv-page .iv-btn--primary:hover{background:var(--iv-key-dark)}.iv-page .iv-btn--ghost{color:var(--iv-key);background:#fff;border-color:var(--iv-key)}.iv-page .iv-btn--ghost:hover{background:var(--iv-key-pale)}.iv-result__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:8px}.iv-result__title{margin:0;font-size:18px;font-weight:700;line-height:1.3}.iv-result__total{margin-right:2px;font-size:26px;color:var(--iv-key);font-variant-numeric:tabular-nums}.iv-result__range{margin-left:4px;font-size:16px;font-weight:400;color:var(--iv-muted)}.iv-result__lines{margin-left:auto}.iv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.iv-page .iv-chip{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;font-size:16px;line-height:1.4;color:var(--iv-key-dark);text-decoration:none;background:var(--iv-key-pale);border:1px solid var(--iv-key);border-radius:6px}.iv-page .iv-chip:hover{background:#dbe8f6}.iv-chip__x{font-weight:700}.iv-notice{margin:0 0 8px;padding:8px 12px;font-size:16px;line-height:1.5;background:#fff7e6;border-left:4px solid #b45309}.iv-notice--error{background:#fdecec;border-left-color:#b91c1c}.iv-tools{display:flex;padding:8px 0;border-top:1px solid var(--iv-line)}.iv-tools__group{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;min-width:0}.iv-tools__label{flex-shrink:0;font-size:16px;font-weight:700;white-space:nowrap}.iv-tools__list{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}.iv-page .iv-pill{display:inline-block;padding:3px 6px;font-size:16px;line-height:1.4;color:var(--iv-text);text-decoration:none;background:#fff;border:1px solid var(--iv-line-mid);border-radius:6px}.iv-page .iv-pill:hover{border-color:var(--iv-key)}.iv-page .iv-pill[aria-current]{color:#fff;font-weight:700;background:var(--iv-key);border-color:var(--iv-key)}.iv-table{width:100%;font-size:16px;line-height:1.35;border:0;border-collapse:collapse;table-layout:fixed}.iv-table__th{position:sticky;top:0;z-index:1;padding:6px 8px;font-weight:700;text-align:left;vertical-align:middle;background:#e9eef5;border:0;border-bottom:2px solid var(--iv-key)}.iv-table__th+.iv-table__th{border-left:1px solid #d5dde8}.iv-table__th--image{width:136px}.iv-table__th--name{width:17%}.iv-table__th--price{width:172px}.iv-sorter{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px}.iv-sorter__label{margin-right:2px}.iv-page .iv-sorter__btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;line-height:1;color:var(--iv-gray);text-decoration:none;border-radius:4px}.iv-page .iv-sorter__btn:hover{color:var(--iv-key-dark);background:#d3deeb}.iv-page .iv-sorter__btn.is-current{color:#fff;background:var(--iv-key)}.iv-row>td,.iv-row>th{padding:6px 8px;font-weight:400;text-align:left;vertical-align:top;background:none;border:0;border-bottom:1px solid var(--iv-line-row)}.iv-row>.iv-spec,.iv-row>.iv-row__price{border-left:1px solid #edf0f4}.iv-row:nth-child(even) {background:#fafbfd}.iv-row:hover{background:#f2f7fd}.iv-row__img img{display:block;width:120px;height:auto;border-radius:4px}.iv-page .iv-row__link{font-weight:700;color:var(--iv-key-dark);text-decoration:none;overflow-wrap:anywhere}.iv-page .iv-row__link:hover{text-decoration:underline}.iv-row__code{display:block;color:var(--iv-muted);overflow-wrap:anywhere}.iv-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.iv-badges:empty{display:none}.iv-badge{display:inline-block;padding:1px 6px;line-height:1.3;color:var(--iv-text-sub);background:#fff;border:1px solid var(--iv-line-strong);border-radius:4px}.iv-badge--sale{font-weight:700;color:#fff;background:var(--iv-sale);border-color:var(--iv-sale)}.iv-price__regular,.iv-price__ex{display:block;color:var(--iv-muted)}.iv-price__main{display:block}.iv-price__main b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.iv-price__regular+.iv-price__main b{color:var(--iv-sale)}.iv-page .iv-row__cta{display:inline-block;margin-top:6px;padding:4px 10px;font-weight:700;color:var(--iv-key);text-decoration:none;background:#fff;border:1px solid var(--iv-key);border-radius:6px}.iv-page .iv-row__cta:hover{color:#fff;background:var(--iv-key)}.iv-spec__head{display:none}.iv-spec__icon{display:block;max-width:100%;height:auto;margin-bottom:4px}.iv-spec__main,.iv-spec__sub,.iv-spec__note{display:block;overflow-wrap:anywhere}.iv-spec__main{font-weight:700}.iv-spec__sub,.iv-spec__note{color:var(--iv-muted)}.iv-spec--net .iv-spec__sub{font-weight:700;color:inherit}.iv-pager__list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:16px 0 0;padding:0;list-style:none}.iv-pager__item,.iv-pager__gap{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 10px;font-size:16px}.iv-page .iv-pager__item{color:var(--iv-text);text-decoration:none;background:#fff;border:1px solid var(--iv-line-mid);border-radius:6px}.iv-page a.iv-pager__item:hover{border-color:var(--iv-key)}.iv-page .iv-pager__item.is-current{font-weight:700;color:#fff;background:var(--iv-key);border-color:var(--iv-key)}.iv-empty{margin-top:12px;padding:24px 16px;text-align:center;border:1px dashed var(--iv-line-strong);border-radius:8px}.iv-empty p{margin:0 0 8px;font-size:16px;line-height:1.6}.iv-empty .iv-empty__title{font-size:18px;font-weight:700}.iv-suggest{margin-top:32px}.iv-suggest__head{margin-bottom:12px}.iv-suggest__title{margin:0 0 6px;padding-left:12px;border-left:5px solid var(--iv-key);font-size:22px;font-weight:700;line-height:1.5}.iv-suggest__lead{margin:0;color:var(--iv-muted);font-size:16px;line-height:1.6;line-break:strict;text-wrap:pretty}.iv-suggest__cond{color:var(--iv-text)}.iv-suggest__more{margin:20px 0 0;text-align:center}.iv-suggest__more .iv-btn{max-width:100%;overflow-wrap:anywhere}@media (width >= 1280px) {
  .iv-spec--case .iv-spec__sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}@media (1280px <= width < 1600px) {
  .iv-table__th--image { width: 108px; }
  .iv-table__th--name { width: 14%; }
  .iv-table__th--price { width: 164px; }

  .iv-row__img img {
    width: 92px;
  }
}@media (width < 1280px) {
  .iv-table,
  .iv-table tbody {
    display: block;
  }

  .iv-table thead {
    display: none;
  }

  .iv-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--iv-line-row);
  }

  /* 表のセルの余白・線をいったん消す（価格・スペックの縦線を消すため .iv-spec・.iv-row__price も並べている） */
  .iv-row > td,
  .iv-row > th,
  .iv-row > .iv-spec,
  .iv-row > .iv-row__price {
    display: block;
    padding: 0;
    border: 0;
  }

  .iv-row__img {
    grid-column: 1 / span 1;
  }

  .iv-row__name {
    grid-column: 2 / span 3;
  }

  .iv-row > .iv-row__price {
    grid-column: 5 / span 2;
    text-align: right;
  }

  /* スペックの小さなカード */
  .iv-row > .iv-spec {
    grid-column: span 2;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
  }

  /* 7 つ目の OS・その他は 1 行を使う（スマホの span 3 にも勝つよう .iv-spec を重ねて強くしている） */
  .iv-row > .iv-spec.iv-spec--os {
    grid-column: 1 / -1;
  }

  .iv-spec__head {
    display: block;
    font-weight: 700;
    color: var(--iv-muted);
  }

  /* 指で押すので、押せる部品は高さ 44px 以上にする */
  .iv-field__select,
  .iv-field__input,
  .iv-check {
    min-height: 44px;
  }

  .iv-page .iv-btn,
  .iv-page .iv-chip {
    min-height: 44px;
  }

  .iv-page .iv-pill,
  .iv-page .iv-row__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .iv-pager__item,
  .iv-pager__gap {
    min-width: 44px;
    min-height: 44px;
  }
}@media (width <= 767px) {
  /* 共通ヘッダは画面上部に固定。共通 CSS は main を 60px＋50px 下げてヘッダの高さを見込んでいるが、
     この画面はパンくずに絞り込み条件が入り、折り返すとヘッダが高くなって h1 が隠れる。
     そこで JS（js/inv.js）が測った実際の高さ（--iv-header-h）の分だけ下げる。
     118px は JS が動く前・動かないときの値（パンくず 1 行分のヘッダの高さ） */
  .iv-page {
    margin-top: 0;
    padding-top: calc(var(--iv-header-h, 118px) + 8px);
  }

  .iv-wrap {
    padding: 0 12px;
  }

  .iv-head__title {
    font-size: 22px;
  }

  /* --- 絞り込みの開閉 --- */
  .iv-filter-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    min-height: 48px;
    margin-bottom: 16px;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--iv-key);
    text-decoration: none;
    background: #fff;
    border: 2px solid var(--iv-key);
    border-radius: 8px;
  }

  .iv-filter-toggle::after {
    content: "▼";
    margin-left: auto;
  }

  .iv-filter-toggle[aria-expanded="true"]::after {
    content: "▲";
  }

  /* 「3件指定中」 */
  .iv-filter-toggle__count {
    padding: 0 8px;
    color: #fff;
    background: var(--iv-key);
    border-radius: 4px;
  }

  /* JS が無いときは #iv-filter へのリンク（:target）で開く */
  /* #iv-filter へ移動したとき、固定ヘッダの下に隠れないよう止める位置 */
  .iv-filter {
    display: none;
    scroll-margin-top: calc(var(--iv-header-h, 118px) + 8px);
  }

  .iv-filter:target,
  .iv-filter.is-open {
    display: block;
  }

  /* JS が動くときは開閉ボタンの状態だけで決める（:target は履歴を書き換えても外れないため） */
  .iv-filter.is-js:not(.is-open) {
    display: none;
  }

  /* --- 絞り込みの欄: 見出しを左、選択欄を右に並べて縦を詰める。
         選択肢名が右に収まらない欄は見出しの下に全幅で出す --- */
  .iv-field {
    flex-basis: 100%;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px 8px;
  }

  .iv-field__label {
    flex: 0 0 8em;
    word-break: auto-phrase;
    overflow-wrap: normal;
  }

  .iv-field__select {
    flex: 1 1 auto;
    width: auto;
  }

  .iv-field--kw .iv-field__label,
  .iv-field__input {
    flex: 1 1 100%;
  }

  .iv-checks__legend {
    float: none;
    width: 100%;
    line-height: 1.4;
  }

  .iv-filter__actions .iv-btn {
    flex: 1 1 160px;
    min-height: 48px;
  }

  /* --- 並び替え・表示件数・指定中の条件: ボタンは折り返さず横にスクロール --- */
  .iv-tools__group {
    width: 100%;
  }

  .iv-tools__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    overscroll-behavior-x: contain;
  }

  .iv-page .iv-pill,
  .iv-page .iv-chip {
    white-space: nowrap;
  }

  /* --- 一覧のカード: 6 等分のまま 画像 2・商品名 4、価格は全幅、スペックは 3 ずつ（左右同じ幅の 2 列） --- */
  .iv-row {
    gap: 8px 10px;
    padding: 12px 0;
  }

  .iv-row__img {
    grid-column: 1 / span 2;
  }

  .iv-row__img img {
    width: 100%;
    max-width: 100px;
  }

  .iv-row__name {
    grid-column: 3 / span 4;
  }

  /* 価格は 1 行に並べ、「構成と価格を見る」を全幅のボタンにする */
  .iv-row > .iv-row__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    grid-column: 1 / -1;
    text-align: left;
  }

  .iv-price__regular,
  .iv-price__main,
  .iv-price__ex {
    display: inline;
  }

  .iv-page .iv-row__cta {
    display: flex;
    justify-content: center;
    flex: 1 1 100%;
  }

  .iv-row > .iv-spec {
    grid-column: span 3;
  }

  .iv-spec__icon {
    display: none;
  }
}