/* 機材ガイド第2版（guides/quest-equipment-v2.html）だけの部品。ほかはアプリのページと同じ common.css・app.css・port-fixes.css・port-flow.css。
   見出し・字の大きさ・線・地の色は app.css の値にそろえる（節の見出し 38px／小見出し 20px／本文 15〜16px／補足 13px、線 #2a2d34、少し明るい黒 #1a1c22） */

/* 写真の面: 大きさをそろえた明るい灰色。製品写真の白い地は multiply で面の色に溶かす（白い製品も黒い製品も見分けやすい） */
.ge-page .ge-photo{background:#eef0f3;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:4/3}
.ge-page .ge-photo img{display:block;width:100%;height:100%;object-fit:contain;padding:10%;box-sizing:border-box;mix-blend-mode:multiply}

/* 一番上: 右に Meta Quest 3 と A10ピストンSA+PLUS の写真を並べる（青い帯の上。白い製品なので面は敷かない） */
.ge-hero-kit{margin:0;display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:20px}
.ge-hero-item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ge-hero-item img{display:block;width:100%;height:auto;max-width:340px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.ge-hero-device img{width:auto;max-height:300px;max-width:100%}
.ge-hero-item span{font-size:15px;font-weight:700;color:#eeeff2;line-height:1.5}
.ge-hero-item small{display:block;font-size:12px;font-weight:500;color:#c9ccd3}

/* 2つ並べる（Meta Quest 3 と 3S） */
.ge-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:28px}
.ge-item .ge-photo{aspect-ratio:3/2;max-width:460px}
.ge-item .ge-photo img{padding:2%}
.ge-item h3{font-size:20px;margin:16px 0 0}
.ge-choice{font-size:15px;color:#a3a7b0;margin-top:4px}
.ge-spec{margin:14px 0 14px;border-top:1px solid #2a2d34}
.ge-spec>div{display:grid;grid-template-columns:7.5em 1fr;border-bottom:1px solid #2a2d34}
.ge-spec dt,.ge-spec dd{margin:0;padding:10px 0;font-size:15px}
.ge-spec dt{color:#a3a7b0;font-size:13px;padding-top:12px}
.ge-lead-note{margin:-8px 0 0;max-width:820px}
.ge-lead-note a{color:#eeeff2;font-weight:700;white-space:nowrap}

/* 小さなまとまり（追加用品・取付）: 囲まず、上の線と空きで区切る */
.ge-sub{margin-top:56px;padding-top:36px;border-top:1px solid #2a2d34}
.ge-sub-label{font-size:13px;font-weight:700;color:#a3a7b0}
.ge-sub-title{font-size:24px;margin-top:6px}
.ge-sub-lead{font-size:15px;line-height:1.85;color:#a3a7b0;margin-top:12px;max-width:820px}
.ge-sub-lead strong{color:#eeeff2}

/* 写真と説明の行 */
.ge-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:26px}
.ge-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:start}
.ge-row .ge-photo{aspect-ratio:1}
.ge-row h3,.ge-row h4{font-size:20px;line-height:1.5;margin:6px 0 0}
.ge-row p{font-size:15px;line-height:1.85;margin-top:8px}
.ge-tag{display:inline-block;font-size:12px!important;font-weight:700;color:#a3a7b0;margin-top:0!important}
.ge-product{color:#a3a7b0;font-size:14px!important;margin-top:4px!important}
.ge-product span{display:block;font-size:12px}
.ge-fit{font-size:14px!important;font-weight:650}
.ge-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}

/* 機器の表: アプリのページの表（qa-device-table）に、写真と3つ目の列を足す */
.qg-app .ge-device-table th{width:auto}
.qg-app .ge-device-table thead th{font-size:13px;color:#a3a7b0;font-weight:700;white-space:nowrap}
.qg-app .ge-device-table thead th:first-child{width:50%}
.qg-app .ge-device-table td{width:25%}
.ge-device{display:flex;align-items:center;gap:16px}
.ge-thumb{flex:0 0 64px;width:64px;aspect-ratio:1!important;border-radius:10px}
.ge-thumb img{padding:6%}
.ge-device-name{display:block;font-size:16px;font-weight:700;color:#eeeff2}
a.ge-device-name{text-decoration:underline;text-decoration-color:#5b606a;text-underline-offset:4px}
a.ge-device-name:hover{text-decoration-color:currentColor}
.ge-device small{display:block;font-size:13px;color:#a3a7b0;font-weight:400;margin-top:2px}
.ge-variants{display:flex!important;gap:16px}
.ge-variants a{color:#eeeff2;font-weight:650;text-decoration:underline;text-decoration-color:#5b606a;text-underline-offset:3px}
.ge-none{color:#a3a7b0}
.ge-col-label{display:none}
.qg-app .ge-alt{background:#1a1c22}

/* 取付の図: 左（スタンドと取付プレートの拡大）→ 付け替え → 右（Ergotron LX） */
.ge-transfer{margin:28px 0 0;display:grid;grid-template-columns:auto 130px minmax(0,1fr);gap:20px;align-items:center}
.ge-transfer-from{display:grid;grid-template-columns:150px 120px;gap:14px;align-items:center}
.ge-transfer-from .ge-photo{aspect-ratio:1}
.ge-plate{width:120px;border-radius:50%!important;box-shadow:0 0 0 2px #7aa7ff}
.ge-plate img{padding:0;transform:scale(3.2);transform-origin:58% 6%}
.ge-transfer-from p{grid-column:1/-1;font-size:13px;font-weight:700;color:#7aa7ff;text-align:center}
.ge-transfer-arrow{position:relative;text-align:center;font-size:13px;font-weight:700;color:#7aa7ff;padding-bottom:18px}
.ge-transfer-arrow::after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:#7aa7ff}
.ge-transfer-arrow::before{content:'';position:absolute;right:8px;bottom:2px;width:8px;height:8px;border-top:2px solid #7aa7ff;border-right:2px solid #7aa7ff;transform:rotate(45deg)}
.ge-transfer-to{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:18px;align-items:center}
.ge-transfer-to .ge-photo{aspect-ratio:1;grid-row:1/3}
.ge-transfer-to h4{font-size:20px;margin:0;align-self:end}
.ge-transfer-to .qa-text-link{margin-top:6px;align-self:start}
.ge-transfer figcaption{grid-column:1/-1;margin-top:6px}
.ge-extension{margin-top:36px;padding-top:28px;border-top:1px solid #2a2d34;max-width:640px}


@media (max-width:900px){
  .ge-rows{grid-template-columns:1fr;gap:32px}
  /* 取付の図: 900px 以下では縦に並べる（横に3つ並べると右の名前とリンクが折れる） */
  .ge-transfer{grid-template-columns:1fr;gap:10px;max-width:440px}
  .ge-transfer-arrow{padding:0 0 0 0;height:56px;width:100%}
  .ge-transfer-arrow span{position:absolute;left:calc(50% + 14px);top:50%;transform:translateY(-50%)}
  .ge-transfer-arrow::after{left:50%;right:auto;top:4px;bottom:8px;width:2px;height:auto}
  .ge-transfer-arrow::before{left:50%;right:auto;bottom:6px;margin-left:-4px;transform:rotate(135deg)}
  .ge-transfer-from{grid-template-columns:1fr 1fr;justify-items:center}
  .ge-transfer-from .ge-photo:first-child{width:100%;max-width:170px}
  .ge-transfer-to{grid-template-columns:140px minmax(0,1fr)}
  .ge-transfer-to h4{font-size:18px}
}
@media (max-width:760px){
  .ge-hero-kit{max-width:440px;margin:0 auto;gap:14px}
  .ge-hero-device img{max-height:220px}
  .ge-pair{grid-template-columns:1fr;gap:36px}
  .ge-item .ge-photo{max-width:440px}
  .ge-row{grid-template-columns:120px minmax(0,1fr);gap:16px}
  .ge-row h3,.ge-row h4{font-size:19px}
  .ge-sub-title{font-size:22px}
  /* 表: 1機種ずつのまとまりにする（写真と名前の行 → 2つの対応状況を横に並べる） */
  .ge-device-table thead{display:none}
  .ge-device-table,.ge-device-table tbody,.ge-device-table tr{display:block}
  .ge-device-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #2a2d34}
  .qg-app .ge-device-table th{grid-column:1/-1;border-bottom:0;padding:16px 4px 8px}
  .qg-app .ge-device-table td{border-bottom:0;padding:4px 4px 16px;width:auto}
  .qg-app .ge-device-table th{width:auto}
  .ge-col-label{display:block;font-size:12px;color:#a3a7b0;margin-bottom:2px}
}
@media (max-width:390px){
  .ge-row{grid-template-columns:96px minmax(0,1fr)}
  .ge-transfer-to{grid-template-columns:110px minmax(0,1fr)}
}

/* VRヘッドセットの比較表（今のサイトの「VRヘッドセットの選び方」と同じ13機種に、AVScript Quest版の列を足した） */
.ge-table-wrap{margin-top:8px}
.qg-app .ge-hmd-table th,.qg-app .ge-hmd-table td{width:auto;text-align:center;padding:12px 10px;font-size:14px}
.qg-app .ge-hmd-table th[scope=row],.qg-app .ge-hmd-table thead th:first-child{text-align:left;width:30%}
.qg-app .ge-hmd-table thead th{font-size:13px;color:#a3a7b0;font-weight:700;line-height:1.5;vertical-align:bottom}
.qg-app .ge-hmd-table thead th span{display:inline-block}
.ge-hmd-table .ge-good{color:#eeeff2;font-weight:700}
.ge-hmd-table .ge-weak{color:#7d828c}
.ge-hmd-table .qa-device-state{justify-content:center}
.ge-hmd-table .ge-weak .qa-device-state{color:#a3a7b0}
.ge-badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#eeeff2;color:#000;font-size:11px;font-weight:700;vertical-align:2px}
.ge-cur{display:none}
.ge-source{font-size:12px}
.ge-source a{color:#a3a7b0;text-decoration:underline;text-underline-offset:3px}
.ge-pair-title{margin-top:48px}
.ge-sub-first{margin-top:8px;padding-top:0;border-top:0}
@media (max-width:760px){
  .qg-app .ge-hmd-table th,.qg-app .ge-hmd-table td{padding:10px 4px;font-size:12px}
  .qg-app .ge-hmd-table thead th{font-size:11px}
  .qg-app .ge-hmd-table th[scope=row]{font-size:13px}
  .ge-hmd-table .qa-device-state{flex-direction:column;gap:0;font-size:11px;line-height:1.4}
  .ge-badge{display:block;width:max-content;margin:4px 0 0}
}
/* 480px 以下: 「現行機」の列を外し、機種名の下に「現行機／販売終了」と書く（5列だと詰まって見出しや名前が折れる） */
@media (max-width:480px){
  .ge-hmd-table tr>:nth-child(2){display:none}
  .ge-cur{display:block;font-size:11px;font-weight:400;color:#a3a7b0;margin-top:2px}
  .qg-app .ge-hmd-table th[scope=row]{width:34%}
}
.ge-page :is(h1,h2,h3,h4,.ge-transfer-arrow span,td,th){word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere}
.ge-page .ge-transfer{margin-top:28px}
.ge-item{max-width:460px}
/* 340px 以下: 比較表の字をもう一段小さくし、「（FANZA）」「動作確認済み」が途中で折れないようにする */
@media (max-width:340px){
  .qg-app .ge-hmd-table thead th{font-size:10px}
  .ge-hmd-table .qa-device-state{font-size:10px}
  .qg-app .ge-hmd-table th,.qg-app .ge-hmd-table td{padding:10px 2px}
}