/* Illustrated everyday tools — second edition */
:root{--ink:#294352;--navy:#255879;--navy-deep:#255879;--red:#266d95;--muted:#657982;--silver:#758993;--bronze:#8b7850;--line:#d7e3e7;--line-light:#e9eff0;--paper-warm:#f0f7f9;--ok:#397456;--bad:#97562d;--serif:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans CJK JP','Yu Gothic',Meiryo,sans-serif}
body{color:var(--ink);background:#fff;letter-spacing:.015em}::selection{background:#f7e3a6;color:#294352}.container{max-width:1200px;width:calc(100% - 96px)}h1,h2,h3{letter-spacing:.025em}h2{border-bottom-color:#bed5df}.site-header{border-top:0}.masthead{min-height:96px;gap:23px}.logo{font-weight:800;font-size:1.55rem;color:#255879;letter-spacing:.015em}.logo-mark{font:700 .9375rem/1 var(--latin);letter-spacing:.035em;width:37px;height:42px;padding:0;color:#255879;background:#f6d885;border-radius:3px 9px 3px 3px;margin-right:11px}.brand-caption{font-size:.75rem;color:#78868c}.primary-nav{gap:24px}.primary-nav a{font-weight:500;color:#385b71}.primary-nav a:last-child{border:0;background:#eaf4f5;padding:7px 14px;border-radius:4px}.category-bar{border-color:#e3ebed}.category-nav{max-width:1000px}.category-nav a{font-size:.875rem;padding:12px 4px;color:#4d697a}.category-nav a+a{border:0}.category-nav a:hover{background:#f1f8fa;color:#15567e}.primary-nav a[aria-current],.category-nav a[aria-current]{color:#165e8a;text-decoration:underline;text-decoration-color:#efc75e;text-decoration-thickness:3px;text-underline-offset:8px}
.hero{grid-template-columns:.85fr 1.2fr;gap:20px;margin-top:28px;padding:30px 30px 23px 40px;background:#f1f8fa;border-radius:7px;min-height:360px}.hero-edition{font-size:.8125rem;color:#5a7789;line-height:1.8;margin-bottom:21px}.hero-edition span{display:block;color:#748793;font-size:.75rem;margin-top:3px}.hero h1{font-size:clamp(2rem,3.3vw,2.8rem);font-weight:750;line-height:1.65;margin:0 0 21px;letter-spacing:.04em;white-space:nowrap;color:#245b7e}.hero h1 span{color:inherit;text-decoration:underline;text-decoration-color:#f1ce6c;text-decoration-thickness:9px;text-underline-offset:-2px;text-decoration-skip-ink:none}.hero-lead{font-size:.9375rem;line-height:2;color:#587283;letter-spacing:.025em;max-width:29em}.mobile-break{display:none}.hero-link{font-size:.875rem;background:#fff;border:1px solid #c5dce7;border-radius:5px;gap:27px;padding:10px 17px;color:#2a6485;font-weight:600;line-height:1.6}.hero-link:hover{background:#e5f1f6}.hero-link span{font-size:1.125rem}.hero-art{align-self:center;min-width:0}.hero-art img{mix-blend-mode:multiply;object-fit:contain;aspect-ratio:3/2}.issue-line{border:0;padding:15px 4px 0;color:#6b828c;font-family:var(--gothic);letter-spacing:.04em;flex-wrap:wrap}.issue-line b{color:#2d6b8f;font-size:1.1rem}.issue-line>span:first-child{font-size:.875rem}.section-heading{margin-top:51px;margin-bottom:25px}.eyebrow{font-family:var(--gothic);font-size:.8125rem;letter-spacing:.06em;font-weight:500;color:#7b919c;margin-bottom:9px}.section-heading .eyebrow{margin-bottom:7px}.section-heading h2{font-size:1.9rem;font-weight:700;color:#2d5e79;letter-spacing:.05em}.section-heading>p{font-size:.875rem;max-width:25em;color:#70828b}.section-heading>a{color:#47728a;text-decoration:underline;text-decoration-color:#bdd6e2}
.genre-grid{border:0;gap:27px 26px;grid-template-columns:repeat(3,minmax(0,1fr))}.genre-card{border:1px solid #e0e9ed;border-radius:5px;padding:0;overflow:hidden;box-shadow:0 3px 0 #f1f6f8;display:flex;flex-direction:column;transition:border-color .2s}.genre-card:hover{border-color:#99bfce}.genre-art{display:block;background:#edf7fb;padding:10px 30px 0}.genre-image .genre-art{background:#f8f5e9}.genre-video .genre-art{background:#f5f0f7}.genre-transcription .genre-art{background:#edf6f3}.genre-writing .genre-art{background:#fcf1e9}.genre-coding .genre-art{background:#eff2fa}.genre-art img{width:100%;aspect-ratio:1.6;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}.genre-art:hover img{transform:translateY(-3px)}.genre-content{padding:18px 24px 19px;display:flex;flex-direction:column;flex:1}.genre-meta{font-size:.75rem;letter-spacing:.12em;color:#7e939f;order:0}.genre-meta>span:last-child{color:#6a8c9d}.genre-title{margin-top:9px;order:1}.genre-title h3{font-size:1.375rem;font-weight:700;color:#2a5e7e;letter-spacing:.04em}.genre-title>span{font-size:1.3rem;color:#81a5b7}.genre-tag{font-size:.875rem;order:2;margin-bottom:15px;color:#70818c}.ranking{order:3;flex:1;border-top:0}.ranking li{gap:12px;padding:10px 0;font-size:.875rem;min-height:45px;border-color:#edf1f2}.rank-index{border-radius:50%;color:#748d9a;background:#f0f5f7;width:23px;height:23px;flex:0 0 23px;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;align-self:flex-start;margin-top:1px}.ranking li:first-child .rank-index{background:#f7dfa1;color:#5a674e}.ranking li:first-child a{font-weight:600}.ranking a:hover{color:#1f7296}.genre-more{order:4;font-size:.875rem;color:#4e7d94;margin-top:16px}.cta-note{color:#788991;font-size:.8125rem}
.card-grid{grid-template-columns:1fr 1fr;gap:17px 28px;counter-reset:none}.card.illustrated-card{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;align-items:center;padding:18px 0;border-top:1px solid #e1eaee;border-bottom:0;counter-increment:none}.card::before{content:none}.card-art{display:block;min-width:0;background:#f0f7fa;border-radius:4px;overflow:hidden}.card-art img{mix-blend-mode:multiply;aspect-ratio:1.15;object-fit:contain;width:100%;padding:5px}.card-copy{display:block;min-width:0}.card h3{font-size:1.1rem;line-height:1.7;font-weight:650;letter-spacing:.01em;margin:0 0 8px;color:#345c73}.card .tagline{font-size:.875rem;line-height:1.85;color:#75838b;margin-bottom:10px}.card .meta{font-size:.8125rem;color:#54839b}.card:hover{background:transparent}.card:hover h3{text-decoration:underline;text-decoration-color:#b7d6e2;color:#236d92}.work-feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin:55px 0 50px;background:#f1f7f4;padding:35px 39px;border-radius:6px}.work-feature>figure img{mix-blend-mode:multiply;width:100%;aspect-ratio:1.2;object-fit:contain}.work-copy h2{font-size:1.9rem;line-height:1.6;font-weight:700;letter-spacing:.05em;color:#3b7167;border:0;padding:0;margin:0 0 18px}.work-copy>.eyebrow{color:#699386}.work-copy>p:not(.eyebrow){font-size:.875rem;color:#718780;line-height:1.9}.career-links{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;margin:20px 0}.career-links a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cbded6;text-decoration:none;padding:11px 0;font-size:.875rem;gap:10px;color:#3d7468}.text-link{font-size:.875rem;color:#3c756a;text-decoration-color:#a1c4b5}.table-wrap{border-top:2px solid #a7c8d8}.directory-count{font-size:.75rem;color:#7795a5}.num{color:#306b8c}.table-wrap th{background:#edf5f8;color:#47718a;border-bottom-color:#bad3df}.table-wrap td{border-bottom-color:#e5eef1}.sort-button::after{color:#7f9aa8}tbody tr:hover{background:#f6fafc}.mark-ok{color:#4b7d68}.art-row{display:grid;grid-template-columns:190px 1fr;gap:35px;align-items:center;max-width:none!important}.policy-art img{mix-blend-mode:multiply}.art-body{font-size:.9375rem;color:#6b7f89;max-width:800px}
.interior{max-width:1100px;padding-top:26px}.breadcrumb{margin-bottom:17px;color:#718d9b}.updated-badge{font-size:.8125rem;color:#82959e;margin:0 0 8px}.page-head{display:grid;grid-template-columns:1fr 290px;align-items:center;gap:25px;border-bottom:1px solid #dbe6ec;max-width:none;padding-bottom:22px;margin-bottom:25px;min-height:180px}.page-head h1{font-size:clamp(1.7rem,2.7vw,2.5rem);line-height:1.65;letter-spacing:.035em;font-weight:700;color:#2c6383}.page-illustration{min-width:0;background:#f3f8fa;border-radius:4px}.page-illustration img{width:100%;aspect-ratio:1.6;object-fit:contain;mix-blend-mode:multiply}.career .page-illustration{background:#f0f7f2}.usecase .page-illustration{background:#faf7ec}.interior h2{color:#3a6882;font-size:1.6rem;font-weight:650;border-bottom:1px solid #c8dce6}.answer-box{background:#f0f7fa;border-left:3px solid #82b8cb;border-radius:0 5px 5px 0}.answer-box .label{color:#488098}.rank-card.first{border-top:1px solid #c3dce5}.rank-card{border-bottom:1px solid #dce8ec}.rank-title{font-size:1.55rem!important;border:0!important}.medal{background:#eff5f7;color:#59829a;border-radius:50%;font-family:var(--latin);font-size:1rem}.medal.m1{background:#f6d986;color:#466379}.rank-badge{background:#eaf2f6;color:#658298;border-radius:3px}.rank-badge.r1{background:#f4da93;color:#4b6d7a}.rank-sub{color:#78909b}.cta{background:#3b7da0;border-color:#3b7da0;border-radius:4px;font-weight:600}.cta:hover{background:#2a6382;border-color:#2a6382}.cta.sub{color:#3c7899;border-color:#accbdc}.spec-list{border-color:#d9e7ed}.spec-list li{border-color:#e4eef2}.spec-list .k{color:#63849a}.pros,.cons{border-color:#c2d9e3}.pros h3{color:#4c816b}.cons h3{color:#8f7744}.faq{border-color:#b7d0dd}.faq summary::before{color:#5994b3}.faq summary::after{color:#87a9b9}.faq details{border-color:#dfebf0}.faq details p{color:#637f8f}.vs-verdict{background:#f1f8fa;border-top:2px solid #8ab5cc}.site-footer{background:#edf5f9;color:#668395;padding:42px 0 27px;margin-top:50px;font-size:.8125rem;border-top:1px solid #dfebf0}.site-footer a{color:#3f718b}.footer-brand{color:#356782;font-size:1.5rem;letter-spacing:.025em;margin-bottom:25px}.footer-brand small{font-family:var(--gothic);font-size:.75rem;letter-spacing:.06em;color:#829aa7}.byline{border-color:#cfdee7}.footer-links{column-gap:14px;row-gap:8px}.site-footer .container>p:last-child{color:#7d949f}.notice,.career-note{border-color:#9fbfaa;background:#f0f6f2}.draft-banner{border-color:#cabb8c;background:#fcf8eb}.draft-banner>strong{color:#877339}.badge.dead{color:#8d7142;background:#f7eed9}.fill{background:#f9edc9;color:#806933}.offer{border-color:#d1e2eb;border-radius:4px}.path-list li{border-top-color:#bcd6e2}.pname{color:#42748f}.step-list li::before{color:#6399b4}.shot .placeholder{background:#f0f6f8;border-color:#b8d2df}
@media(min-width:1600px){.hero{gap:25px;padding-block:40px}.hero h1{font-size:2.85rem}}
@media(max-width:1180px){.container{width:calc(100% - 64px)}.brand-caption{display:none}.hero{padding-left:28px;gap:12px}.hero h1{font-size:3.2vw}.hero-lead{font-size:.875rem}.genre-content{padding-inline:20px}.genre-art{padding-inline:18px}.work-feature{gap:28px;padding:30px}.card.illustrated-card{grid-template-columns:110px 1fr;gap:16px}.card h3{font-size:1rem}.primary-nav{gap:22px}}
@media(max-width:880px){.container{width:calc(100% - 48px)}.hero{padding:26px 24px}.hero h1{font-size:3.4vw;letter-spacing:.025em}.hero-edition{font-size:.75rem}.hero-lead{font-size:.875rem}.hero-link{font-size:.875rem}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.section-heading>p{max-width:220px}.card-grid{gap:13px 24px}.card.illustrated-card{grid-template-columns:88px 1fr;gap:14px}.work-feature{padding:26px;gap:25px}.work-copy h2{font-size:1.65rem}.career-links{grid-template-columns:1fr}.career-links a{padding-block:8px}.page-head{grid-template-columns:1fr 220px;gap:18px}.page-head h1{font-size:1.85rem}.art-row{grid-template-columns:150px 1fr}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.masthead{min-height:78px}.logo{font-size:1.3rem;letter-spacing:.015em}.logo-mark{width:32px;height:36px;margin-right:9px;font-size:.875rem}.menu-toggle{color:#48758d;font-size:.875rem}.primary-nav{gap:8px 18px}.primary-nav a{font-size:.875rem}.primary-nav a:last-child{padding:5px 8px}.category-nav a{font-size:.875rem;padding:10px 0}.category-nav a:nth-child(n+4){border-color:#e7eff2}.hero{grid-template-columns:1fr;gap:12px;margin-top:20px;padding:28px 24px 12px;min-height:0}.hero-edition{margin-bottom:15px;font-size:.75rem}.hero-edition span{display:inline;margin-left:8px;font-size:.75rem}.hero h1{font-size:clamp(1.55rem,6.5vw,2.75rem);letter-spacing:.035em;line-height:1.65;margin-bottom:16px}.hero-lead{font-size:.875rem;line-height:1.95;margin-bottom:17px}.hero-art{width:100%;max-width:540px;margin:auto}.hero-art img{aspect-ratio:1.65}.hero-link{padding:9px 13px;gap:24px}.issue-line{padding-top:13px;gap:6px;font-size:.75rem}.issue-line>span:first-child{font-size:.8125rem}.issue-line>span:nth-child(2){font-size:.75rem}.issue-line time{font-size:.75rem}.section-heading{margin-top:38px;margin-bottom:21px}.section-heading h2{font-size:1.6rem;letter-spacing:.025em}.section-heading>p{max-width:none;font-size:.875rem;margin-top:10px}.section-heading>a{font-size:.875rem}.genre-grid{gap:17px 12px}.genre-art{padding:7px 8px 0}.genre-art img{aspect-ratio:1.35}.genre-content{padding:13px 13px 15px}.genre-meta{font-size:.75rem;letter-spacing:.03em}.genre-meta>span:last-child{display:none}.genre-title{margin-top:8px;gap:3px;align-items:center}.genre-title h3{font-size:1.0625rem;letter-spacing:0}.genre-title>span{font-size:.95rem}.genre-tag{font-size:.8125rem;margin-bottom:10px}.ranking li{font-size:.875rem;gap:7px;padding:9px 0;line-height:1.7}.rank-index{font-size:.75rem;width:20px;height:20px;flex-basis:20px}.genre-more{font-size:.8125rem;gap:3px;margin-top:12px}.card-grid{grid-template-columns:1fr;gap:0;margin-bottom:25px}.card.illustrated-card{grid-template-columns:102px 1fr;gap:17px;padding:20px 0}.card h3{font-size:1rem;line-height:1.65}.card .tagline{font-size:.875rem;margin-bottom:8px}.card .meta{font-size:.8125rem}.work-feature{grid-template-columns:1fr;padding:23px;margin-block:37px;gap:15px}.work-feature>figure img{aspect-ratio:1.65;max-width:480px;margin:auto}.work-copy h2{font-size:1.7rem;line-height:1.55}.work-copy h2 br{display:none}.work-copy>p:not(.eyebrow){font-size:.875rem}.career-links{grid-template-columns:1fr 1fr;gap:0 15px}.career-links a{font-size:.8125rem;padding:10px 0;line-height:1.6}.work-copy .text-link{font-size:.875rem}.table-wrap{margin-top:17px}.table-wrap td,.table-wrap th{font-size:.875rem}.art-row{grid-template-columns:100px 1fr;gap:20px}.art-body{font-size:.875rem}.art-row .policy-art{align-self:start}.page-head{grid-template-columns:1fr 128px;gap:15px;min-height:0;padding-bottom:20px}.page-head h1{font-size:1.45rem;line-height:1.65;letter-spacing:.01em}.page-illustration img{aspect-ratio:1;object-fit:contain}.breadcrumb{font-size:.8125rem;margin-bottom:16px}.updated-badge{font-size:.75rem}.interior h2{font-size:1.35rem}.interior p{font-size:1rem}.interior .cta-note{font-size:.8125rem}.interior .rank-sub{font-size:.875rem}.interior .card .tagline{font-size:.875rem}.interior .card .meta{font-size:.8125rem}.answer-box{padding:20px 18px}.answer-box .label{font-size:.8125rem}.rank-title{font-size:1.25rem!important}.site-footer{padding-top:34px}.footer-brand{font-size:1.35rem}.footer-links{line-height:1.7}}
@media(max-width:420px){.genre-grid{grid-template-columns:1fr}.genre-art{padding:4px 30px 0}.genre-art img{aspect-ratio:1.9}.genre-content{padding-inline:22px}.genre-title h3{font-size:1.3rem}.genre-tag{font-size:.875rem}.genre-more{font-size:.875rem}.page-head{grid-template-columns:1fr 100px;gap:10px}.page-head h1{font-size:1.3rem}.hero-edition span{display:block;margin-left:0}.art-row{grid-template-columns:1fr}.policy-art{width:150px;margin:auto}}
@media(prefers-reduced-motion:reduce){.genre-art img,.genre-card{transition:none}}

/* ---- トップ: ジャンル別TOP3の一覧表 ---- */
.top3-summary{margin-bottom:8px}
.top3-table{min-width:660px}
.top3-table th[scope=row]{background:#f7fbfc;font-weight:650;white-space:nowrap;vertical-align:middle}
.top3-table th[scope=row] a{color:#2d5e79;text-decoration-color:#bad3df}
.top3-table td{vertical-align:middle;line-height:1.7}
.top3-table td a{color:#356c8c}
.rank-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-right:8px;border-radius:50%;background:#e7f1f6;color:#5b8299;font-size:.6875rem;font-weight:700;vertical-align:1px}
.top3-table tbody tr:first-child td .rank-num{background:#f1ce6c;color:#7a5a10}
.top3-table td:nth-child(2) .rank-num{background:#f1ce6c;color:#7a5a10}
.top3-table td:nth-child(3) .rank-num{background:#dfe8ec;color:#5c7583}
.top3-table td:nth-child(4) .rank-num{background:#ecdfd2;color:#87664a}
@media(max-width:760px){.top3-table{min-width:516px}.top3-table th[scope=col]{font-size:.75rem}.top3-table th[scope=row]{width:104px;white-space:normal;font-size:.8125rem;line-height:1.6;padding-right:8px}.top3-table td{font-size:.8125rem;padding-left:9px;padding-right:9px}.rank-num{width:17px;height:17px;margin-right:5px;font-size:.625rem}}

/* ---- 狭い画面では説明文の多い表を縦積みにする ---- */
@media(max-width:760px){
  .table-wrap:has(.stack-sm){overflow-x:visible}
  .stack-sm{min-width:0;width:100%;display:block}
  .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stack-sm tbody,.stack-sm tr,.stack-sm td{display:block;width:auto}
  .stack-sm tr{padding:15px 2px 17px;border-bottom:1px solid #e5eef1}
  .stack-sm tr:last-child{border-bottom:0}
  .stack-sm td{border:0;padding:0;max-width:none;line-height:1.9}
  .stack-sm tbody td:first-child{padding-left:0}
  .stack-sm td+td{margin-top:9px}
  .stack-sm td::before{content:attr(data-label);display:block;font-size:.6875rem;letter-spacing:.06em;color:#8aa2ad;margin-bottom:2px}
  .stack-sm td[data-label="ツール"],.stack-sm td[data-label="こういう場合"],.stack-sm td[data-label="業務"],.stack-sm td[data-label="サービス"],.stack-sm td[data-label="モデル"]{font-size:1rem;font-weight:650}
  .stack-sm td[data-label="ツール"]::before,.stack-sm td[data-label="こういう場合"]::before,.stack-sm td[data-label="業務"]::before,.stack-sm td[data-label="サービス"]::before,.stack-sm td[data-label="モデル"]::before{display:none}
  .stack-sm td[data-label="ツール"] a,.stack-sm td[data-label="サービス"] a{text-decoration:underline;text-decoration-color:#bad3df}
  .stack-sm tr:hover{background:transparent}
}

/* ---- 用途ラベルは円ではなくピル型に(日本語が円からはみ出すため) ---- */
.medal.role-chip{width:auto;height:auto;min-width:0;flex:0 0 auto;border-radius:999px;
  padding:6px 14px;font:600 .75rem/1.6 var(--gothic);letter-spacing:.02em;white-space:nowrap;align-self:center}
@media(max-width:760px){.medal.role-chip{padding:5px 11px;font-size:.6875rem}}

/* ---- 運営者メッセージ ---- */
.message-q{font-size:1.35rem;font-weight:700;color:#2c6383;letter-spacing:.03em;margin:8px 0 18px;padding-left:14px;border-left:4px solid #f1ce6c;line-height:1.7}
.message-sign{text-align:right;color:#63849a;font-size:.875rem;margin-top:26px}
.message-lead{font-size:1rem;line-height:2;color:#46606e}
.static-page h3{color:#2c6383;font-size:1.2rem;margin-top:38px}
#why{scroll-margin-top:24px}
@media(max-width:760px){.message-q{font-size:1.15rem}.message-lead{font-size:.9375rem}}

/* ---- 運営元の表記(さりげなく) ---- */
.site-footer .operated-by{margin:-14px 0 22px;font-size:.75rem;color:#829aa7;letter-spacing:.04em}
.site-footer .operated-by a{color:#4f7a92;text-decoration-color:#bcd3df}
.operated-by-note{font-size:.8125rem;color:#829aa7;margin-top:6px}
.operated-by-note a{color:#4f7a92;text-decoration-color:#bcd3df}

/* トップ: 更新頻度の告知 */
.hero-pace{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 14px;background:#fff;border:1px solid #c5dce7;border-left:5px solid #efc75e;border-radius:6px;max-width:34em;line-height:1.7}
.hero-pace strong{flex:none;font-size:1.0625rem;font-weight:800;color:#fff;background:#255879;padding:4px 11px;border-radius:4px;letter-spacing:.06em;white-space:nowrap}
.hero-pace span{font-size:.8125rem;color:#3f6378;font-weight:500}
@media(max-width:760px){.hero-pace{gap:10px;padding:9px 11px;margin-bottom:14px}.hero-pace strong{font-size:.9375rem;padding:3px 9px}.hero-pace span{font-size:.75rem}}