/* LARME / PB 共通。既存ショップに影響しないよう .qe-directory 内だけに適用。 */

.qe-directory{--qe-ink:#40373a;--qe-muted:#756b6e;--qe-line:#e9dfe2;--qe-accent:#8d6073;--qe-paper:#fffaf8;max-width:1100px;margin:24px auto 64px;color:var(--qe-ink);font:15px/1.8 -apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;text-align:left;overflow-wrap:anywhere}

.qe-directory *{box-sizing:border-box}.qe-directory a{color:inherit;text-decoration:none}.qe-directory a:focus-visible{outline:3px solid #755166;outline-offset:4px}.qe-directory h1,.qe-directory h2,.qe-directory h3,.qe-directory p,.qe-directory ul{padding:0;margin:0}.qe-directory ul{list-style:none}.qe-directory img{display:block;max-width:100%;width:100%;height:auto}/* 比率固定・高さ固定・object-fit:cover は使わない。高さの違う画像も全体表示。 */

.qe-directory .qe-path{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--qe-muted);padding:0 24px 18px}.qe-directory .qe-path a{text-decoration:underline;text-underline-offset:4px}

.qe-directory h1{font-size:clamp(19px,2.5vw,25px);font-weight:600;line-height:1.6}

.qe-directory .qe-cross{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 24px 28px;padding:18px 22px;border:1px solid var(--qe-line);font-size:13px}.qe-directory .qe-cross a{color:var(--qe-accent);font-weight:600;text-decoration:underline;text-underline-offset:5px}

.qe-directory .qe-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 24px 50px}.qe-directory .qe-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:82px;padding:12px 5px;border:1px solid var(--qe-line);background:#fff}.qe-directory .qe-nav strong{font:600 20px/1.3 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em}.qe-directory .qe-nav span{font-size:11px;color:var(--qe-muted);margin-top:6px}.qe-directory .qe-nav a:hover{background:var(--qe-paper);border-color:var(--qe-accent)}

.qe-directory .qe-section{padding:0 24px;margin-bottom:56px;scroll-margin-top:130px}.qe-directory .qe-section-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--qe-line);padding-bottom:14px}.qe-directory h2{font:600 34px/1.3 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em}.qe-directory .qe-section-head span{font-size:13px;color:var(--qe-muted)}.qe-directory .qe-section-intro{font-size:13px;color:var(--qe-muted);margin:14px 0 24px}.qe-directory .qe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px;align-items:start}

.qe-directory .qe-series{min-width:0;border-bottom:1px solid var(--qe-line);padding-bottom:24px}.qe-directory .qe-banner{display:block;margin-bottom:12px}.qe-directory .qe-banner:hover{opacity:.9}.qe-directory .qe-series h3{font-size:16px;line-height:1.6;font-weight:600}.qe-directory .qe-en{font-size:10px;letter-spacing:.05em;color:var(--qe-muted);margin-top:3px}.qe-directory .qe-color-title{font-size:12px;margin:15px 0 9px;color:var(--qe-accent);scroll-margin-top:130px}.qe-directory .qe-colors{display:flex;gap:6px;flex-wrap:wrap}.qe-directory .qe-colors a{display:block;border:1px solid var(--qe-line);padding:7px 10px;font-size:12px;line-height:1.5;min-height:34px;background:#fff}.qe-directory .qe-colors a:hover{background:#f4ecef;border-color:var(--qe-accent)}.qe-directory .qe-back{display:block;width:fit-content;margin:24px 0 0 auto;color:var(--qe-muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}.qe-directory .qe-foot{padding:24px;border-top:1px solid var(--qe-line);background:var(--qe-paper);font-size:13px}.qe-directory .qe-foot a{text-decoration:underline;text-underline-offset:4px;color:var(--qe-accent)}

@media(max-width:600px){.qe-directory{margin-top:16px;font-size:14px}.qe-directory .qe-path{padding:0 16px 14px}.qe-directory .qe-cross{margin:18px 16px 22px;padding:14px;display:block}.qe-directory .qe-cross a{display:inline-block;margin-top:6px}.qe-directory .qe-nav{margin:0 16px 36px;gap:4px}.qe-directory .qe-nav a{min-height:76px;padding:10px 2px}.qe-directory .qe-nav strong{font-size:15px}.qe-directory .qe-nav span{font-size:9px}.qe-directory .qe-section{padding:0 16px;margin-bottom:40px}.qe-directory .qe-grid{grid-template-columns:1fr;gap:28px}.qe-directory h2{font-size:30px}.qe-directory .qe-section-head{gap:12px}.qe-directory .qe-section-head span{font-size:12px}.qe-directory .qe-colors a{padding:9px 11px;min-height:40px}.qe-directory .qe-foot{padding:20px 16px}}



.qe-directory .qe-series-note,.qe-directory .qe-stock-note{margin:12px 0;font-size:12px;line-height:1.9;color:var(--qe-muted)}.qe-directory .qe-stock-note{padding:14px;background:#faf2e9;border-left:3px solid #b78a65}.qe-directory .qe-stock-note strong{color:#805a40}.qe-directory .qe-stock-note a{color:var(--qe-accent);text-decoration:underline;text-underline-offset:3px}



/* 上部画像：元の比率で全体表示。大きな装飾タイトル枠は撤去。 */

.qe-directory .qe-header{padding:0 24px;text-align:center;background:#fff}

.qe-directory .qe-pb-header{width:100%;max-width:800px;height:auto;margin:0 auto}

.qe-directory .qe-header h1{font-size:18px;line-height:1.7;font-weight:600;margin:14px 0 0}

@media(max-width:600px){.qe-directory .qe-header{padding:0 16px}.qe-directory .qe-header h1{font-size:15px;margin-top:12px}}



/* 期間ラベルは1MONTHを含め一行表示。小さいスマホではナビ自体を横にスクロール可能。 */

.qe-directory .qe-nav{grid-template-columns:repeat(5,minmax(64px,1fr));overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 2px 8px}

.qe-directory .qe-nav li{min-width:0}

.qe-directory .qe-nav strong{white-space:nowrap;word-break:normal;overflow-wrap:normal;flex-shrink:0;letter-spacing:0}

.qe-directory .qe-section-head h2{white-space:nowrap;word-break:normal;overflow-wrap:normal;flex-shrink:0}

@media(max-width:600px){.qe-directory .qe-nav strong{font-size:clamp(11px,3vw,15px)}}

/* LARMEシリコン限定の試作。画像と名前と商品リンクを1カードとして管理。 */

.qe-directory .qe-lens-hint{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:18px 0 10px;font-size:11px;color:var(--qe-accent)}

.qe-directory .qe-lens-track{display:flex;gap:14px;overflow-x:auto;max-width:100%;padding:6px 3px 14px;scroll-snap-type:x proximity;scroll-padding-inline:3px;overscroll-behavior-inline:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}

.qe-directory .qe-lens-track>li{flex:0 0 112px;min-width:0;scroll-snap-align:start}

.qe-directory .qe-lens-track a{display:flex;flex-direction:column;gap:9px;align-items:center;padding:3px;color:var(--qe-ink)}

.qe-directory .qe-lens-track img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}

.qe-directory .qe-lens-track a>span{display:block;max-width:100%;font-size:11px;line-height:1.6;text-align:center;word-break:normal;overflow-wrap:anywhere}

.qe-directory .qe-lens-track:focus-visible{outline:2px solid var(--qe-accent);outline-offset:4px}

@media(max-width:600px){.qe-directory .qe-lens-track{gap:10px}.qe-directory .qe-lens-track>li{flex-basis:96px}}



.qe-directory .qe-lens-heading{margin-top:18px;font:20px/1.4 Georgia,"Times New Roman",serif;letter-spacing:.08em}

.qe-directory .qe-lens-track a>span{min-height:3.2em}


/* コンパクト版：本文はシリーズ名とレンズ一覧を中心に表示 */
.qe-directory .qe-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qe-directory .qe-header{padding-top:0}.qe-directory .qe-logo{width:min(230px,65%);height:auto;margin:8px auto 20px}

.qe-directory .qe-series{padding-bottom:16px}.qe-directory .qe-series h3{font-size:15px}.qe-directory .qe-lens-track{padding-bottom:8px;margin-top:10px}
.qe-directory .qe-section{margin-bottom:30px}.qe-directory .qe-section-head{padding-bottom:8px}.qe-directory .qe-grid{gap:22px 24px;margin-top:18px}
.qe-directory .qe-stock-badge{display:inline-block;margin:7px 0 0;padding:2px 8px;font-size:11px;color:#805a40;background:#faf2e9}
.qe-directory .qe-thumbs{margin:0 24px 24px}.qe-directory .qe-thumb-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;color:var(--qe-muted)}

.qe-directory .qe-thumb-window{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-inline:contain;padding:4px 0 10px}
.qe-directory .qe-thumb-track{display:flex;width:max-content}
.qe-directory .qe-thumb-group{display:flex;gap:12px;padding-right:12px;flex-shrink:0}
.qe-directory .qe-thumb-card{display:block;width:164px;flex-shrink:0}
.qe-directory .qe-thumb-card img{width:100%;height:auto;border:1px solid var(--qe-line);border-radius:5px}
.qe-directory .qe-thumb-card span{display:block;font-size:10px;line-height:1.5;margin-top:5px;text-align:center}
.qe-directory .qe-thumbs.is-enhanced .qe-thumb-window{overflow:hidden}
.qe-directory .qe-thumbs.is-enhanced .qe-thumb-track{animation:qe-thumbs-flow var(--qe-thumb-duration,60s) linear infinite}
.qe-directory .qe-thumbs.is-paused .qe-thumb-track,.qe-directory .qe-thumbs:hover .qe-thumb-track,.qe-directory .qe-thumbs:focus-within .qe-thumb-track{animation-play-state:paused}
.qe-directory .qe-thumbs.is-paused .qe-thumb-window{overflow-x:auto}

@media(max-width:600px){.qe-directory .qe-thumbs{margin:0 16px 22px}.qe-directory .qe-thumb-card{width:142px}.qe-directory .qe-thumb-group{gap:10px;padding-right:10px}.qe-directory .qe-series h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){.qe-directory .qe-thumbs.is-enhanced .qe-thumb-track{animation:none}.qe-directory .qe-thumbs.is-enhanced .qe-thumb-window{overflow-x:auto}.qe-directory .qe-thumb-group[aria-hidden="true"]{display:none}}

/* 公式ロゴ2点。元の正方形画像を保ち、CSSの表示窓で上下の白余白だけを隠す。 */
.qe-directory .qe-logo-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;max-width:760px;margin:0 auto;padding:10px 0 20px}
.qe-directory .qe-brand-logo{display:block;position:relative;min-width:0}
.qe-directory .qe-logo-window{display:block;position:relative;width:100%;aspect-ratio:3.1;overflow:hidden;background:#fff}
.qe-directory .qe-logo-window img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;max-width:none}
.qe-directory .qe-brand-logo+.qe-brand-logo::before{content:"";position:absolute;left:-16px;top:15%;height:70%;width:1px;background:var(--qe-line)}
.qe-directory .qe-brand-logo:hover img{opacity:.8}
@media(max-width:600px){.qe-directory .qe-logo-pair{gap:24px;padding:6px 0 16px}.qe-directory .qe-brand-logo+.qe-brand-logo::before{left:-12px}}

/* 上部だけ正方形の公式ビジュアル。本文の横長バナーは元の比率で全体表示。 */
.qe-directory .qe-thumb-card{width:126px}
.qe-directory .qe-thumb-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.qe-directory .qe-thumb-card span{font-size:10px;min-height:3em}
.qe-directory .qe-series .qe-banner{display:block;margin-bottom:10px}
.qe-directory .qe-series .qe-banner img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
@media(max-width:600px){.qe-directory .qe-thumb-card{width:112px}.qe-directory .qe-thumb-group{gap:10px}}

/* 常時ネイティブ横スクロール。自動移動も同じscrollLeftを使い、指の操作を優先。 */
.qe-directory .qe-thumbs.is-enhanced .qe-thumb-window{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scroll-snap-type:none;touch-action:auto;cursor:grab;scrollbar-width:thin}
.qe-directory .qe-thumbs.is-enhanced .qe-thumb-window:active{cursor:grabbing}
.qe-directory .qe-thumbs.is-enhanced .qe-thumb-track{animation:none;transform:none}
.qe-directory .qe-thumb-window{position:relative}
.qe-directory .qe-thumb-card img{-webkit-user-drag:none;user-select:none}
.qe-directory .qe-thumb-window:focus-visible{outline:2px solid var(--qe-accent);outline-offset:3px}

/* 仕上げ：クリア比較への導線。リンク文字・URLはここに対応するHTMLで編集。 */
.qe-directory .qe-section-head:has(.qe-clear-compare){flex-wrap:wrap;gap:12px}
.qe-directory .qe-section-head .qe-clear-label{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.qe-directory .qe-section-head .qe-clear-compare{display:inline-flex;align-items:center;min-height:32px;font-size:12px;line-height:1.5;white-space:nowrap;color:var(--qe-accent);text-decoration:underline;text-underline-offset:3px}
/* バナー下のレンズ一覧のみ小型化。上段サムネイルのサイズは変更しない。 */
.qe-directory .qe-lens-track{gap:10px;padding-top:2px;padding-bottom:6px;margin-top:6px}
.qe-directory .qe-lens-track>li{flex-basis:88px}
.qe-directory .qe-lens-track a{gap:5px;padding:2px}
.qe-directory .qe-lens-track a>span{font-size:11px;line-height:1.45;min-height:2.9em}
@media(max-width:600px){
.qe-directory .qe-lens-track{gap:8px}
.qe-directory .qe-lens-track>li{flex-basis:76px}
.qe-directory .qe-lens-track a>span{font-size:10px;line-height:1.45}
.qe-directory .qe-section-head:has(.qe-clear-compare){gap:8px}
.qe-directory .qe-section-head .qe-clear-label{gap:4px 8px}
.qe-directory .qe-section-head .qe-clear-compare{font-size:11px}
}