/* ラボTOP（試作・開発中）page-acm-lab-top.php 専用。すべて .acmlt / body.acmlt-page の中だけに効かせる。 書体は端末の標準。背景は白。青は「線・文字・リンク」に使い、面は塗らない（選択中も線と太字で示す）。 */ /* ページ全体（テンプレートが独立した文書を出すので、ここで最小限の土台を作る） */ html,body.acmlt-page{margin:0;padding:0;background:#fff} body.acmlt-page{-webkit-text-size-adjust:100%} body.acmlt-page .l-scrollObserver{display:none} .acmlt{ --acmlt-bg:#fff; --acmlt-soft:#f5f8fa; --acmlt-line:#dfe6ec; --acmlt-line2:#c9d4dd; --acmlt-ink:#1b2733; --acmlt-sub:#56636f; --acmlt-navy:#0b2a4a; --acmlt-blue:#076c8e; --acmlt-blue-bg:#e8f3f8; --acmlt-green:#126b4f; --acmlt-green-bg:#e6f4ee; --acmlt-f:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,"Noto Sans JP",sans-serif; --acmlt-top:66px; font-family:var(--acmlt-f);color:var(--acmlt-ink);background:var(--acmlt-bg);font-size:15px;line-height:1.7;letter-spacing:.02em; } .admin-bar .acmlt{--acmlt-top:98px} .acmlt *{box-sizing:border-box} .acmlt a{color:var(--acmlt-blue)} .acmlt a:focus-visible,.acmlt button:focus-visible,.acmlt summary:focus-visible,.acmlt input:focus-visible,.acmlt select:focus-visible{outline:2px solid var(--acmlt-blue);outline-offset:2px} .acmlt-wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,4vw,56px)} .acmlt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .acmlt h1,.acmlt h2,.acmlt h3{margin:0;padding:0;border:0;background:none;font-family:var(--acmlt-f);color:var(--acmlt-navy);letter-spacing:.03em} .acmlt ul{list-style:none;margin:0;padding:0} .acmlt p{margin:0} .acmlt button{font-family:var(--acmlt-f)} .acmlt [hidden]{display:none!important} .acmlt [id]{scroll-margin-top:calc(var(--acmlt-top) + 16px)} .acmlt-i{width:1em;height:1em;flex:none} .acmlt-skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--acmlt-bg);border:1px solid var(--acmlt-blue);padding:8px 14px;border-radius:4px} .acmlt-skip:focus{top:8px} /* ヘッダー */ .acmlt-header{position:sticky;top:0;z-index:100;background:var(--acmlt-bg);border-bottom:1px solid var(--acmlt-line)} .admin-bar .acmlt-header{top:32px} .acmlt-header__in{display:flex;align-items:center;gap:36px;height:66px} .acmlt .acmlt-logo{font-size:20px;font-weight:800;color:var(--acmlt-navy);text-decoration:none;letter-spacing:.06em;white-space:nowrap} .acmlt .acmlt-logo{display:inline-flex;flex-direction:column;gap:3px;line-height:1} .acmlt-logo__en{display:inline-flex;align-items:center;gap:7px} .acmlt-logo__lab{background:var(--acmlt-blue);color:#fff;font-size:.78em;font-weight:800;letter-spacing:.1em;padding:3px 7px 3px 8px;border-radius:2px;line-height:1} .acmlt-logo__ja{font-size:10.5px;font-weight:600;color:var(--acmlt-sub);letter-spacing:.12em} .acmlt-gnav{display:flex;gap:4px} .acmlt-gnav a{color:var(--acmlt-ink);text-decoration:none;font-size:15px;font-weight:600;padding:10px 12px;border-bottom:2px solid transparent} .acmlt-gnav a:hover{color:var(--acmlt-blue);border-bottom-color:var(--acmlt-blue)} .acmlt-hr{margin-left:auto;display:flex;align-items:center;gap:8px} .acmlt-mag{text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 4px} .acmlt-mag:hover{text-decoration:underline} .acmlt-icon{background:none;border:0;color:var(--acmlt-ink);width:44px;height:44px;cursor:pointer;display:grid;place-items:center;list-style:none} .acmlt-icon::-webkit-details-marker{display:none} .acmlt-icon .acmlt-i{width:22px;height:22px} .acmlt-menu{display:none;position:relative} .acmlt-menu .is-close{display:none} .acmlt-menu[open] .is-open{display:none} .acmlt-menu[open] .is-close{display:block} .acmlt-menu__panel{position:absolute;right:-6px;top:calc(100% + 6px);width:min(86vw,320px);background:var(--acmlt-bg);border:1px solid var(--acmlt-line);border-radius:6px;box-shadow:0 10px 30px rgba(11,42,74,.12);padding:4px 0;display:grid} .acmlt-menu__panel a{display:block;padding:13px 18px;color:var(--acmlt-ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--acmlt-line)} .acmlt-menu__panel a:last-child{border-bottom:0;color:var(--acmlt-blue);font-weight:500} /* タイトル行（右に速度ボタン） */ .acmlt-crumb{font-size:13px;color:var(--acmlt-sub);padding-block:12px 4px} .acmlt-crumb a{color:var(--acmlt-sub);text-decoration:none} .acmlt-crumb a:hover{text-decoration:underline} .acmlt-crumb > span[aria-hidden]{margin:0 8px} /* PCは「パンくず／タイトル＋速度ボタン／一覧／使い方」の格子。SPは並べ替えて一覧を先にする */ .acmlt-main{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"crumb crumb" "title tool" "list list" "cols cols" "about about";column-gap:32px;align-items:end} /* TOP：テーマの入口と新着（目次型） */ .acmlt-toc{grid-area:list;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;border-top:1px solid var(--acmlt-line);padding-top:28px} .acmlt-themes-nav h2{font-size:20px;font-weight:800;margin-bottom:14px} .acmlt-tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--acmlt-line)} .acmlt-tgrid li{border-bottom:1px solid var(--acmlt-line)} .acmlt-tgrid li:nth-child(odd){border-right:1px solid var(--acmlt-line)} .acmlt-tgrid a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 14px;min-height:56px;text-decoration:none;color:var(--acmlt-navy);font-weight:700;font-size:15px} .acmlt-tgrid a:hover{background:var(--acmlt-soft);color:var(--acmlt-blue)} .acmlt-tgrid a.is-past{color:var(--acmlt-sub);font-weight:600} .acmlt-tgrid__n{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--acmlt-sub);white-space:nowrap;font-variant-numeric:tabular-nums} .acmlt-tgrid__n .acmlt-i{width:14px;height:14px;color:var(--acmlt-blue)} .acmlt-rows{border-top:1px solid var(--acmlt-line)} .acmlt-rows li{border-bottom:1px solid var(--acmlt-line)} .acmlt-rows a{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:13px 4px;text-decoration:none;color:var(--acmlt-ink)} .acmlt-rows a:hover .acmlt-rows__t{color:var(--acmlt-blue);text-decoration:underline} .acmlt-rows time{font-size:13px;color:var(--acmlt-sub);font-variant-numeric:tabular-nums} .acmlt-rows__t{font-weight:700;font-size:15px;line-height:1.55;color:var(--acmlt-navy)} .acmlt-sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .acmlt-sec-h h2{font-size:20px;font-weight:800} .acmlt-crumb{grid-area:crumb} .acmlt-title{grid-area:title;padding-block:6px 24px;min-width:0} .acmlt-tool{grid-area:tool;padding-bottom:24px} .acmlt-cols{grid-area:cols;border-top:1px solid var(--acmlt-line);padding-top:24px} .acmlt-about{grid-area:about} .acmlt h1{font-size:32px;font-weight:800;line-height:1.35} .acmlt-title p{margin-top:8px;font-size:15.5px} .acmlt-latest{display:inline-block;margin-left:12px;font-size:13px;color:var(--acmlt-sub);white-space:nowrap} .acmlt-tool{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .acmlt-tbtn{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--acmlt-blue);border-radius:4px;font-weight:700;font-size:15px;padding:10px 22px;text-decoration:none;white-space:nowrap;background:var(--acmlt-bg);color:var(--acmlt-blue);min-height:44px} .acmlt-tbtn:hover{background:var(--acmlt-blue-bg)} .acmlt-tbtn .acmlt-i{width:26px;height:20px} .acmlt-tool small{font-size:12px;color:var(--acmlt-sub)} /* 2カラム */ .acmlt-cols{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start} .acmlt-filter{position:sticky;top:calc(var(--acmlt-top) + 16px);display:grid;gap:22px;padding-right:24px;border-right:1px solid var(--acmlt-line)} .acmlt-search{position:relative;margin:0} .acmlt-search input{width:100%;font:15px var(--acmlt-f);color:var(--acmlt-ink);background:var(--acmlt-bg);border:1px solid var(--acmlt-line2);border-radius:4px;padding:10px 40px 10px 12px;box-shadow:none;margin:0;min-height:44px} .acmlt-search .acmlt-i{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--acmlt-sub);pointer-events:none} .acmlt-flabel{display:block;font-size:13px;font-weight:700;color:var(--acmlt-sub);margin-bottom:6px;letter-spacing:.06em} .acmlt-opts{display:grid;gap:2px} .acmlt-opts button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;font-size:15px;color:var(--acmlt-ink);padding:8px 10px 8px 12px;cursor:pointer;min-height:40px} .acmlt-opts button:hover{background:var(--acmlt-soft)} .acmlt-opts button.is-on{border-left-color:var(--acmlt-blue);color:var(--acmlt-blue);font-weight:700;background:var(--acmlt-soft)} .acmlt-n{font-size:12.5px;color:var(--acmlt-sub);font-weight:400;font-variant-numeric:tabular-nums} .acmlt-sel{position:relative} .acmlt-sel select{width:100%;appearance:none;-webkit-appearance:none;font:15px var(--acmlt-f);color:var(--acmlt-ink);background:var(--acmlt-bg);border:1px solid var(--acmlt-line2);border-radius:4px;padding:9px 36px 9px 12px;margin:0;min-height:44px} .acmlt-sel .acmlt-i{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;pointer-events:none} .acmlt-filter > .acmlt-fgroup:last-child .acmlt-flabel{display:none} .acmlt-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;min-height:36px} .acmlt-status p{font-size:14px;color:var(--acmlt-sub)} .acmlt-status [data-acmlt-count]{font-size:20px;font-weight:800;color:var(--acmlt-navy);font-variant-numeric:tabular-nums;margin-right:2px} .acmlt-reset,.acmlt-empty button{background:none;border:0;color:var(--acmlt-blue);font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer;padding:8px 4px;min-height:44px} /* カード（文字だけ・カード全体が記事へのリンク） */ .acmlt-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .acmlt-js .acmlt-card.is-over{display:none} .acmlt-card{position:relative;display:flex;flex-direction:column;background:var(--acmlt-bg);border:1px solid var(--acmlt-line);border-radius:4px;padding:16px 18px 12px;transition:border-color .15s} .acmlt-card:hover,.acmlt-card:focus-within{border-color:var(--acmlt-blue)} .acmlt-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12.5px;color:var(--acmlt-sub)} .acmlt-kind{font-size:12px;font-weight:700;color:var(--acmlt-blue);background:var(--acmlt-blue-bg);padding:1px 8px;border-radius:2px} .acmlt-kind.is-m{color:var(--acmlt-green);background:var(--acmlt-green-bg)} .acmlt-past{font-size:12px;color:var(--acmlt-sub);border:1px solid var(--acmlt-line2);border-radius:2px;padding:0 7px} .acmlt-date{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums} .acmlt-ttl{font-size:17px;font-weight:800;line-height:1.5;margin:10px 0 6px} .acmlt-ttl a{color:var(--acmlt-navy);text-decoration:none} .acmlt-ttl a::after{content:"";position:absolute;inset:0;z-index:0} .acmlt-card:hover .acmlt-ttl a{color:var(--acmlt-blue);text-decoration:underline} .acmlt-desc{font-size:14px;color:var(--acmlt-sub);line-height:1.65} .acmlt-spec{display:grid;gap:3px;margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--acmlt-line2);font-size:12.5px} .acmlt-spec div{display:grid;grid-template-columns:3em minmax(0,1fr);gap:8px} .acmlt-spec dt{color:var(--acmlt-sub)} .acmlt-spec dd{margin:0;color:var(--acmlt-ink);overflow-wrap:anywhere} .acmlt-note{margin-top:8px;font-size:12.5px;color:var(--acmlt-sub)} .acmlt-actions{position:relative;z-index:1;margin-top:auto;padding-top:10px;display:flex;justify-content:flex-end;align-items:center;gap:4px 16px;flex-wrap:wrap} .acmlt-act{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--acmlt-blue);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;padding:10px 2px;min-height:44px} .acmlt-act:hover{text-decoration:underline} .acmlt-act .acmlt-i{width:15px;height:15px} .acmlt-empty{border:1px solid var(--acmlt-line);border-radius:4px;padding:24px;text-align:center;color:var(--acmlt-sub);font-size:14px} .acmlt-more{text-align:center;margin-top:18px} .acmlt-more button{background:var(--acmlt-bg);border:1px solid var(--acmlt-blue);color:var(--acmlt-blue);border-radius:4px;font-weight:700;font-size:14px;padding:10px 40px;cursor:pointer;min-height:44px} .acmlt-more button:hover{background:var(--acmlt-blue-bg)} /* データの使い方（面を塗らず、上の罫線で段にする） */ .acmlt-about{margin-top:56px} .acmlt-about h2{font-size:20px;font-weight:800;padding-bottom:10px;border-bottom:1px solid var(--acmlt-line)} .acmlt-about__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:20px} .acmlt-about__item{display:flex;flex-direction:column;gap:8px} .acmlt-about__item h3{font-size:16px;font-weight:800} .acmlt-about__item p{font-size:14px;color:var(--acmlt-sub);line-height:1.75} .acmlt-example{font-size:13px;color:var(--acmlt-ink);background:var(--acmlt-soft);border-left:3px solid var(--acmlt-line2);padding:8px 12px} .acmlt-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:700;font-size:14px;text-decoration:none;padding:10px 0;min-height:44px} .acmlt-link:hover{text-decoration:underline} /* ラボのフッター（横1行・低く）。その下にマガジンのフッターが続く */ .acmlt-footer{border-top:1px solid var(--acmlt-line);background:var(--acmlt-soft);margin-top:64px} .acmlt-footer__in{display:flex;justify-content:space-between;align-items:center;gap:8px 28px;flex-wrap:wrap;min-height:64px;padding-block:10px} .acmlt-footer__nav{display:flex;flex-wrap:wrap;gap:0 22px} .acmlt-footer__nav a{font-size:14px;color:var(--acmlt-ink);text-decoration:none;padding:10px 0} .acmlt-footer__nav a:hover{color:var(--acmlt-blue);text-decoration:underline} .acmlt-footer__op{font-size:13px;color:var(--acmlt-sub)} .acmlt-footer__op a{color:var(--acmlt-blue)} body.acmlt-page .l-footer{font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,"Noto Sans JP",sans-serif;font-size:14px;line-height:1.7} /* マガジンのフッターは通常ページの外枠を前提に 100vw で広げているので、ラボでは素直に全幅にする（横スクロール防止） */ body.acmlt-page .l-footer{width:auto!important;left:auto!important;right:auto!important;margin-left:0!important;margin-right:0!important} body.acmlt-page .l-footer ul{list-style:none;margin:0;padding:0} body.acmlt-page .l-footer p{margin:0} body.acmlt-page .l-footer img{max-width:100%;height:auto} @media (max-width:1180px){ .acmlt-cards{grid-template-columns:minmax(0,1fr)} } @media (max-width:960px){ .acmlt-about__grid{grid-template-columns:minmax(0,1fr);gap:24px} } @media (max-width:820px){ .acmlt-gnav,.acmlt-mag{display:none} .acmlt-menu{display:block} .acmlt-header__in{height:56px;gap:12px} .acmlt{--acmlt-top:56px} .acmlt .acmlt-logo{font-size:16px;letter-spacing:.04em} .acmlt-logo__ja{font-size:9.5px;letter-spacing:.08em} .acmlt h1{font-size:24px} .acmlt-title{padding-bottom:16px} .acmlt-title p{font-size:14.5px} .acmlt-latest{display:block;margin:4px 0 0} /* スマホは一覧を先に：速度ボタンは一覧の後ろへ回す */ .acmlt-main{display:flex;flex-direction:column;align-items:stretch} .acmlt-crumb{order:1} .acmlt-title{order:2} .acmlt-cols{order:3;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:16px} .acmlt-toc{order:3;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:20px} .acmlt-rows a{grid-template-columns:auto minmax(0,1fr)} .acmlt-rows__t{grid-column:1 / -1;font-size:14.5px} .acmlt-tool{order:4;align-items:stretch;margin-top:32px;padding:20px 0 0;border-top:1px solid var(--acmlt-line)} .acmlt-about{order:5} .acmlt-tbtn{justify-content:center} .acmlt-filter{position:static;border-right:0;padding-right:0;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:center} .acmlt-filter .acmlt-flabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} .acmlt-search{grid-column:1 / 2;grid-row:1} .acmlt-filter > .acmlt-fgroup:last-child{grid-column:2 / 3;grid-row:1} .acmlt-sel select{padding:9px 28px 9px 10px;font-size:14px} .acmlt-filter > .acmlt-fgroup:not(:last-child){grid-column:1 / -1} .acmlt-opts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:2px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} .acmlt-opts::-webkit-scrollbar{display:none} .acmlt-opts li{flex:0 0 auto} .acmlt-opts li:last-child{padding-right:24px} .acmlt-opts button{border:1px solid var(--acmlt-line2);border-radius:999px;padding:6px 14px;white-space:nowrap;font-size:14px;gap:6px;min-height:40px;background:var(--acmlt-bg)} .acmlt-opts button.is-on{border-color:var(--acmlt-blue);border-left-width:1px;box-shadow:inset 0 0 0 1px var(--acmlt-blue);background:var(--acmlt-blue-bg)} .acmlt-card{padding:14px 14px 8px} .acmlt-ttl{font-size:15.5px} .acmlt-desc{font-size:13.5px} .acmlt-date{margin-left:0;flex-basis:100%;order:9} .acmlt-footer__in{flex-direction:column;align-items:flex-start;gap:2px;padding-block:12px} .acmlt-footer__nav{gap:0 18px} } @media (max-width:782px){ .admin-bar .acmlt-header{top:46px} .admin-bar .acmlt{--acmlt-top:102px} } @media (max-width:600px){ .admin-bar .acmlt-header{top:0} } @media (prefers-reduced-motion:reduce){.acmlt *{transition:none!important;scroll-behavior:auto!important}} /* ===== TOP：データポータル型（2026-10-09 ユーザーが3案から選択。統計サイトのTOPに近い） ===== */ .acmlt-pc{display:inline} .acmlt-portal{background:var(--acmlt-navy);color:#fff} .acmlt-portal__in{padding-block:6px 34px} .acmlt-crumb--inv{color:#a9c1d6;padding-top:14px} .acmlt-crumb--inv a{color:#a9c1d6} .acmlt-portal h1{color:#fff;font-size:30px;font-weight:800;margin-top:16px;letter-spacing:.04em} .acmlt-portal__lead{margin-top:8px;font-size:15px;color:#cfe0ee;line-height:1.75} .acmlt-portal__search{display:flex;max-width:720px;margin-top:22px} .acmlt-portal__search input{flex:1;min-width:0;font:16px var(--acmlt-f);color:var(--acmlt-ink);background:#fff;border:0;border-radius:4px 0 0 4px;padding:13px 16px;min-height:50px;margin:0;box-shadow:none} .acmlt-portal__search button{display:inline-flex;align-items:center;gap:8px;background:#0a7fa6;color:#fff;border:0;border-radius:0 4px 4px 0;font:700 15px var(--acmlt-f);padding:0 24px;cursor:pointer;min-height:50px} .acmlt-portal__search button:hover{background:#0b8fbb} .acmlt-portal__search button .acmlt-i{width:18px;height:18px} /* 入力中は、入力欄とボタンをまとめて1つの枠で囲む（入力欄だけの黄色い枠はずれて見えるのでやめた） */ .acmlt-portal__search{border-radius:5px;transition:box-shadow .15s} .acmlt-portal__search:focus-within{box-shadow:0 0 0 3px rgba(111,191,216,.75)} .acmlt .acmlt-portal__search input:focus,.acmlt .acmlt-portal__search input:focus-visible{outline:0} .acmlt-portal__search button:focus-visible{outline:2px solid #fff;outline-offset:-4px} .acmlt .acmlt-portal__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .acmlt-portal__chips a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:6px 14px;font-size:13.5px;min-height:36px;text-decoration:none} .acmlt-portal__chips a:hover{background:rgba(255,255,255,.12);border-color:#fff} .acmlt-portal__chips a:focus-visible{outline:3px solid #ffd76a;outline-offset:2px} .acmlt-portal__chips span{font-size:12px;color:#a9c1d6;font-variant-numeric:tabular-nums} .acmlt-portal__chips a.is-on{background:#fff;color:var(--acmlt-navy);border-color:#fff;font-weight:700} .acmlt-portal__chips a.is-on span{color:var(--acmlt-sub)} .acmlt-counts{background:var(--acmlt-soft);border-bottom:1px solid var(--acmlt-line)} .acmlt-counts__in{display:flex;flex-wrap:wrap;gap:0;margin-top:0;margin-bottom:0;padding-block:14px} .acmlt-counts__in div{display:flex;align-items:baseline;gap:8px;padding:0 28px;border-left:1px solid var(--acmlt-line2)} .acmlt-counts__in div:first-child{padding-left:0;border-left:0} .acmlt-counts dt{font-size:13px;color:var(--acmlt-sub)} .acmlt-counts dd{margin:0;font-size:22px;font-weight:800;color:var(--acmlt-navy);font-variant-numeric:tabular-nums} .acmlt-counts dd small{font-size:13px;font-weight:700;margin-left:2px} .acmlt-counts dd.is-date{font-size:16px} .acmlt-main--top{display:block;padding-bottom:8px} .acmlt-main--top > section{margin-top:36px} .acmlt-sec-h{border-bottom:0;padding-bottom:0;margin-bottom:10px} .acmlt-table{width:100%;border-collapse:collapse;font-size:14px} .acmlt-table th{text-align:left;font-size:12.5px;font-weight:600;color:var(--acmlt-sub);border-bottom:1px solid var(--acmlt-line);padding:8px 10px 8px 0;white-space:nowrap} .acmlt-table td{border-bottom:1px solid var(--acmlt-line);padding:13px 10px 13px 0;vertical-align:baseline} .acmlt-table__d{font-size:13px;color:var(--acmlt-sub);font-variant-numeric:tabular-nums;white-space:nowrap} .acmlt-table__t a{font-weight:700;color:var(--acmlt-navy);text-decoration:none} .acmlt-table__t a:hover{color:var(--acmlt-blue);text-decoration:underline} .acmlt-table td.acmlt-table__w{font-size:13px;color:var(--acmlt-sub);white-space:nowrap} .acmlt-table tbody tr:hover{background:var(--acmlt-soft)} .acmlt-use__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .acmlt-use__box{display:flex;flex-direction:column;gap:6px;border:1px solid var(--acmlt-line);border-radius:4px;padding:18px} .acmlt-use__box h3{font-size:15.5px;font-weight:800} .acmlt-use__box p{font-size:13.5px;color:var(--acmlt-sub);line-height:1.7;flex:1} .acmlt-use__box .acmlt-link{padding:6px 0;min-height:0} .acmlt-use__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .acmlt-use__box .acmlt-use__ex{flex:0;display:grid;gap:2px;margin-top:4px;padding:10px 12px;background:var(--acmlt-soft);border-radius:4px;font-size:13px;color:var(--acmlt-ink)} .acmlt-use__ex span{font-size:11.5px;color:var(--acmlt-sub)} /* TOPのツール欄：アイコン｜名前と説明｜矢印 の横長（/tools/ の大きいカードは使わない） */ .acmlt .acmlt-toolrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .acmlt-toolrow a{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;gap:16px;align-items:center;height:100%;padding:18px;border:1px solid var(--acmlt-line);border-radius:6px;text-decoration:none;color:var(--acmlt-ink);transition:border-color .15s} .acmlt-toolrow a:hover{border-color:var(--acmlt-blue)} .acmlt-toolrow a:hover .acmlt-toolrow__t{color:var(--acmlt-blue);text-decoration:underline} .acmlt-toolrow__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:6px;background:var(--acmlt-blue-bg);color:var(--acmlt-blue)} .acmlt-toolrow__ico .acmlt-i{width:26px;height:26px} .acmlt-toolrow__body{display:grid;gap:4px} .acmlt-toolrow__t{font-size:15.5px;font-weight:800;color:var(--acmlt-navy)} .acmlt-toolrow__d{font-size:13px;color:var(--acmlt-sub);line-height:1.65} .acmlt-toolrow__go{color:var(--acmlt-blue)} .acmlt-toolrow__go .acmlt-i{width:16px;height:16px} .acmlt-use__note{margin-top:14px;font-size:12.5px;color:var(--acmlt-sub)} /* 帯の中：左に見出しと検索、右に件数（Codex 案B） */ .acmlt-portal__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 56px;align-items:center} .acmlt-portal__counts{display:flex;margin:0;padding:0} .acmlt-portal__counts div{padding:0 26px;border-left:1px solid rgba(255,255,255,.25)} .acmlt-portal__counts div:first-child{border-left:0;padding-left:0} .acmlt-portal__counts dt{font-size:12.5px;color:#a9c1d6} .acmlt-portal__counts dd{margin:2px 0 0;font-size:40px;font-weight:800;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums} .acmlt-portal__counts dd small{font-size:14px;font-weight:700;margin-left:3px;color:#cfe0ee} /* テーマのタイル */ .acmlt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .acmlt-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;height:100%;padding:18px 18px;border:1px solid var(--acmlt-line);border-left:3px solid var(--acmlt-blue);border-radius:4px;background:var(--acmlt-soft);text-decoration:none;color:var(--acmlt-ink);transition:background-color .15s,border-color .15s} .acmlt-tile:hover{background:var(--acmlt-blue-bg);border-color:var(--acmlt-blue)} .acmlt-tile__ico{grid-row:1 / 3;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--acmlt-blue);display:grid;place-items:center;border:1px solid var(--acmlt-line)} .acmlt-tile__ico .acmlt-i{width:22px;height:22px} .acmlt-tile__t{grid-column:2;font-size:16px;font-weight:800;color:var(--acmlt-navy)} .acmlt-tile__d{grid-column:2;font-size:12.5px;color:var(--acmlt-sub);line-height:1.55} .acmlt-tile__n{grid-column:3;grid-row:1 / 3;display:inline-flex;align-items:baseline;gap:3px;font-size:12.5px;color:var(--acmlt-sub);white-space:nowrap} .acmlt-tile__n b{font-size:28px;font-weight:800;color:var(--acmlt-blue);font-variant-numeric:tabular-nums} .acmlt-tile__n .acmlt-i{width:14px;height:14px;color:var(--acmlt-blue);align-self:center;margin-left:4px} .acmlt-tile.is-past{border-left-color:var(--acmlt-line2)} .acmlt-tile.is-past .acmlt-tile__t,.acmlt-tile.is-past .acmlt-tile__n b{color:var(--acmlt-sub)} .acmlt-tile.is-past .acmlt-tile__ico{color:var(--acmlt-sub)} .acmlt-tiles__note{margin-top:8px;font-size:12px;color:var(--acmlt-sub)} /* 新着（PCは2列） */ .acmlt-sec-h h2{font-size:20px;font-weight:800} .acmlt .acmlt-news2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--acmlt-line)} .acmlt-news2 li{border-bottom:1px solid var(--acmlt-line)} .acmlt-news2 a{display:grid;gap:4px;padding:14px 2px;text-decoration:none;color:var(--acmlt-ink)} .acmlt-news2 a:hover .acmlt-news2__t{color:var(--acmlt-blue);text-decoration:underline} .acmlt-news2__m{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--acmlt-sub)} .acmlt-news2__t{font-weight:700;font-size:15px;color:var(--acmlt-navy);line-height:1.55} .acmlt-news2__s{font-size:12.5px;color:var(--acmlt-sub)} @media (max-width:960px){ .acmlt-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ツールの一覧・口コミを探す（2026-10-09・デザインを作り直し） */ .acmlt-main--page{display:block;padding-bottom:8px} .acmlt-main--page .acmlt-title{padding-block:6px 20px;border-bottom:1px solid var(--acmlt-line);margin-bottom:28px} .acmlt-portal--sub .acmlt-portal__in{padding-block:6px 28px} .acmlt-portal--sub h1{margin-top:12px} /* ツール */ .acmlt .acmlt-toollist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .acmlt-toolcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--acmlt-line);border-radius:8px;overflow:hidden;background:var(--acmlt-bg);text-decoration:none;color:var(--acmlt-ink);transition:border-color .15s,box-shadow .15s,transform .15s} .acmlt-toolcard:hover{border-color:var(--acmlt-blue);box-shadow:0 10px 24px rgba(11,42,74,.08);transform:translateY(-2px)} .acmlt-toolcard__art{display:grid;place-items:center;height:150px;color:#fff;background-color:var(--acmlt-navy);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(135deg,#0b2a4a,#0a7fa6);background-size:22px 22px,22px 22px,100% 100%} .acmlt-toolcard__art .acmlt-i{width:64px;height:64px;stroke-width:1.6} .acmlt-toolcard__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1} .acmlt-toolcard__t{font-size:19px;font-weight:800;color:var(--acmlt-navy)} .acmlt-toolcard__d{font-size:14px;color:var(--acmlt-ink);line-height:1.75;flex:1} .acmlt-toolcard__m{font-size:12.5px;color:var(--acmlt-sub);border-top:1px dashed var(--acmlt-line2);padding-top:10px} .acmlt-toolcard__go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;background:var(--acmlt-blue);color:#fff;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700} .acmlt-toolcard__go .acmlt-i{width:14px;height:14px} /* 口コミ：絞り込みの面 */ .acmlt-rvbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:18px;margin:24px 0 16px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:8px} .acmlt-rvbar__toggle{display:none} .acmlt-rvbar label{display:grid;gap:6px;font-size:12px;color:var(--acmlt-sub);font-weight:700;letter-spacing:.04em;min-width:0} .acmlt-rvbar select{appearance:none;-webkit-appearance:none;width:100%;font:14px var(--acmlt-f);color:var(--acmlt-ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23076c8e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center/12px;border:1px solid var(--acmlt-line2);border-radius:6px;padding:9px 30px 9px 12px;min-height:44px;margin:0;cursor:pointer} .acmlt-rvbar select:hover{border-color:var(--acmlt-blue)} /* 口コミのカード（構成は /review/ の口コミカードに合わせた：ロゴ・回答者・サービス・評価・5項目・Q&A・詳しい回答） */ .acmlt .acmlt-rvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch} .acmlt-rv{display:flex;flex-direction:column;gap:12px;min-width:0;border:1px solid #cdeaf3;border-radius:9px;padding:20px;background:var(--acmlt-bg);box-shadow:0 3px 15px rgba(4,108,133,.04)} .acmlt-rv[tabindex]:focus{outline:2px solid var(--acmlt-blue);outline-offset:2px} .acmlt-rv__logo{height:60px;display:flex;align-items:center} .acmlt-rv__logo:empty{display:none} .acmlt .acmlt-rv__logo img{width:170px;max-width:85%;height:52px;object-fit:contain;object-position:left} .acmlt-rv__logo[data-brand="rakuten-turbo"] img{background:#bf0060;border-radius:4px;padding:8px} .acmlt-rv__logo[data-brand="zeus-wifi"] img{background:#19222b;border-radius:4px;padding:10px} .acmlt-rv__user{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--acmlt-line)} .acmlt-rv__av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--acmlt-blue-bg);display:grid;place-items:center;font-size:20px;line-height:1} .acmlt-rv__per{display:grid;gap:1px;min-width:0;line-height:1.4} .acmlt-rv__per b,.acmlt-rv__per small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acmlt-rv__per b{font-size:13.5px;color:var(--acmlt-navy)} .acmlt-rv__per small{font-size:12px;color:var(--acmlt-sub)} .acmlt-rv__pick{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--acmlt-blue);border-radius:3px;padding:2px 8px} .acmlt-rv__svc{display:flex;align-items:center;gap:8px;min-width:0} .acmlt-rv__type{font-size:11.5px;font-weight:700;color:var(--acmlt-blue);background:var(--acmlt-blue-bg);border-radius:3px;padding:2px 8px} .acmlt-rv[data-type="wimax"] .acmlt-rv__type{color:#126b4f;background:#e6f4ee} .acmlt-rv[data-type="pocket-wifi"] .acmlt-rv__type{color:#5b4fa8;background:#efedfa} .acmlt-rv__name{font-size:16px;font-weight:800;color:var(--acmlt-navy);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acmlt-rv__rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .acmlt-rv__rate b{font-size:22px;font-weight:800;color:var(--acmlt-navy);line-height:1;font-variant-numeric:tabular-nums} .acmlt-rv__rate small{font-size:11.5px;color:var(--acmlt-sub)} .acmlt-stars{--v:0%;position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:1px;color:#d5dde3} .acmlt-stars::before{content:"★★★★★"} .acmlt-stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--v);overflow:hidden;color:#f0a500;white-space:nowrap} .acmlt-rv__nps{margin-left:auto;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;background:#eef0f2;color:var(--acmlt-sub)} .acmlt-rv__nps.is-promoter{background:#e6f4ee;color:#126b4f} .acmlt-rv__nps.is-detractor{background:#fdeceb;color:#a3312b} .acmlt .acmlt-rv__ax{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;margin:0;padding:10px 12px;background:var(--acmlt-soft);border-radius:6px} .acmlt-rv__ax div{display:flex;justify-content:space-between;align-items:center;gap:6px} .acmlt-rv__ax dt{font-size:12px;color:var(--acmlt-sub)} .acmlt-rv__ax dd{margin:0;font-size:12px;letter-spacing:1px;white-space:nowrap} .acmlt-rv__ax .on{color:#f0a500} .acmlt-rv__ax .off{color:#d5dde3} .acmlt-rv__qa{display:grid;gap:4px;align-content:start} /* 高さをそろえた余白は下に回し、文字は上に詰める */ .acmlt-rv__q{font-size:12.5px;font-weight:700;color:var(--acmlt-navy)} .acmlt-rv__a{font-size:14px;line-height:1.75;color:var(--acmlt-ink);overflow-wrap:anywhere} .acmlt-rv__a.is-empty{color:var(--acmlt-sub);font-size:13px} /* カードの高さは横の列ごとにそろえる（grid の stretch）。感想は6行で畳むだけで、高さの予約はしない（2026-10-09 ユーザー指示） */ .acmlt-rv__a.is-clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .acmlt-rv__expand{display:block} .acmlt-rv__expand{background:none;border:0;padding:4px 0;margin-top:2px;font:700 13px var(--acmlt-f);color:var(--acmlt-blue);cursor:pointer;min-height:32px} .acmlt-rv__expand:hover{text-decoration:underline} /* ★の下：利用の事実・選んだ理由・用途を「項目名｜中身」の1本のリストで見せる（開閉させない。2026-10-09） */ .acmlt .acmlt-rv__spec{margin:0;display:grid} .acmlt-rv__spec div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--acmlt-line)} .acmlt-rv__spec div:first-child{padding-top:2px} .acmlt-rv__spec dt{font-size:12px;color:var(--acmlt-sub)} .acmlt-rv__spec dd{margin:0;font-size:13px;color:var(--acmlt-ink);line-height:1.6;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;gap:4px} .acmlt-rv__spec .acmlt-tag{font-size:12px;padding:1px 9px;line-height:1.7} .acmlt-rv__a.is-c3{-webkit-line-clamp:3} .acmlt-rv__qa--main{margin-top:4px} .acmlt-rv__when{margin-top:auto;padding-top:8px} .acmlt-rv__more{margin-top:auto;border-top:1px solid var(--acmlt-line);padding-top:10px} .acmlt-rv__more > summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--acmlt-blue);display:flex;align-items:center;gap:6px;min-height:32px} .acmlt-rv__more > summary::-webkit-details-marker{display:none} .acmlt-rv__more > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s} .acmlt-rv__more[open] > summary::after{transform:rotate(-135deg);margin-top:3px} .acmlt-rv__more[open] > summary{margin-bottom:8px} .acmlt-rv__more .acmlt-rv__qa + .acmlt-rv__qa{margin-top:10px} .acmlt-rv__tags{display:flex;flex-wrap:wrap;gap:6px} .acmlt-tag{font-size:12px;color:var(--acmlt-navy);background:var(--acmlt-blue-bg);border-radius:999px;padding:3px 10px} .acmlt-tag.is-p{background:#eef0f2;color:var(--acmlt-ink)} .acmlt .acmlt-rv__info{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px} .acmlt-rv__info dt{color:var(--acmlt-sub)} .acmlt-rv__info dd{margin:0} .acmlt-rv__when{align-self:flex-end;font-size:11.5px;color:var(--acmlt-sub);font-variant-numeric:tabular-nums} @media (max-width:1180px){ .acmlt .acmlt-rvs{grid-template-columns:repeat(2,minmax(0,1fr))} .acmlt-rvbar{grid-template-columns:repeat(3,minmax(0,1fr))} } .acmlt-rvnote{margin-top:20px;font-size:12px;color:var(--acmlt-sub)} @media (max-width:1180px){ .acmlt .acmlt-rvs{grid-template-columns:repeat(2,minmax(0,1fr))} .acmlt-rvbar{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:820px){ .acmlt-pc{display:none} .acmlt-portal__in{padding-block:2px 22px} .acmlt-crumb--inv{padding-top:10px} .acmlt-portal h1{font-size:22px;margin-top:10px} .acmlt-portal__lead{font-size:13.5px;margin-top:6px} .acmlt-portal__search{margin-top:16px} .acmlt-portal__search input{padding:11px 12px;min-height:46px} .acmlt-portal__search button{padding:0 14px;min-height:46px} .acmlt-portal__search button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .acmlt .acmlt-portal__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;margin-top:16px} .acmlt-portal__chips::-webkit-scrollbar{display:none} .acmlt-portal__chips li{flex:0 0 auto} .acmlt-portal__chips a{white-space:nowrap;min-height:40px} .acmlt-counts__in{padding-block:10px;gap:4px 0} .acmlt-counts__in div{padding:0 14px;gap:6px} .acmlt-counts dt{font-size:11.5px} .acmlt-counts dd{font-size:17px} .acmlt-counts dd.is-date{font-size:13.5px} .acmlt-main--top{display:block} .acmlt-main--top > section{margin-top:26px} .acmlt-table thead{display:none} .acmlt-table,.acmlt-table tbody,.acmlt-table tr,.acmlt-table td{display:block;width:100%} .acmlt-table tr{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:baseline;border-bottom:1px solid var(--acmlt-line);padding:12px 0} .acmlt-table td{border:0;padding:0;width:auto} .acmlt-table__t{grid-column:1 / -1} .acmlt-table td.acmlt-table__w{grid-column:1 / -1;white-space:normal;font-size:12.5px} .acmlt-use__grid,.acmlt-use__grid--2,.acmlt .acmlt-toolrow{grid-template-columns:minmax(0,1fr);gap:10px} .acmlt-toolrow a{grid-template-columns:44px minmax(0,1fr) 16px;gap:12px;padding:14px} .acmlt-toolrow__ico{width:44px;height:44px} .acmlt-portal__grid{grid-template-columns:minmax(0,1fr);gap:14px} .acmlt-portal__counts dd{font-size:24px} .acmlt-portal__counts dd small{font-size:12px} .acmlt-portal__counts dt{font-size:11.5px} .acmlt-portal__counts div{padding:0 18px} .acmlt-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .acmlt-tile{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;padding:12px;row-gap:6px} .acmlt-tile__ico,.acmlt-tile__d{display:none} .acmlt-tile__t{grid-column:1 / -1;font-size:14px} .acmlt-tile__n{grid-column:1 / -1;grid-row:2} .acmlt-tile__n b{font-size:22px} .acmlt .acmlt-news2{grid-template-columns:minmax(0,1fr)} .acmlt-news2__t{font-size:14.5px} .acmlt .acmlt-toollist{grid-template-columns:minmax(0,1fr);gap:14px} .acmlt-toolcard__art{height:110px} .acmlt-toolcard__art .acmlt-i{width:48px;height:48px} .acmlt-toolcard__body{padding:16px} .acmlt-rvbar__toggle:not([hidden]){display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:16px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:8px;padding:10px 14px;min-height:46px;font:700 14px var(--acmlt-f);color:var(--acmlt-navy);cursor:pointer} .acmlt-rvbar__toggle span{font-weight:400;font-size:12.5px;color:var(--acmlt-blue)} .acmlt-rvbar{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;margin:8px 0 12px} .acmlt-rvbar.is-open:not([hidden]){display:grid} .acmlt .acmlt-rvs{grid-template-columns:minmax(0,1fr);gap:12px} .acmlt-rv{padding:18px} } /* ── スピードテスト（/lab/tools/speed-test/・2026-10-09） ── 上：タイトル→測定→判定（すぐ使う人のため）／下：左に目次（PCは追従）、右に解説 見た目はラボの他ページの部品に合わせる：角4px・線1px・強調は左3pxの青（テーマのタイル）・薄灰の面（口コミの絞り込み）・ 見出し20px・区切りは薄い1pxの線だけ（紺の太線は使わない・2026-10-09）・ラベルは角2px（種類のラベル）。グラデーション・影・新しい色は使わない */ .acmlt-sp > section{margin-top:28px} .acmlt-sp .acmlt-title h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px} .acmlt-sp .acmlt-title h1 small{font-size:15px;font-weight:700;color:var(--acmlt-sub)} .acmlt .acmlt-sp__badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none} .acmlt-sp__badges li{font-size:12px;font-weight:700;color:var(--acmlt-blue);background:var(--acmlt-blue-bg);border-radius:2px;padding:2px 8px} /* 測定 */ .acmlt-sp__measure{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px 24px;align-items:start;padding:18px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:4px} .acmlt-sp__tool{border:1px solid var(--acmlt-line);border-radius:4px;overflow:hidden;background:#fff} .acmlt-sp__tool iframe{display:block;border:0;width:100%;height:540px} .acmlt .acmlt-sp__steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--acmlt-line)} .acmlt-sp__steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 2px;border-bottom:1px solid var(--acmlt-line)} .acmlt-sp__steps b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--acmlt-line);color:var(--acmlt-blue);font-size:14px} .acmlt-sp__steps span{font-size:13.5px;color:var(--acmlt-sub);line-height:1.7} .acmlt-sp__steps strong{display:block;font-size:15px;color:var(--acmlt-navy)} .acmlt-sp__note{grid-column:1/-1;font-size:12.5px;color:var(--acmlt-sub);line-height:1.7} /* 判定（口コミの絞り込みと同じ面） */ .acmlt-sp__form{padding:18px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:4px} .acmlt-sp__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end} .acmlt-sp__fields label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--acmlt-navy)} .acmlt-sp__in{display:flex;align-items:center;min-height:44px;background:#fff;border:1px solid var(--acmlt-line2);border-radius:4px;padding:0 12px} .acmlt-sp__in:focus-within{border-color:var(--acmlt-blue);box-shadow:0 0 0 3px rgba(111,191,216,.45)} .acmlt-sp__in input{flex:1;min-width:0;border:0;outline:0;background:none;font:15px var(--acmlt-f);padding:9px 0;margin:0;color:var(--acmlt-ink);box-shadow:none} .acmlt-sp__in small{font-size:12px;color:var(--acmlt-sub)} .acmlt-sp__fields button{min-height:44px;padding:0 28px;border:0;border-radius:4px;background:#0a7fa6;color:#fff;font:700 15px var(--acmlt-f);cursor:pointer} .acmlt-sp__fields button:hover{background:var(--acmlt-navy)} .acmlt-sp__hint{margin-top:10px;font-size:12.5px;color:var(--acmlt-sub);line-height:1.7} .acmlt-sp__result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px} .acmlt-sp__result[hidden]{display:none} .acmlt-sp__verdict{grid-column:1/-1;display:grid;gap:4px;padding:16px 18px;background:var(--acmlt-blue-bg);border:1px solid var(--acmlt-line);border-left:3px solid var(--acmlt-blue);border-radius:4px} .acmlt-sp__verdict.is-lv0,.acmlt-sp__verdict.is-lv1{background:#fdf3e7;border-left-color:#b45309} .acmlt-sp__vl{font-size:12px;color:var(--acmlt-sub)} .acmlt-sp__verdict strong{font-size:24px;line-height:1.35;color:var(--acmlt-navy)} .acmlt-sp__verdict p{font-size:14px;color:var(--acmlt-ink)} .acmlt-sp__verdict .acmlt-sp__inp{font-size:12.5px;color:var(--acmlt-sub)} .acmlt-sp__uses,.acmlt-sp__cmp{display:grid;gap:10px;align-content:start;padding:16px 18px;border:1px solid var(--acmlt-line);border-radius:4px} .acmlt-sp__uses h3,.acmlt-sp__cmp h3{font-size:15px;font-weight:800;color:var(--acmlt-navy)} .acmlt .acmlt-sp__uses ul{margin:0;padding:0;list-style:none} .acmlt-sp__uses li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--acmlt-line);font-size:14px} .acmlt-sp__uses li:last-child{border-bottom:0} .acmlt-sp__uses b{min-width:2em;text-align:center;font-size:12.5px;border-radius:2px;padding:1px 6px;color:var(--acmlt-sub);background:var(--acmlt-soft)} .acmlt-sp__uses b.is-ok{color:var(--acmlt-green);background:var(--acmlt-green-bg)} .acmlt-sp__uses b.is-soso{color:#a04a06;background:#fdf1e4} .acmlt-sp__uses b.is-ng{color:#b42318;background:#fdecea} .acmlt-sp__cmp p{font-size:14px} .acmlt-sp__bar{display:flex;height:22px;border-radius:2px;overflow:hidden;background:var(--acmlt-soft)} .acmlt-sp__bar .is-slow{background:#9cc9da}.acmlt-sp__bar .is-same{background:var(--acmlt-blue)}.acmlt-sp__bar .is-fast{background:#d5dde3} .acmlt .acmlt-sp__lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0} .acmlt-sp__lg div{display:grid;gap:2px;padding-left:10px;border-left:3px solid} .acmlt-sp__lg .is-slow{border-color:#9cc9da}.acmlt-sp__lg .is-same{border-color:var(--acmlt-blue)}.acmlt-sp__lg .is-fast{border-color:#d5dde3} .acmlt-sp__lg dt{font-size:11.5px;color:var(--acmlt-sub)} .acmlt-sp__lg dd{margin:0;font-size:16px;font-weight:800;color:var(--acmlt-navy)} .acmlt-sp__fn{font-size:12.5px;color:var(--acmlt-sub);line-height:1.7} .acmlt-sp__tip{grid-column:1/-1;font-size:13.5px;padding:12px 16px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:4px} /* 解説：左に目次（追従）、右に本文 */ .acmlt-sp__body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start;margin-top:44px} .acmlt-sp__toc{position:sticky;top:calc(var(--acmlt-top) + 16px);display:grid;border-top:1px solid var(--acmlt-line)} .acmlt-sp__toc strong{font-size:12.5px;color:var(--acmlt-sub);padding:10px 2px 6px} .acmlt-sp__toc a{display:block;padding:8px 2px;border-bottom:1px solid var(--acmlt-line);font-size:13.5px;color:var(--acmlt-ink);text-decoration:none} .acmlt-sp__toc a:hover{color:var(--acmlt-blue);text-decoration:underline} .acmlt-sp__docs{display:grid;gap:48px;min-width:0} .acmlt-sp__doc{display:grid;gap:14px} .acmlt-sp__doc [id]{scroll-margin-top:calc(var(--acmlt-top) + 12px)} .acmlt-sp__doc .acmlt-sec-h{margin-bottom:0} .acmlt-sp__doc h3{margin-top:10px;font-size:16px;font-weight:800;color:var(--acmlt-navy)} .acmlt-sp__doc > p{font-size:15px;line-height:1.9;color:var(--acmlt-ink)} .acmlt-sp__doc strong{color:var(--acmlt-navy)} .acmlt-sp__doc code{font-size:13px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:2px;padding:1px 6px} .acmlt .acmlt-sp__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0} .acmlt-sp__metrics div{display:grid;gap:6px;align-content:start;padding:14px 16px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-left:3px solid var(--acmlt-blue);border-radius:4px} .acmlt-sp__metrics dt{font-size:15px;font-weight:800;color:var(--acmlt-navy)} .acmlt-sp__metrics dd{margin:0;display:grid;gap:8px;font-size:13px;color:var(--acmlt-sub);line-height:1.7} .acmlt-sp__metrics dd span{justify-self:start;font-size:12px;font-weight:700;color:var(--acmlt-blue);background:#fff;border-radius:2px;padding:1px 8px} .acmlt-sp__ping{margin:0;display:grid;gap:12px;padding:18px;background:var(--acmlt-soft);border:1px solid var(--acmlt-line);border-radius:4px} .acmlt-sp__ping svg{width:100%;max-width:520px;height:auto;justify-self:center} .acmlt-sp__ping figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .acmlt-sp__ping figcaption span{display:grid;gap:2px;text-align:center;padding:10px;background:#fff;border:1px solid var(--acmlt-line);border-radius:4px;font-size:12.5px;color:var(--acmlt-sub)} .acmlt-sp__ping figcaption b{font-size:17px;color:var(--acmlt-navy)} .acmlt .acmlt-sp__list{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:spl;border-top:1px solid var(--acmlt-line)} .acmlt-sp__list li{position:relative;padding:11px 4px 11px 34px;border-bottom:1px solid var(--acmlt-line);font-size:14.5px;line-height:1.8;color:var(--acmlt-ink)} .acmlt-sp__list li::before{content:"";position:absolute;left:10px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--acmlt-blue)} ol.acmlt-sp__list li{counter-increment:spl} ol.acmlt-sp__list li::before{content:counter(spl);left:2px;top:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:2px;background:var(--acmlt-blue-bg);color:var(--acmlt-blue);font-size:12.5px;font-weight:800} .acmlt-sp__dist{margin:0;display:grid;gap:8px;padding:18px;border:1px solid var(--acmlt-line);border-radius:4px} .acmlt-sp__dist figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:4px;font-size:15px;font-weight:800;color:var(--acmlt-navy)} .acmlt-sp__dist figcaption small{font-size:12px;font-weight:400;color:var(--acmlt-sub)} .acmlt-sp__dist div{display:grid;grid-template-columns:8.5em minmax(0,1fr) 3.6em;gap:12px;align-items:center;font-size:13px} .acmlt-sp__dist i{display:block;height:22px;border-radius:2px;background:var(--acmlt-soft);overflow:hidden} .acmlt-sp__dist em{display:block;height:100%;background:var(--acmlt-blue)} .acmlt-sp__dist div:last-child em{background:var(--acmlt-line2)} .acmlt-sp__dist b{text-align:right;font-variant-numeric:tabular-nums;color:var(--acmlt-navy)} .acmlt-sp__src{font-size:12.5px;color:var(--acmlt-sub)} .acmlt-sp__faq{display:grid;border-top:1px solid var(--acmlt-line)} .acmlt-sp__qa{display:grid;gap:6px;padding:16px 2px;border-bottom:1px solid var(--acmlt-line)} .acmlt-sp__qa h3{position:relative;margin:0;padding-left:32px;font-size:15.5px} .acmlt-sp__qa h3::before,.acmlt-sp__qa p::before{position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:2px;font-size:12.5px;font-weight:800} .acmlt-sp__qa h3::before{content:"Q";background:var(--acmlt-blue);color:#fff} .acmlt-sp__qa p{position:relative;padding-left:32px;font-size:14.5px;line-height:1.85;color:var(--acmlt-ink)} .acmlt-sp__qa p::before{content:"A";background:var(--acmlt-blue-bg);color:var(--acmlt-blue)} .acmlt .acmlt-sp__svs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none} .acmlt-sp__svs li{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--acmlt-line);border-radius:4px;font-size:13px;color:var(--acmlt-sub)} .acmlt-sp__svs strong{font-size:15px} .acmlt-sp__again{margin-top:44px;text-align:center} .acmlt-tbl{overflow-x:auto;border-top:1px solid var(--acmlt-line)} .acmlt-tbl table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px} .acmlt-tbl th,.acmlt-tbl td{padding:10px 10px;border-bottom:1px solid var(--acmlt-line);text-align:left;vertical-align:top} .acmlt-tbl thead th{background:var(--acmlt-soft);font-size:12.5px;color:var(--acmlt-sub);font-weight:700} .acmlt-tbl tbody th{font-weight:700;color:var(--acmlt-navy)} @media (max-width:960px){ .acmlt-sp__measure,.acmlt-sp__result{grid-template-columns:minmax(0,1fr)} .acmlt-sp__fields{grid-template-columns:repeat(3,minmax(0,1fr))} .acmlt-sp__fields button{grid-column:1/-1} .acmlt-sp__body{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px} .acmlt-sp__toc{position:static;display:flex;gap:6px;overflow-x:auto;border-top:0;padding-bottom:4px;scrollbar-width:none} .acmlt-sp__toc strong{display:none} .acmlt-sp__toc a{flex:0 0 auto;border:1px solid var(--acmlt-line2);border-radius:999px;padding:6px 14px;font-size:13.5px;white-space:nowrap;min-height:36px} .acmlt .acmlt-sp__metrics{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .acmlt-sp__measure{padding:10px} .acmlt-sp__tool iframe{height:500px} .acmlt-sp__fields{grid-template-columns:minmax(0,1fr)} .acmlt-sp__form{padding:14px} .acmlt .acmlt-sp__lg,.acmlt .acmlt-sp__svs,.acmlt .acmlt-sp__metrics{grid-template-columns:minmax(0,1fr)} .acmlt-sp__ping figcaption{grid-template-columns:minmax(0,1fr)} .acmlt-sp__dist div{grid-template-columns:7.5em minmax(0,1fr) 3.4em;gap:8px;font-size:12.5px} } /* 冒頭の紺の帯（各ページ共通・acmlt_band()。2026-10-09） */ .acmlt-portal h1 small{display:block;margin-top:4px;font-size:15px;font-weight:700;letter-spacing:0;color:#a9c1d6} .acmlt-portal .acmlt-sp__badges{margin-top:16px} .acmlt-portal .acmlt-sp__badges li{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)} .acmlt-portal--sub + .acmlt-main{padding-top:28px} .acmlt-portal--sub + .acmlt-main--list .acmlt-cols{margin-top:0} /* 紺の帯に薄い方眼（ツールのカードの絵と同じ線。2026-10-09 ユーザー指定）。TOP・各ページ共通 */ .acmlt-portal{background-color:var(--acmlt-navy);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px} /* スピードテストの解説を読みやすく（2026-10-09「本文が見づらい」）：1行を長くしすぎない／節の区切りをはっきり／文字を少し大きく */ .acmlt-sp__body{grid-template-columns:200px minmax(0,780px);justify-content:center} .acmlt-sp__docs{gap:0} .acmlt-sp__doc{gap:16px;padding:40px 0;border-top:1px solid var(--acmlt-line)} .acmlt-sp__doc:first-child{padding-top:0;border-top:0} .acmlt-sp__doc .acmlt-sec-h h2{font-size:21px;line-height:1.5} .acmlt-sp__doc h3{margin-top:18px;font-size:17px} .acmlt-sp__doc > p{font-size:15.5px;line-height:2} .acmlt-sp__list li{font-size:15px;line-height:1.85;padding-top:12px;padding-bottom:12px} .acmlt-sp__qa p{font-size:15px} .acmlt-tbl table{font-size:14px} @media (max-width:960px){ .acmlt-sp__body{grid-template-columns:minmax(0,1fr)} .acmlt-sp__doc{padding:32px 0} } @media (max-width:600px){ .acmlt-sp__doc > p{font-size:15px;line-height:1.9} .acmlt-sp__doc .acmlt-sec-h h2{font-size:19px} } /* ── ラボ共通のきまり（2026-10-09 改訂：マガジンTOPのデザインに揃える。ここより下で個別に崩さない） ── 元：site/homepage/acm-minato.css（.acmm-heading / .acmm-card / .acmm-tag / .acmm-card-arrow / .acmm-category-browse） 使わないもの：筆記体の英字・風景の画像・記事ページの見た目（ユーザー指定） 色：紺 #09284b／青 #007e9e（文字）・#008ca8（ラベル）／水色 #05b6d4（矢印）／線 #e2eff4／面 #f5fcff 見出し(h2)：紺の太字＋黄色のマーカー下線（TOPと同じ）。小見出し(h3)：太字のみ カード：白・角9px・薄い水色の線・ごく薄い影。ラベル：角丸（ピル）。矢印：水色の丸 面（絞り込み・入力欄・図）：薄い水色の面＋角16px。表：縦横の線あり */ .acmlt{--acmlt-navy:#09284b;--acmlt-blue:#007e9e;--acmlt-blue-bg:#e8f5fa;--acmlt-line:#e2eff4;--acmlt-line2:#cfe6ee;--acmlt-soft:#f5fcff;--acmlt-sub:#536b83;--acmlt-ink:#1b2f42;--acmlt-cyan:#05b6d4;--acmlt-teal:#008ca8} /* 見出し */ .acmlt-sec-h{padding-bottom:0;margin-bottom:16px;border-bottom:0} .acmlt-sec-h h2,.acmlt-about h2{font-size:25px;font-weight:700;line-height:1.5;letter-spacing:.015em;color:var(--acmlt-navy);text-decoration:underline;text-decoration-color:#fff4a1;text-decoration-thickness:6px;text-underline-offset:1px;text-decoration-skip-ink:none} .acmlt-about h2{padding-bottom:0;border-bottom:0} .acmlt-sp__doc .acmlt-sec-h{margin-bottom:0} .acmlt-sp__doc h3,.acmlt-sp__uses h3,.acmlt-sp__cmp h3{padding:0;border:0;font-size:17px;font-weight:700;color:var(--acmlt-navy)} .acmlt-sp__uses h3,.acmlt-sp__cmp h3{font-size:15px} /* カード（TOPの記事カードと同じ） */ .acmlt-card,.acmlt-tile,.acmlt-toolrow a,.acmlt-toolcard,.acmlt-use__box,.acmlt-rv,.acmlt-sp__uses,.acmlt-sp__cmp,.acmlt-sp__metrics div,.acmlt-sp__dist,.acmlt-sp__svs li,.acmlt-sp__verdict,.acmlt-empty{border:1px solid var(--acmlt-line);border-radius:9px;background:#fff;box-shadow:0 2px 5px #134e6004} .acmlt-card:hover,.acmlt-tile:hover,.acmlt-toolrow a:hover,.acmlt-toolcard:hover{border-color:#a9dcea;background:#fff;transform:none;box-shadow:0 6px 16px #134e600d} .acmlt-tile{padding:18px} .acmlt-tile.is-past{background:#fff} .acmlt-tile__ico,.acmlt-toolrow__ico{background:var(--acmlt-blue-bg);border:0;color:var(--acmlt-teal)} .acmlt-tile__n b{color:var(--acmlt-teal)} .acmlt-sp__metrics div{background:#fff} .acmlt-sp__metrics dd span{background:var(--acmlt-blue-bg);border-radius:99px;padding:1px 10px} .acmlt-sp__verdict{background:var(--acmlt-soft)} .acmlt-sp__verdict.is-lv0,.acmlt-sp__verdict.is-lv1{background:#fff8ef;border-color:#f3dcc0} /* 矢印：水色の丸 */ .acmlt-toolrow__go,.acmlt-tile__n .acmlt-i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acmlt-cyan);color:#fff} .acmlt-toolrow__go .acmlt-i,.acmlt-tile__n .acmlt-i{width:15px;height:15px;color:#fff;margin:0} .acmlt-tile__n{align-items:center;gap:6px} /* ラベル：ピル */ .acmlt-kind{color:#fff;background:var(--acmlt-teal);border-radius:99px;padding:1px 10px;font-size:11.5px;letter-spacing:.04em} .acmlt-kind.is-m{color:#fff;background:#175777} .acmlt-past{border-radius:99px;padding:0 9px} .acmlt-rv__type,.acmlt-rv__pick,.acmlt-sp__badges li{border-radius:99px} .acmlt-sp__badges li{padding:2px 10px} /* ボタン：ピル（TOPの枠線ボタン） */ .acmlt-tbtn,.acmlt-more button{border:1px solid #54bddb;border-radius:99px;color:#007998;background:#fff;font-weight:700} .acmlt-tbtn:hover,.acmlt-more button:hover{background:var(--acmlt-soft)} .acmlt-sp__fields button,.acmlt-portal__search button{border-radius:99px} .acmlt-portal__search{border-radius:99px} .acmlt-portal__search input{border-radius:99px 0 0 99px;padding-left:22px} .acmlt-portal__search button{border-radius:0 99px 99px 0;background:var(--acmlt-teal)} .acmlt-portal__search button:hover{background:#0099b8} /* 面（絞り込み・入力欄・測定・図） */ .acmlt-rvbar,.acmlt-sp__form,.acmlt-sp__measure,.acmlt-sp__ping,.acmlt-sp__tip,.acmlt-rvbar__toggle:not([hidden]){background:var(--acmlt-soft);border:1px solid #d7edf4;border-radius:16px;box-shadow:none} .acmlt-sp__tool,.acmlt-sp__ping figcaption span{border-radius:9px} .acmlt-sp__in,.acmlt-rvbar select,.acmlt-sel select,.acmlt-search input{border-color:var(--acmlt-line2);border-radius:8px} .acmlt-opts button.is-on{background:var(--acmlt-blue-bg);border-radius:8px} /* 紺の帯：TOPの紺に */ .acmlt-portal{background-color:var(--acmlt-navy)} /* 左の太い色帯は使わない（2026-10-09） */ .acmlt-tile,.acmlt-tile.is-past,.acmlt-sp__verdict,.acmlt-sp__metrics div{border-left-width:1px} .acmlt-opts button,.acmlt-opts button.is-on{border-left:0} .acmlt-example{border-left:0;border-radius:8px} .acmlt-sp__lg div{padding-left:0;border-left:0} .acmlt-sp__lg dt::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px} .acmlt-sp__lg .is-slow dt::before{background:#9cc9da}.acmlt-sp__lg .is-same dt::before{background:var(--acmlt-blue)}.acmlt-sp__lg .is-fast dt::before{background:#d5dde3} /* 表：縦横の線あり */ .acmlt-tbl{overflow-x:auto;border:0;border-radius:0} .acmlt-tbl table{width:100%;border-collapse:collapse;border:1px solid var(--acmlt-line2);font-size:14px;min-width:460px} .acmlt-tbl th,.acmlt-tbl td{padding:10px 12px;border:1px solid var(--acmlt-line2);text-align:left;vertical-align:middle;line-height:1.6} .acmlt-tbl thead th{background:var(--acmlt-blue-bg);color:var(--acmlt-navy);font-size:13px;font-weight:700;white-space:nowrap} .acmlt-tbl tbody th{background:var(--acmlt-soft);color:var(--acmlt-navy);font-weight:700} .acmlt-tbl tbody tr:nth-child(even) td{background:#fbfdfe} /* 数のグラフ（分布・比較）も同じ色 */ .acmlt-sp__dist em,.acmlt-sp__bar .is-same{background:var(--acmlt-teal)} .acmlt-sp__dist i,.acmlt-sp__bar{border-radius:99px} @media (max-width:600px){ .acmlt-sec-h h2,.acmlt-about h2{font-size:21px;text-decoration-thickness:5px} } /* FAQ：Q・A の印の分の余白（共通のきまりで h3 の余白を消したため印と見出しが重なっていた。2026-10-09） */ .acmlt-sp__doc .acmlt-sp__qa h3{position:relative;margin:0;padding:0 0 0 32px;font-size:15.5px;line-height:1.6} /* ── スマホ（2026-10-09 最適化） ── */ @media (max-width:600px){ /* 紺の帯：低くして本題（測定・一覧）を早く見せる */ .acmlt-portal--sub .acmlt-portal__in{padding-block:4px 20px} .acmlt-portal--sub h1{margin-top:8px;font-size:22px} .acmlt-portal h1 small{font-size:13px} .acmlt-portal--sub .acmlt-portal__lead{font-size:13.5px;line-height:1.7} .acmlt-portal .acmlt-sp__badges{margin-top:10px;gap:4px} .acmlt-portal .acmlt-sp__badges li{font-size:11px;padding:1px 6px} .acmlt-portal__counts dd{font-size:30px} .acmlt-portal--sub + .acmlt-main{padding-top:20px} /* 測定：枠を外して画面幅いっぱいに使う */ .acmlt-sp > section{margin-top:20px} .acmlt-sp__measure{padding:0;background:none;border:0;gap:12px} .acmlt-sp__tool iframe{height:470px} .acmlt-sp__steps li{padding:10px 2px} /* 解説 */ .acmlt-sp__body{margin-top:28px} .acmlt-sp__doc{padding:28px 0;gap:12px} .acmlt-sp__doc h3{margin-top:12px;font-size:16px} .acmlt .acmlt-sp__metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .acmlt-sp__metrics div{padding:12px} .acmlt-sp__metrics dt{font-size:14px} .acmlt-sp__metrics dd{font-size:12.5px;line-height:1.6} .acmlt-sp__list li{font-size:14.5px;padding:10px 2px 10px 30px} .acmlt-sp__qa{padding:14px 0} .acmlt-sp__qa p{font-size:14.5px;line-height:1.8} .acmlt-sp__dist{padding:14px} /* 表：画面幅に収める（列が多い表だけ横に流れる） */ .acmlt-tbl table{min-width:0;font-size:12.5px} .acmlt-tbl th,.acmlt-tbl td{padding:8px 7px;line-height:1.5} .acmlt-tbl thead th{font-size:12px;white-space:normal} .acmlt-tbl tbody th{white-space:normal;min-width:5.5em} } @media (max-width:600px){ /* バッジは説明文と同じ内容なのでスマホでは出さない（測定ツールを1画面目に近づける） */ .acmlt-portal .acmlt-sp__badges{display:none} } /* ロゴ：マガジンの正式ロゴ（uploads/logo-allmag.png）の右に「LAB」の札を同じ高さで（2026-10-09 ユーザー指定）。札の色はロゴの「マガジン」の水色 */ .acmlt .acmlt-logo{display:inline-flex;flex-direction:row;align-items:center;gap:8px;height:44px;line-height:1;text-decoration:none} .acmlt-logo__img{display:block;height:44px;width:auto} .acmlt .acmlt-logo .acmlt-logo__lab{display:grid;place-items:center;align-self:stretch;padding:0 12px 0 13px;border-radius:5px;background:#00bfdc;color:#fff;font-size:28px;font-weight:800;letter-spacing:.08em;line-height:1} @media (max-width:600px){ .acmlt .acmlt-logo{height:34px;gap:6px} .acmlt-logo__img{height:34px} .acmlt .acmlt-logo .acmlt-logo__lab{font-size:21px;padding:0 9px 0 10px;border-radius:4px} } /* 冒頭の帯：ロゴの色（水色 #00bfdc ＋濃い文字）に合わせる（2026-10-09 ユーザー指定）。 水色の上の白文字は読みにくいので、薄い水色の面＋水色の方眼＋紺の文字にした */ .acmlt-portal{color:var(--acmlt-navy);background-color:#effbfd;background-image:linear-gradient(rgba(0,191,220,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,191,220,.16) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;border-bottom:1px solid #cdeef4} .acmlt-portal h1{color:var(--acmlt-navy)} .acmlt-portal h1 small{color:var(--acmlt-sub)} .acmlt-portal__lead{color:#3d566c} .acmlt-crumb--inv,.acmlt-crumb--inv a{color:var(--acmlt-sub)} .acmlt-portal__counts div{border-left-color:#bfe6ee} .acmlt-portal__counts dt{color:var(--acmlt-sub)} .acmlt-portal__counts dd{color:var(--acmlt-teal)} .acmlt-portal__counts dd small{color:var(--acmlt-sub)} .acmlt-portal__search{box-shadow:0 0 0 1px #9fdbe7} .acmlt-portal__search:focus-within{box-shadow:0 0 0 2px var(--acmlt-cyan),0 0 0 5px rgba(0,191,220,.18)} .acmlt-portal__chips a{color:var(--acmlt-navy);border-color:#9fdbe7;background:#fff} .acmlt-portal__chips a:hover{background:var(--acmlt-blue-bg);border-color:var(--acmlt-cyan)} .acmlt-portal__chips a:focus-visible{outline-color:var(--acmlt-cyan)} .acmlt-portal__chips span{color:var(--acmlt-sub)} .acmlt-portal__chips a.is-on{background:var(--acmlt-teal);border-color:var(--acmlt-teal);color:#fff} .acmlt-portal__chips a.is-on span{color:#d9f3f8} .acmlt-portal .acmlt-sp__badges li{color:var(--acmlt-teal);background:#fff;border:1px solid #9fdbe7} /* ロゴの「ラボ」札：ロゴ画像の中の「マガジン」の札と同じ高さ・同じ位置・同じ色に置き、「マガジン ラボ」と続いて読めるようにする（2026-10-09） 画像 530×156 の中で「マガジン」の札は 縦67〜132px・右端477px・色 #39e3e8（画像から実測）。--lh＝ロゴ画像の表示の高さ */ .acmlt .acmlt-logo{--lh:44px;align-items:flex-start;gap:0;height:var(--lh)} .acmlt-logo__img{height:var(--lh)} .acmlt .acmlt-logo .acmlt-logo__lab{align-self:auto;height:calc(var(--lh) * 66 / 156);margin-top:calc(var(--lh) * 67 / 156);margin-left:calc(5px - var(--lh) * 53 / 156);padding:0 .42em;border-radius:3px;background:#39e3e8;color:#fff;font-size:calc(var(--lh) * 66 / 156 * .78);font-weight:800;letter-spacing:.14em;line-height:1} @media (max-width:600px){ .acmlt .acmlt-logo{--lh:36px} .acmlt .acmlt-logo .acmlt-logo__lab{padding:0 .4em;border-radius:2px} } /* ヘッダー：マガジンTOPと同じアイランド型（白い浮いた帯・角24px・薄い影）。2026-10-09 ユーザー指定 元：site/homepage/header/island-header.css の .acmm-header-inner（幅 min(1280px,100%-48px)・高さ76px・上16px／SP 高さ60px・上8px・角18px） ヘッダーは上に固定し、下の帯（方眼）がヘッダーの裏まで続くように、帯の上に同じ高さの余白を取る */ .acmlt{--acmlt-top:92px} .admin-bar .acmlt{--acmlt-top:124px} .acmlt .acmlt-header{position:sticky;top:0;z-index:100;height:92px;margin-bottom:-92px;background:transparent;border-bottom:0;pointer-events:none} .admin-bar .acmlt .acmlt-header{top:32px} .acmlt .acmlt-header__in{pointer-events:auto;box-sizing:border-box;width:min(1280px,calc(100% - 48px));max-width:1280px;height:76px;margin:16px auto 0;padding:10px 24px;gap:28px;border:1px solid #e7f0f5;border-radius:24px;background:#fff;box-shadow:0 6px 26px #173e5610} .acmlt-header ~ .acmlt-portal{padding-top:92px} .acmlt-gnav a{border-radius:99px;border-bottom:0;padding:9px 14px} .acmlt-gnav a:hover,.acmlt-gnav a.is-current{color:var(--acmlt-teal);background:var(--acmlt-blue-bg)} .acmlt-mag{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid #54bddb;border-radius:99px;color:#007998;font-size:13.5px;text-decoration:none} .acmlt-mag:hover{background:var(--acmlt-soft);text-decoration:none} @media (max-width:820px){ .acmlt{--acmlt-top:68px} .admin-bar .acmlt{--acmlt-top:100px} .acmlt .acmlt-header{height:68px;margin-bottom:-68px} .acmlt .acmlt-header__in{width:calc(100% - 20px);height:60px;margin:8px auto 0;padding:6px 12px;gap:6px;border-radius:18px} .acmlt-header ~ .acmlt-portal{padding-top:68px} } @media (max-width:782px){ .admin-bar .acmlt .acmlt-header{top:46px} .admin-bar .acmlt{--acmlt-top:114px} } @media (max-width:600px){ .admin-bar .acmlt .acmlt-header{top:0} .admin-bar .acmlt{--acmlt-top:68px} } /* ロゴの「ラボ」札（2026-10-09 改訂・ユーザー指定）：ロゴ画像と同じ高さ・黒の背景に白文字。 画像は縦2〜155px・右端477pxまで絵がある（実測）ので、高さは画像と同じ、左は画像の右の余白（53px分）を詰める */ .acmlt .acmlt-logo{align-items:stretch} .acmlt .acmlt-logo .acmlt-logo__lab{display:grid;place-items:center;height:auto;margin-top:0;margin-left:calc(8px - var(--lh) * 53 / 156);padding:0 .5em;border-radius:6px;background:#111;color:#fff;font-size:calc(var(--lh) * .5);letter-spacing:.12em} @media (max-width:600px){ .acmlt .acmlt-logo .acmlt-logo__lab{border-radius:5px;padding:0 .45em} } /* ヘッダーの上のすき間（16px）を消す：浮いた帯の上の余白を margin ではなく padding にする（margin が外へ抜けてページ全体が下がっていた。2026-10-09） */ .acmlt .acmlt-header{box-sizing:border-box;padding-top:16px} .acmlt .acmlt-header__in{margin:0 auto} @media (max-width:820px){ .acmlt .acmlt-header{padding-top:8px} .acmlt .acmlt-header__in{margin:0 auto} } /* パンくず（フッターの直前）：マガジン（SWELL .p-breadcrumb.-bg-on）と同じ見た目。2026-10-09 */ .acmlt-bc{margin:40px 0 14px} .acmlt .acmlt-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 5.5px;margin:0 auto;padding-block:0;list-style:none;font-size:11px} .acmlt-bc li{display:inline-flex;align-items:center} .acmlt-bc li:not(:last-child)::after{content:"/";margin:0 4px;font-weight:700;color:#b2bec3} .acmlt-bc a,.acmlt-bc span{display:block;padding:2px 10px;border-radius:99px;background:rgba(0,198,207,.08);color:#00a3ab;font-size:12px;font-weight:500;line-height:1.6;text-decoration:none} .acmlt-bc a:hover{background:rgba(0,198,207,.16)} .acmlt-bc span[aria-current]{color:var(--acmlt-sub);background:#f2f6f8} @media (max-width:820px){.acmlt-bc{margin:28px 0 12px}} /* 帯の上はパンくずが無くなった分を詰める */ .acmlt-portal__in{padding-top:18px} @media (max-width:600px){.acmlt-portal--sub .acmlt-portal__in{padding-top:14px}} /* 見出し(h2)：黄色の下線はやめ、見出しの前にアイコン（2026-10-09 ユーザー指定）。アイコンは水色の棒グラフ（ラボ＝データの印）で全見出し共通 */ .acmlt-sec-h h2,.acmlt-about h2{display:inline-flex;align-items:center;gap:.42em;text-decoration:none} .acmlt-sec-h h2::before,.acmlt-about h2::before{content:"";flex:none;width:1.05em;height:1.05em;border-radius:.24em;background:var(--acmlt-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='5' y='12' width='3.2' height='7' rx='1'/%3E%3Crect x='10.4' y='8' width='3.2' height='11' rx='1'/%3E%3Crect x='15.8' y='5' width='3.2' height='14' rx='1'/%3E%3C/svg%3E") no-repeat center/72%} /* ロゴの「LAB」（2026-10-09 ユーザー選択 C）：ロゴの右に細い区切り線＋水色の「LAB」。札（背景）は付けない＝ロゴを改変して見せない */ .acmlt .acmlt-logo{align-items:center} .acmlt .acmlt-logo .acmlt-logo__lab{display:inline-flex;align-items:center;align-self:center;height:auto;margin:0 0 0 calc(6px - var(--lh) * 53 / 156);padding:0;border-radius:0;background:none;color:#00bfdc;font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(var(--lh) * .68);font-weight:800;letter-spacing:.08em;line-height:1} .acmlt .acmlt-logo .acmlt-logo__lab::before{content:"";width:1px;height:calc(var(--lh) * .78);margin-right:calc(var(--lh) * .27);background:#cfe6ee} @media (max-width:600px){ .acmlt .acmlt-logo .acmlt-logo__lab{padding:0;border-radius:0} } /* 「LAB」を細めに（2026-10-09 ユーザー指定）。細い書体は端末によって無いので、横を縮めて全端末で同じ見え方にする（縮めた分の幅は右の余白で詰める） */ .acmlt .acmlt-logo .acmlt-logo__lab{letter-spacing:.04em} .acmlt-logo__lab > span{display:inline-block;transform:scaleX(.78);transform-origin:left center;margin-right:-.4em} /* 冒頭の帯の背景：方眼の線をやめ、点の方眼（ドット）にする（2026-10-09 ユーザー選択 2）。線より静かで、TOPの明るい雰囲気に近い */ .acmlt-portal{background-color:#effbfd;background-image:radial-gradient(rgba(0,191,220,.32) 1.2px,transparent 1.4px);background-size:18px 18px;background-position:0 0} /* 点を大きく（2026-10-09 ユーザー指定）：半径1.2→2px、間隔18→22px、濃さは少し下げて文字の邪魔をしない */ .acmlt-portal{background-image:radial-gradient(rgba(0,191,220,.26) 2px,transparent 2.3px);background-size:22px 22px} /* 帯の背景：模様（線の方眼・点）はやめて無地の薄い水色にする（2026-10-09 ユーザー判断） */ .acmlt-portal{background-image:none;background-color:#effbfd} /* 帯の背景を水色のグラデーションに（2026-10-15 ユーザー指定）：左上の水色から右下の白に近い水色へ。模様は付けない */ .acmlt-portal{background-color:#effbfd;background-image:linear-gradient(120deg,#ddf3fa 0%,#ecf9fc 45%,#f8fdfe 100%);background-size:auto} /* ── ツールのカード（acmlt_tool_cards。TOP と /lab/tools/ 共通・2026-10-09） ── 上：画面の見本（薄い水色の面に、ツールの画面を簡単に描く）／下：アイコン＋名前・説明・補足・開く */ .acmlt .acmlt-tcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none} .acmlt-tcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--acmlt-line);border-radius:9px;background:#fff;box-shadow:0 2px 5px #134e6004;overflow:hidden;text-decoration:none;color:var(--acmlt-ink);transition:border-color .15s,box-shadow .15s} .acmlt-tcard:hover{border-color:#a9dcea;box-shadow:0 8px 20px #134e6012} .acmlt-tcard:hover .acmlt-tcard__t{color:var(--acmlt-teal)} .acmlt-tcard:hover .acmlt-tp__card:not(.is-back),.acmlt-tcard:hover .acmlt-tp__gauge{transform:translateY(-2px)} .acmlt-tcard__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 18px;flex:1} .acmlt-tcard__t{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--acmlt-navy)} .acmlt-tcard__ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--acmlt-blue-bg);color:var(--acmlt-teal)} .acmlt-tcard__ico .acmlt-i{width:18px;height:18px} .acmlt-tcard__d{font-size:14px;line-height:1.75;color:var(--acmlt-ink);flex:1} .acmlt-tcard__f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--acmlt-line)} .acmlt-tcard__m{font-size:12.5px;color:var(--acmlt-sub)} .acmlt-tcard__go{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;background:var(--acmlt-teal);color:#fff;font-size:13.5px;font-weight:700} .acmlt-tcard__go .acmlt-i{width:14px;height:14px} /* 画面の見本 */ .acmlt-tp{position:relative;display:flex;align-items:center;justify-content:center;gap:22px;height:170px;background:var(--acmlt-soft);border-bottom:1px solid #d7edf4;overflow:hidden} .acmlt-tp__ex{position:absolute;z-index:2;right:10px;top:8px;font-size:10.5px;color:var(--acmlt-sub);background:#fff;border:1px solid var(--acmlt-line);border-radius:99px;padding:0 8px} .acmlt-tp__gauge{position:relative;display:grid;justify-items:center;width:150px;padding:12px 12px 10px;background:#fff;border:1px solid var(--acmlt-line);border-radius:12px;box-shadow:0 4px 12px #134e600d;transition:transform .2s} .acmlt-tp__gauge svg{width:118px;height:auto} .acmlt-tp__val{margin-top:-4px;font-size:11px;color:var(--acmlt-sub)} .acmlt-tp__val b{font-size:22px;font-weight:800;color:var(--acmlt-navy);margin-right:2px} .acmlt-tp__cap{font-size:10.5px;color:var(--acmlt-teal);font-weight:700} .acmlt-tp__stats{display:grid;gap:7px} .acmlt-tp__stats > span{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-width:120px;padding:6px 10px;background:#fff;border:1px solid var(--acmlt-line);border-radius:8px} .acmlt-tp__stats i{font-style:normal;font-size:11px;color:var(--acmlt-sub)} .acmlt-tp__stats b{font-size:16px;font-weight:800;color:var(--acmlt-navy)} .acmlt-tp__stats small{font-size:10px;font-weight:400;color:var(--acmlt-sub);margin-left:2px} .acmlt-tp__stats .acmlt-tp__ok{justify-content:center;font-size:11.5px;font-weight:700;color:var(--acmlt-green);background:var(--acmlt-green-bg);border-color:transparent} .acmlt-tp--reviews{gap:0} .acmlt-tp__card{position:relative;z-index:1;display:grid;gap:8px;width:230px;padding:12px 14px;background:#fff;border:1px solid #cdeaf3;border-radius:10px;box-shadow:0 4px 12px #134e600d;transition:transform .2s} .acmlt-tp__card.is-back{position:absolute;z-index:0;width:230px;height:118px;transform:translate(16px,10px) rotate(3deg);opacity:.7;box-shadow:none} .acmlt-tp__who{display:flex;align-items:center;gap:8px} .acmlt-tp__av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acmlt-blue-bg);font-size:15px} .acmlt-tp__who b{display:block;font-size:12px;color:var(--acmlt-navy)} .acmlt-tp__who i{display:block;font-style:normal;font-size:10.5px;color:var(--acmlt-teal)} .acmlt-tp__stars{font-size:13px;color:#f0a500;letter-spacing:1px} .acmlt-tp__stars s{text-decoration:none;color:#d5dde3} .acmlt-tp__stars b{margin-left:6px;font-size:13px;color:var(--acmlt-navy);letter-spacing:0} .acmlt-tp__lines{display:grid;gap:5px} .acmlt-tp__lines span{height:6px;border-radius:3px;background:#e6eef2} .acmlt-tp__lines .is-s{width:62%} .acmlt-tp__chips{display:flex;gap:5px} .acmlt-tp__chips span{font-size:10.5px;color:var(--acmlt-navy);background:var(--acmlt-blue-bg);border-radius:99px;padding:1px 8px} @media (max-width:820px){ .acmlt .acmlt-tcards{grid-template-columns:minmax(0,1fr);gap:14px} } @media (max-width:600px){ .acmlt-tp{height:168px;gap:14px;padding-top:22px;box-sizing:border-box} /* 右上の「表示の例」と見本が重ならないよう、札の分だけ下げる */ .acmlt-tp__gauge{width:130px} .acmlt-tp__stats > span{min-width:104px} .acmlt-tcard__body{padding:14px 16px} .acmlt-tcard__t{font-size:16.5px} } @media (prefers-reduced-motion:reduce){.acmlt-tp__card,.acmlt-tp__gauge{transition:none}} /* ── 調査・実測のカード（2026-10-09「少し寂しい」→TOPの記事カードに近づける） ── 上：記事のアイキャッチ（16:9・全体を見せる）。無い場合は薄い水色の面にテーマのアイコン 中：種類・公開日／タイトル／要点／テーマのチップ／概要（薄い水色の箱にまとめる）／引用・CSV */ .acmlt .acmlt-cards{gap:20px} .acmlt .acmlt-card{padding:0;overflow:hidden} .acmlt-card__media{display:block;aspect-ratio:16/9;background:var(--acmlt-soft);border-bottom:1px solid var(--acmlt-line);overflow:hidden} .acmlt-card__media img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .25s} .acmlt-card:hover .acmlt-card__media img{transform:scale(1.025)} .acmlt-card__noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--acmlt-teal)} .acmlt-card__noimg .acmlt-i{width:48px;height:48px;opacity:.7} .acmlt-card__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 10px;flex:1} .acmlt-card__body .acmlt-ttl{font-size:17px;line-height:1.55} .acmlt-card__body .acmlt-desc{font-size:13.5px;line-height:1.7;color:var(--acmlt-sub)} .acmlt .acmlt-card__th{display:flex;flex-wrap:wrap;gap:5px;margin:0} .acmlt-card__th span{font-size:11.5px;color:var(--acmlt-navy);background:var(--acmlt-blue-bg);border-radius:99px;padding:1px 9px} .acmlt-card__body .acmlt-spec{margin:2px 0 0;padding:10px 12px;background:var(--acmlt-soft);border:1px solid #d7edf4;border-radius:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;border-top:1px solid #d7edf4} .acmlt-card__body .acmlt-spec div{display:flex;gap:8px;font-size:12.5px;min-width:0} .acmlt-card__body .acmlt-spec div:nth-child(n+3){grid-column:1/-1} .acmlt-card__body .acmlt-spec dt{flex:none;color:var(--acmlt-sub)} .acmlt-card__body .acmlt-spec dd{margin:0;color:var(--acmlt-ink);overflow-wrap:anywhere} .acmlt-card__body .acmlt-actions{margin-top:auto;padding-top:6px} @media (max-width:600px){ .acmlt-card__body{padding:14px 14px 8px} .acmlt-card__body .acmlt-ttl{font-size:16px} } /* ラボのロゴ（2026-10-15〜）：「オールコネクトマガジン LAB」を1枚の画像に（site/lab/assets/acm-lab-logo-v2.png・600×200・透過。旧 acm-lab-logo.png は残置）。旧「LAB」の文字の重ね合わせは使わない */ .acmlt .acmlt-logo.acmlt-logo--img{display:inline-flex;align-items:center;height:var(--lh,44px);gap:0} .acmlt .acmlt-logo--img .acmlt-logo__img{display:block;height:var(--lh,44px);width:auto} /* ロゴを大きく（PC 62px・SP 46px。ヘッダーの高さ PC 76px・SP 60px に収まる範囲） */ .acmlt .acmlt-logo.acmlt-logo--img{--lh:62px} @media (max-width:600px){.acmlt .acmlt-logo.acmlt-logo--img{--lh:46px}} /* ページ全体の拡大：マガジンの style.css と同じ値・切り替え幅にそろえる（2026-10-16 ユーザー指示） 1380px以上 → 115%／1320〜1379px → 110%／1319px以下 → 等倍。値を変えたら下の --acmlt-zoom も同じに変える */ @media (min-width:1320px){html{zoom:1.1}} @media (min-width:1380px){html{zoom:1.15}} /* ヘッダーのナビのドロップダウン（2026-10-15）：項目に乗せる・フォーカスすると開く。白い面・角14px・薄い影（ヘッダーの帯と同じ） */ .acmlt-gnav{gap:2px} .acmlt-gnav__item{position:relative} .acmlt-gnav__top{display:inline-flex;align-items:center;gap:6px} .acmlt-gnav__top .acmlt-i{width:10px;height:10px;transition:transform .15s} .acmlt-gnav__item:hover .acmlt-gnav__top .acmlt-i,.acmlt-gnav__item:focus-within .acmlt-gnav__top .acmlt-i{transform:rotate(180deg)} .acmlt-gnav__item:hover>.acmlt-gnav__top,.acmlt-gnav__item:focus-within>.acmlt-gnav__top{color:var(--acmlt-teal);background:var(--acmlt-blue-bg)} .acmlt-gnav__panel{position:absolute;left:0;top:100%;z-index:120;display:none;gap:24px;min-width:300px;margin-top:10px;padding:18px 20px 14px;background:#fff;border:1px solid #e7f0f5;border-radius:14px;box-shadow:0 14px 34px #173e561f} .acmlt-gnav__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* 項目と面の間のすき間でも閉じない */ .acmlt-gnav__panel.is-wide{grid-template-columns:minmax(220px,1fr) minmax(250px,1.2fr);min-width:560px} .acmlt-gnav__item:hover>.acmlt-gnav__panel,.acmlt-gnav__item:focus-within>.acmlt-gnav__panel{display:grid} .acmlt-gnav__h{margin:0 0 6px;padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--acmlt-sub)} .acmlt-gnav__col ul{margin:0;padding:0;list-style:none} .acmlt .acmlt-gnav__col a{display:grid;gap:2px;padding:8px 10px;border-radius:9px;background:none;color:var(--acmlt-navy);font-size:14px;font-weight:700;line-height:1.45;text-decoration:none} .acmlt .acmlt-gnav__col a:hover,.acmlt .acmlt-gnav__col a:focus-visible{background:var(--acmlt-soft);color:var(--acmlt-teal)} .acmlt-gnav__t{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .acmlt-gnav__n{font-size:12px;font-weight:600;color:var(--acmlt-sub);font-variant-numeric:tabular-nums;white-space:nowrap} .acmlt-gnav__d{font-size:12px;font-weight:500;color:var(--acmlt-sub)} .acmlt-gnav__item:last-child .acmlt-gnav__panel{left:auto;right:0} /* SP のメニュー：項目ごとに見出し＋中身。長くなるので面の中でスクロールする */ .acmlt-menu__panel{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0} .acmlt .acmlt-menu__panel a{border-bottom:0} .acmlt-menu__grp{padding:6px 0 8px;border-bottom:1px solid var(--acmlt-line)} .acmlt .acmlt-menu__panel .acmlt-menu__top{padding:10px 18px 6px;color:var(--acmlt-navy);font-size:15px;font-weight:800} .acmlt-menu__sub{margin:0;padding:0 8px;list-style:none} .acmlt .acmlt-menu__sub a{display:block;padding:8px 10px;border-radius:8px;color:var(--acmlt-ink);font-size:14px;font-weight:600} .acmlt .acmlt-menu__sub a:active{background:var(--acmlt-soft)} .acmlt .acmlt-menu__panel .acmlt-menu__mag{padding:13px 18px;color:var(--acmlt-blue);font-weight:600} /* ── ヘッダーのナビの充実（2026-10-15 ユーザー承認・タスク 2-11／2-12） ── 調査・実測：列を3つに（種類＋実施年／テーマ／新着3件）。新着の列は左に細い区切り線 右側：Google「優先表示」（マガジンのヘッダーと同じ役目。押すとマガジンと同じ案内が開く）・検索（押すと小さな検索欄）・マガジンへ 1080px 以下はナビ・優先表示・検索をメニュー（≡）にまとめる（3列の面と右側のボタンが入りきらないため。820px 以下は従来どおり「マガジンへ」もメニューへ） */ .acmlt-gnav__panel.is-3{grid-template-columns:minmax(180px,.8fr) minmax(220px,1fr) minmax(250px,1.15fr);min-width:780px} .acmlt-gnav__col > .acmlt-gnav__h ~ .acmlt-gnav__h{margin-top:14px} .acmlt-gnav__panel.is-3 > .acmlt-gnav__col:last-child{padding-left:20px;border-left:1px solid var(--acmlt-line)} .acmlt .acmlt-google{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px 0 11px;border:1px solid #d6e8f1;border-radius:99px;background:#fff;color:var(--acmlt-navy);font-size:12.5px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s} .acmlt .acmlt-google:hover{background:var(--acmlt-soft);border-color:#a9dcea} .acmlt-hsearch{position:relative} .acmlt-hsearch > summary{border-radius:99px;transition:background .15s,color .15s} .acmlt-hsearch > summary:hover,.acmlt-hsearch[open] > summary{background:var(--acmlt-blue-bg);color:var(--acmlt-teal)} .acmlt-hsearch .is-close,.acmlt-hsearch[open] .is-open{display:none} .acmlt-hsearch[open] .is-close{display:block} .acmlt .acmlt-hsearch > summary .acmlt-i{width:20px;height:20px} .acmlt-hsearch__panel{position:absolute;right:-6px;top:calc(100% + 14px);z-index:130;width:360px;padding:12px;background:#fff;border:1px solid #e7f0f5;border-radius:14px;box-shadow:0 14px 34px #173e561f} .acmlt-hsearch__form{display:flex;align-items:stretch;margin:0;border:1px solid var(--acmlt-line2);border-radius:99px;background:#fff;overflow:hidden} .acmlt-hsearch__form:focus-within{border-color:var(--acmlt-teal);box-shadow:0 0 0 3px rgba(0,191,220,.18)} .acmlt-hsearch__form input{flex:1;min-width:0;margin:0;border:0;padding:10px 16px;font-family:inherit;font-size:15px;color:var(--acmlt-ink);background:transparent;-webkit-appearance:none;appearance:none} .acmlt .acmlt-hsearch__form input:focus,.acmlt .acmlt-hsearch__form input:focus-visible{outline:0} .acmlt-hsearch__form button{display:grid;place-items:center;flex:none;width:46px;margin:0;padding:0;border:0;background:var(--acmlt-teal);color:#fff;cursor:pointer} .acmlt-hsearch__form button:hover{background:#00748c} .acmlt .acmlt-hsearch__form button .acmlt-i{width:18px;height:18px} /* メニュー（≡）の先頭：検索欄と優先表示 */ .acmlt-menu__tools{display:grid;gap:10px;padding:10px 14px 14px;border-bottom:1px solid var(--acmlt-line)} .acmlt .acmlt-menu__tools .acmlt-hsearch__form input{font-size:16px} /* iPhone で入力時に画面が拡大されないよう 16px */ .acmlt .acmlt-menu__panel .acmlt-google--menu{display:flex;align-items:center;gap:10px;min-height:0;padding:10px 12px;border:1px solid #cdeaf3;border-radius:10px;background:#f4fbfd;color:var(--acmlt-navy);font-weight:700;line-height:1.4;white-space:normal;text-align:left} .acmlt-google--menu > span{display:grid;gap:2px} .acmlt-google--menu b{font-size:13.5px;font-weight:700} .acmlt-google--menu i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--acmlt-sub);line-height:1.5} .acmlt-menu__h{margin:6px 18px 0;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--acmlt-sub)} .acmlt .acmlt-menu__sub .acmlt-gnav__d{display:block;margin-top:1px;font-size:12px;font-weight:500;color:var(--acmlt-sub)} @media (max-width:1080px){ .acmlt .acmlt-gnav,.acmlt .acmlt-hr > .acmlt-google,.acmlt .acmlt-hsearch{display:none} .acmlt .acmlt-menu{display:block} } /* ── カテゴリ・話題・切り口（2026-10-15・タスク 2-18。旧「テーマ」を置き換え・ユーザー了承） ── TOP：「カテゴリから探す」のタイルは従来の見た目のまま、下に子カテゴリの小さなリンク（調査のある子だけ）。その下に「話題・切り口」の小さな列 research/：カテゴリは親と子を1つの並びに置き、子は親を選んだときだけ出す（PC＝字下げ／SP＝横並びの中で親の右） カード：カテゴリの札は水色、話題・切り口の札は白地に線 */ .acmlt .acmlt-catcard{display:flex;flex-direction:column;min-width:0;border:1px solid var(--acmlt-line);border-radius:9px;background:#fff;box-shadow:0 2px 5px #134e6004;transition:border-color .15s,box-shadow .15s} .acmlt .acmlt-catcard:hover{border-color:#a9dcea;box-shadow:0 6px 16px #134e600d} .acmlt .acmlt-catcard > .acmlt-tile{flex:1;height:auto;align-content:start;border:0;border-radius:9px;box-shadow:none;background:none} /* 子のリンクがある隣のタイルに高さを合わせたとき、名前と説明が上下に離れないよう上に詰める */ .acmlt .acmlt-catcard > .acmlt-tile:hover{border:0;box-shadow:none;background:none} .acmlt .acmlt-tile__subs{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 0;padding:0 18px 16px 76px} .acmlt .acmlt-tile__subs a{display:inline-flex;align-items:baseline;gap:5px;padding:3px 11px;border:1px solid var(--acmlt-line2);border-radius:99px;background:#fff;color:var(--acmlt-navy);font-size:12.5px;font-weight:700;line-height:1.5;text-decoration:none;transition:background .15s,border-color .15s,color .15s} .acmlt .acmlt-tile__subs a:hover{border-color:#54bddb;background:var(--acmlt-soft);color:var(--acmlt-teal)} .acmlt-tile__subs small{font-size:11.5px;font-weight:500;color:var(--acmlt-sub);font-variant-numeric:tabular-nums} .acmlt-topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px;padding:12px 18px;background:var(--acmlt-soft);border:1px solid #d7edf4;border-radius:16px} .acmlt .acmlt-topics__h{font-size:14px;font-weight:700;color:var(--acmlt-navy);letter-spacing:.04em} .acmlt .acmlt-topics__list{display:flex;flex-wrap:wrap;gap:8px} .acmlt .acmlt-topics__list a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 14px 6px 12px;border:1px solid var(--acmlt-line2);border-radius:99px;background:#fff;color:var(--acmlt-navy);font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;transition:border-color .15s,color .15s} .acmlt .acmlt-topics__list a:hover{border-color:#54bddb;color:var(--acmlt-teal)} .acmlt-topics__list .acmlt-i{width:18px;height:18px;color:var(--acmlt-teal)} .acmlt-topics__list small{font-size:12px;font-weight:600;color:var(--acmlt-sub);font-variant-numeric:tabular-nums} .acmlt-card__th span.is-topic{background:#fff;border:1px solid var(--acmlt-line2);padding:0 8px} .acmlt-opts--cat .acmlt-opts__sub{margin-left:14px;border-left:1px solid var(--acmlt-line2)} .acmlt-opts--cat .acmlt-opts__sub button{min-height:36px;padding-left:14px;font-size:14px} .acmlt-opts button.is-parent{color:var(--acmlt-blue);font-weight:700} /* 一覧の絞り込み（PC・追従する左の列）：カテゴリと話題・切り口で縦に長くなったので、画面より高いときは列の中でスクロールする（下の「実施年」まで届くように）。 ページ全体の zoom（上の「ページ全体の拡大」：1320px以上 1.1／1380px以上 1.15）の中では 100vh が zoom 倍に伸びるので、同じ値で割る。zoom の値を変えたらここも変える */ .acmlt{--acmlt-zoom:1} @media (min-width:1320px){.acmlt{--acmlt-zoom:1.1}} @media (min-width:1380px){.acmlt{--acmlt-zoom:1.15}} @media (min-width:821px){ .acmlt-filter{max-height:calc(100vh / var(--acmlt-zoom) - var(--acmlt-top) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:-4px 0 0 -4px;padding-top:4px;padding-left:4px} /* 4px：ボタンのフォーカス枠が切れないように */ } @media (max-width:820px){ .acmlt-opts--cat .acmlt-opts__sub{margin-left:0;border-left:0} .acmlt-opts--cat .acmlt-opts__sub button{padding:6px 12px;font-size:13px;background:var(--acmlt-soft)} .acmlt-opts--cat .acmlt-opts__sub button::before{content:"›";color:var(--acmlt-sub);font-weight:700} .acmlt-opts button.is-parent{border-color:var(--acmlt-blue)} .acmlt-opts--cat > li:last-child{padding-right:0} /* 最後の子は親を選ぶまで隠れているので、右の余白は並びの後ろに付ける */ .acmlt-opts--cat::after{content:"";flex:0 0 24px} /* 横スクロールの行には、行の上に小さなグループ名を出す（「すべて」が3行並んでも区別できるように）。実施年はセレクト自身が「実施年：」と書くので出さない */ .acmlt-filter > .acmlt-fgroup:not(:last-child) .acmlt-flabel{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:0 0 4px 2px;font-size:12px;line-height:1.3} .acmlt-filter{row-gap:8px} } @media (max-width:600px){ .acmlt .acmlt-tile__subs{gap:5px;margin-top:-2px;padding:0 12px 12px} .acmlt .acmlt-tile__subs a{padding:2px 9px;font-size:12px} .acmlt-topics{gap:8px;padding:12px 14px} .acmlt .acmlt-topics__list{gap:6px} .acmlt .acmlt-topics__list a{min-height:38px;padding:5px 12px 5px 10px;font-size:13px} } /* 同じ調査の他の回への入口（2026-10-15。シリーズのページを廃止し、一覧の「シリーズ」絞り込みへ向ける）。カードの中の小さな文字リンク */ .acmlt-card__ser{margin:0;font-size:13px;line-height:1.6} .acmlt-card__ser a{color:var(--acmlt-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acmlt-line2)} .acmlt-card__ser a:hover{text-decoration-color:currentColor} /* ラボの移動行（マガジンの共通ヘッダーの直下・2026-10-16〜。acm-lab-common.php の acmlt_subnav()） 白地に紺の文字・下に細い線（固定ヘッダーの裏も白のまま＝マガジンの通常ページと同じ見え方）。上の余白（固定ヘッダーの高さ）は acmlt_maghead_css() が付ける */ .acmlt-subnav{background:#fff;color:var(--acmlt-navy);border-bottom:1px solid var(--acmlt-line)} .acmlt-subnav__in{display:flex;align-items:center;gap:20px;min-height:46px;overflow-x:auto;scrollbar-width:none;white-space:nowrap} .acmlt-subnav__in::-webkit-scrollbar{display:none} .acmlt-subnav a{color:var(--acmlt-navy);text-decoration:none} .acmlt-subnav__home{font-weight:800;font-size:15px;letter-spacing:.03em;padding:12px 0} .acmlt-subnav__list{display:flex;gap:4px;margin:0;padding:0;list-style:none} .acmlt-subnav__list a{display:block;font-size:14px;font-weight:600;padding:13px 10px 11px;border-bottom:2px solid transparent;color:var(--acmlt-sub)} .acmlt-subnav__list a:hover{color:var(--acmlt-navy)} .acmlt-subnav__list a[aria-current="page"]{color:var(--acmlt-navy);border-bottom-color:var(--acmlt-teal)} @media (max-width:640px){.acmlt-subnav__in{gap:12px}.acmlt-subnav__home{font-size:14px}.acmlt-subnav__list a{font-size:13.5px;padding-inline:8px}} @media print{.acmlt-subnav{display:none!important}}