/* ========================================================================== デバイスビューア — shi-japan.com 制作物ページ用（shi-design テーマ） 端末の枠の中に実サイトを読み込み、機種幅を切り替えて見せる。 ふちの太さ（padding）は device-viewer.js の PAD と必ず同じ値にすること。 transition 中に実寸を測ると値がずれるため、JS は定数で縮小率を計算している。 ========================================================================== */ .device-viewer{--dv-scale:1} /* --- 機種を選ぶタブ --- */ .device-viewer__tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px} .device-viewer__tab{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid rgba(43,41,37,.18);background:#fff;color:#2B2925;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.3;padding:9px 18px;border-radius:999px;cursor:pointer;transition:border-color .18s,background .18s,color .18s} .device-viewer__tab:hover{border-color:#B57A3F} .device-viewer__tab:focus-visible{outline:2px solid #B57A3F;outline-offset:2px} .device-viewer__tab[aria-selected="true"]{background:#2B2925;border-color:#2B2925;color:#fff} .device-viewer__tab small{font-size:10px;font-weight:400;opacity:.62;font-variant-numeric:tabular-nums} /* --- 表示領域。縮小後の実寸に合わせて高さを詰める --- */ .device-viewer__stage{display:flex;justify-content:center;align-items:flex-start;overflow:hidden} .device-viewer__scaler{flex:0 0 auto;transform:scale(var(--dv-scale));transform-origin:top center;transition:transform .3s ease} /* --- 端末の外枠 --- */ .device-frame{position:relative;background:#1C1C1E;box-shadow:0 22px 54px rgba(43,41,37,.26)} .device-frame__screen{position:relative;background:#fff;overflow:auto;-webkit-overflow-scrolling:touch} .device-frame__screen iframe{display:block;width:100%;height:100%;border:0;background:#fff} /* スマートフォン（Dynamic Island 機） 島はベゼル側に置く。画面に重ねると中身が隠れるため、上のふちだけ厚くする。 */ .device-frame[data-type="phone"][data-island="true"]{padding:30px 13px 13px;border-radius:44px} .device-frame[data-type="phone"][data-island="true"] .device-frame__screen{border-radius:4px 4px 32px 32px} .device-frame[data-type="phone"][data-island="true"]::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:15px;background:#000;border-radius:999px;pointer-events:none} /* スマートフォン（ホームボタン機・SE） */ .device-frame[data-type="phone"][data-island="false"]{padding:52px 12px;border-radius:34px} .device-frame[data-type="phone"][data-island="false"] .device-frame__screen{border-radius:2px} .device-frame[data-type="phone"][data-island="false"]::after{content:"";position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:34px;height:34px;border:2px solid #3A3A3C;border-radius:50%;pointer-events:none} /* タブレット */ .device-frame[data-type="tablet"]{padding:22px;border-radius:26px} .device-frame[data-type="tablet"] .device-frame__screen{border-radius:6px} /* デスクトップ：ブラウザウィンドウとして見せる */ .device-frame[data-type="desktop"]{padding:0;border-radius:10px;overflow:hidden;background:#2B2925} .device-frame__bar{display:none} .device-frame[data-type="desktop"] .device-frame__bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#3A3733} .device-frame__dot{width:11px;height:11px;border-radius:50%;background:#5A554E} .device-frame__url{flex:1;margin-left:10px;height:20px;border-radius:10px;background:#4A453E;display:flex;align-items:center;padding:0 12px;font-size:11px;color:#B8B2A8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .device-frame[data-type="desktop"] .device-frame__screen{border-radius:0} /* --- 枠まわりの説明 --- */ .device-viewer__hint{text-align:center;font-size:11.5px;color:#8A847C;margin-top:10px} .device-viewer__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin-top:12px;font-size:11.5px;color:#8A847C} .device-viewer__meta b{color:#2B2925;font-weight:500;font-variant-numeric:tabular-nums} .device-viewer__link{display:inline-flex;align-items:center;gap:5px;color:#B57A3F;text-decoration:none;font-size:12.5px;font-weight:500} .device-viewer__link:hover{text-decoration:underline} /* --- JSが無効なときの静止画。表示の切り替えは PHP 側の