:root {
  --paper: #ffffff;
  --outside: #faeebe;
  --ink: #3b382d;
  --muted: #777268;
  --red: #d4113f;
  --orange: #ee8a00;
  --yellow: #f2b800;
  --green: #68aa15;
  --green-dark: #3c7e0a;
  --line: #eee7d2;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--outside);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.page-shell {
  width: 100%;
  padding: 0 0 44px;
}

.article {
  width: min(858px, 100%);
  margin: 0 auto;
  padding: 0 30px 44px;
  overflow: hidden;
  background: var(--paper);
}

.article-pr-label {
  min-height: 36px;
  padding: 10px 0 8px;
  color: #77736b;
  border-bottom: 1px solid #eee9dc;
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h2 {
  position: relative;
  margin: 26px 0 28px;
  padding: 14px 12px 14px 48px;
  color: var(--red);
  background: #fff;
  border-top: 2px dotted #f1a800;
  border-bottom: 2px dotted #f1a800;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 800;
}

h2::before {
  content: "i";
  position: absolute;
  top: 50%;
  left: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  color: #fff;
  background: #79b424;
  border-radius: 50%;
  font: 800 20px/1 Georgia, serif;
}

.article > section > p,
.article section > p:not(.rank-alert):not(.rank-lead):not(.yellow-marker):not(.scope-note) {
  margin: 22px 10px 16px;
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: .01em;
}

.agent-highlight {
  text-align: left;
}

.agent-highlight span {
  padding: 0 .12em;
  background: linear-gradient(transparent 57%, #fff17b 57%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 800;
}

strong { font-weight: 800; }
.red { color: var(--red); }

.story-figure {
  width: min(640px, 100%);
  margin: 9px auto 52px;
}

.story-figure .visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eee;
}

.story-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.story-figure img::selection { background: transparent; }

.tag,
.thought,
.visual-caption,
.visual-title,
.phone-label,
.split-left,
.split-right,
.compare-head,
.compare-foot,
.ranking-badge,
.ranking-title {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.22));
}

.tag {
  padding: .28em .62em;
  border: 2px solid #fff;
  border-radius: 6px;
  color: #fff;
  font-size: clamp(13px, 2.7vw, 21px);
  font-weight: 900;
  line-height: 1;
  transform: rotate(-3deg);
}

.tag-red { background: rgba(198, 25, 50, .92); }
.tag-dark { background: rgba(35, 32, 30, .88); }
.tag-blue { background: rgba(31, 108, 151, .92); }
.tag-good { background: rgba(65, 143, 17, .94); }
.tag-question { color: #402f1d; background: rgba(255, 239, 75, .96); border-color: #403223; }

.thought {
  padding: 15px 20px;
  color: #222;
  background: rgba(255,255,255,.96);
  border: 3px solid #333;
  border-radius: 50%;
  font-size: clamp(13px, 2.6vw, 20px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.thought::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -13px;
  width: 13px;
  height: 13px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
}

.pos-a { top: 6%; left: 4%; }
.pos-b { top: 7%; right: 5%; transform: rotate(3deg); }
.pos-c { bottom: 7%; left: 5%; transform: rotate(2deg); }
.pos-d { top: 26%; right: 5%; }
.pos-e { top: 6%; left: 3%; }
.pos-f { top: 6%; right: 3%; transform: rotate(2deg); }
.pos-g { bottom: 7%; left: 3%; transform: rotate(2deg); }
.pos-h { right: 3%; bottom: 7%; }
.pos-i { top: 12%; right: 7%; }
.pos-j { top: 6%; left: 5%; }
.pos-k { top: 6%; right: 5%; transform: rotate(3deg); }
.pos-l { right: 6%; bottom: 8%; }
.pos-m { top: 8%; left: 5%; }
.pos-n { top: 8%; right: 5%; transform: rotate(3deg); }
.pos-o { right: 8%; bottom: 8%; }
.pos-p { top: 7%; right: 5%; }
.pos-q { left: 4%; bottom: 7%; }
.pos-r { left: 34%; bottom: 7%; transform: rotate(1deg); }
.pos-s { right: 4%; bottom: 7%; transform: rotate(3deg); }

.thought-right { top: 9%; right: 5%; }
.thought-small { padding: 11px 16px; }

.phone-label {
  top: 23%;
  left: 10.7%;
  width: 25%;
  color: #26344b;
  font-size: clamp(11px, 2.5vw, 19px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  transform: rotate(-4deg);
}

.phone-label-wide {
  top: 13%;
  left: 9%;
  width: 31%;
}

.visual-caption,
.visual-title {
  left: 50%;
  width: max-content;
  max-width: 90%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(24,24,24,.86);
  border: 2px solid #fff;
  border-radius: 5px;
  padding: .4em .85em;
  font-size: clamp(14px, 3vw, 23px);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.visual-caption { bottom: 5%; }
.danger-caption { background: rgba(180, 20, 34, .92); }
.success-caption,
.success-title { background: rgba(58, 130, 17, .92); }
.title-top { top: 4%; }
.title-bottom { bottom: 4%; }
.dark-title { background: rgba(35,35,35,.9); }
.treasure-title { color: #542d00; background: rgba(255, 228, 72, .94); border-color: #7d4e00; }

.split-left,
.split-right {
  top: 5%;
  width: 43%;
  padding: .35em .5em;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(11px, 2.5vw, 19px);
  font-weight: 900;
  text-align: center;
}

.split-left { left: 4%; background: rgba(26, 130, 77, .9); }
.split-right { right: 4%; background: rgba(175, 29, 34, .9); }

.compare-head,
.compare-foot {
  width: 38%;
  padding: .3em .5em;
  text-align: center;
  font-weight: 900;
}

.compare-head {
  top: 5%;
  color: #fff;
  background: rgba(34, 111, 153, .94);
  border: 2px solid #fff;
  border-radius: 5px;
  font-size: clamp(14px, 2.7vw, 21px);
}

.compare-foot {
  bottom: 5%;
  color: #362500;
  background: rgba(255, 234, 80, .93);
  border: 2px solid #6d4a00;
  border-radius: 5px;
  font-size: clamp(10px, 2.2vw, 17px);
}

.compare-left { left: 5%; }
.compare-right { right: 5%; }

.ranking-figure { margin-bottom: 34px; }
.ranking-badge {
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  color: #fff;
  background: #c42039;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: .25em 1.2em;
  font-size: clamp(12px, 2.5vw, 19px);
  font-weight: 900;
}

.ranking-title {
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 86%;
  color: #4a2700;
  font-size: clamp(25px, 5.5vw, 47px);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: center;
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}

.ranking-title span { color: #d21136; font-size: 1.35em; }

.scope-note {
  margin: -8px 12px 24px !important;
  color: #746f66;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.rank-card {
  width: min(680px, 100%);
  margin: 0 auto 38px;
  padding: 17px 16px 22px;
  border: 3px solid #e6ba18;
  background: #fff;
  box-shadow: 0 2px 0 rgba(113,82,0,.08);
}

.rank-alert {
  margin: 0 0 12px;
  color: #d50b2f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.rank-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 9px;
}

.rank-medal {
  position: relative;
  display: flex;
  align-items: baseline;
  color: #c18e00;
  font-weight: 900;
  font-size: 20px;
}

.rank-medal span {
  position: absolute;
  top: -18px;
  left: 3px;
  color: #e7b400;
  font-size: 25px;
  transform: rotate(-7deg);
}

.rank-medal b { margin-right: 2px; font: 900 47px/1 Georgia, serif; }
.rank-medal.silver { color: #8e989d; }
.rank-medal.silver span { color: #aeb7bb; }
.rank-medal.bronze { color: #a96936; }
.rank-medal.bronze span { color: #bd7b45; }

.service-name {
  color: #0876c9;
  font-size: 25px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.score { margin-top: 4px; font-size: 16px; white-space: nowrap; }
.score span { color: #f19b00; letter-spacing: .08em; }
.score b { color: #ec7f00; }

.score .stars {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #f19b00 0 var(--fill), #d2d2d2 var(--fill) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.service-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.service-badges span {
  padding: 3px 8px;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.service-badges .area { background: #2f79bb; }
.service-badges .experienced { background: #318a68; }
.service-badges .beginner { background: #e88723; }

.rank-lead {
  margin: 0 0 8px;
  color: #77736b;
  font-size: 13px;
  text-align: center;
}

.yellow-marker {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 15px;
  padding: 0 5px;
  background: linear-gradient(transparent 55%, #fff17b 55%);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.service-creative {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(420px, 84%);
  min-height: 220px;
  margin: 0 auto 22px;
  overflow: hidden;
  color: #fff;
  border: 5px solid #fff;
  outline: 1px solid #d8d8d8;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.service-creative::before,
.service-creative::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}

.service-creative::before { width: 230px; height: 230px; top: -135px; right: -40px; }
.service-creative::after { width: 180px; height: 180px; bottom: -100px; left: -45px; }
.service-creative.pitaten { background: linear-gradient(135deg, #076eb4, #21a5c6); }
.service-creative.levjob { background: linear-gradient(135deg, #5430a9, #8368d8); }
.service-creative.sk-job { background: linear-gradient(135deg, #c76711, #efa52c); }

.service-creative span,
.service-creative strong,
.service-creative small { position: relative; z-index: 1; }

.service-creative span {
  margin-bottom: 8px;
  padding: 4px 14px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.service-creative strong {
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-shadow: 0 3px 0 rgba(0,0,0,.16);
}

.service-creative small { margin-top: 10px; font-size: 14px; font-weight: 700; }

.service-creative.has-image {
  width: min(520px, 92%);
  min-height: 0;
  background: #fff;
}

.service-creative.has-image::before,
.service-creative.has-image::after { display: none; }

.service-creative.has-image img {
  display: block;
  width: 100%;
  height: auto;
}

.rank-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 7px;
  color: #47443c;
  font-size: 20px;
  text-align: center;
}

.rank-card h3::before,
.rank-card h3::after { content: ""; flex: 1; height: 1px; background: #cac6bd; }

.point-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.point-list li {
  position: relative;
  padding: 10px 7px 10px 35px;
  color: #e47500;
  border-bottom: 1px dotted #c8c1b4;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.point-list li::before {
  content: "✓";
  position: absolute;
  left: 8px;
  top: 8px;
  color: #aaa9a2;
  font-size: 22px;
  font-weight: 900;
}

.green-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(560px, 96%);
  min-height: 76px;
  margin: 0 auto;
  padding: 11px 58px 10px 24px;
  color: #fff;
  background: linear-gradient(#acd73d, #6cad0c);
  border: 1px solid #5b9700;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 5px rgba(0,0,0,.2);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.green-button::after {
  content: "›";
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-54%);
  font: 300 48px/1 Arial, sans-serif;
}

.green-button span { font-size: 22px; font-weight: 900; }
.green-button small { margin-top: 2px; font-size: 11px; }
.green-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.green-button:focus-visible,
.service-name:focus-visible,
.service-creative:focus-visible { outline: 3px solid #146fc2; outline-offset: 3px; }

.final-cta { margin-top: 22px; }
.down-arrows { margin: -23px 0 16px; color: #ea8a00; font-size: 27px; font-weight: 900; line-height: .72; text-align: center; }

.editorial-note {
  width: min(680px, 100%);
  margin: 50px auto 24px;
  padding: 14px 16px;
  color: #706d66;
  background: #faf9f4;
  border: 1px solid #e7e2d4;
  font-size: 11px;
  line-height: 1.7;
}

.editorial-note p { margin: 4px 0; }
.editorial-note strong { color: #57544d; }
.editorial-note .updated { text-align: right; }

.article-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding: 16px 0 0;
  color: #817d75;
  border-top: 1px solid #eee9dc;
  font-size: 11px;
}

.article-footer a { text-decoration: underline; }
.article-footer small { flex-basis: 100%; text-align: center; }

.back-to-top {
  position: fixed;
  z-index: 20;
  right: 18px;
  bottom: 18px;
  display: none;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(60,60,60,.72);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.back-to-top.is-visible { display: block; }
.mobile-cta { display: none; }

/* privacy.html / terms.html */
.site-header { background: #fff; border-bottom: 1px solid #e5dfcf; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; }
.header-inner { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; }
.site-brand { display: flex; align-items: center; gap: 9px; color: #343029; font-weight: 900; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #e59a00; border-radius: 50%; }
.header-link { color: #666; font-size: 13px; }
.legal-page { min-height: calc(100vh - 140px); padding: 42px 0; background: #faf6e8; }
.legal-card { max-width: 800px; margin: 0 auto; padding: 28px 34px; background: #fff; border: 1px solid #e7dfca; }
.legal-card h1 { margin-top: 0; font-size: 28px; }
.legal-card h2 { margin: 28px 0 10px; padding: 0 0 8px; color: #443f35; border: 0; border-bottom: 2px solid #e3a11d; font-size: 19px; }
.legal-card h2::before { display: none; }
.legal-card p,
.legal-card li { font-size: 14px; line-height: 1.9; }
.site-footer { padding: 20px 0; color: #777; background: #fff; border-top: 1px solid #eee; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.copyright { color: #999; }

@media (max-width: 720px) {
  body { background: #fff; }
  .page-shell { padding-bottom: 64px; }
  .article { padding: 0 13px 36px; }
  .promo-bar { margin: 0 -13px 13px; padding: 9px 12px; font-size: 11px; }
  .site-kicker { margin-bottom: 12px; }
  h2 { margin: 22px 0 22px; padding: 12px 8px 12px 42px; font-size: 19px; }
  h2::before { left: 8px; width: 25px; height: 25px; font-size: 18px; }
  .article > section > p,
  .article section > p:not(.rank-alert):not(.rank-lead):not(.yellow-marker):not(.scope-note) { margin: 17px 5px 13px; font-size: 16px; line-height: 1.9; }
  .story-figure { margin-bottom: 38px; }
  .tag { border-width: 1px; border-radius: 4px; }
  .thought { padding: 8px 10px; border-width: 2px; }
  .thought::after { bottom: -9px; width: 9px; height: 9px; border-width: 2px; }
  .visual-caption,
  .visual-title { border-width: 1px; }
  .ranking-title { -webkit-text-stroke-width: 3px; }
  .rank-card { padding: 14px 10px 17px; border-width: 2px; }
  .rank-head { gap: 10px; }
  .rank-medal { font-size: 16px; }
  .rank-medal b { font-size: 39px; }
  .service-name { font-size: 21px; }
  .score { font-size: 13px; }
  .rank-lead { font-size: 11px; }
  .yellow-marker { width: auto; font-size: 14px; }
  .service-creative { width: 92%; min-height: 184px; }
  .service-creative strong { font-size: 33px; }
  .rank-card h3 { font-size: 17px; }
  .point-list li { font-size: 14px; }
  .green-button { width: 98%; min-height: 69px; padding-right: 45px; }
  .green-button span { font-size: 18px; }
  .green-button::after { right: 16px; font-size: 40px; }
  .back-to-top { right: 10px; bottom: 68px; width: 40px; height: 40px; }
  .mobile-cta {
    position: fixed;
    z-index: 19;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 15px 42px 15px 18px;
    color: #fff;
    background: linear-gradient(#9fd32b, #58a400);
    border-top: 1px solid #4b8d00;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .mobile-cta b { position: absolute; right: 18px; top: 50%; transform: translateY(-55%); font-size: 32px; }
  .mobile-cta.is-visible { transform: translateY(0); }
  .legal-card { padding: 22px 18px; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-cta { transition: none; }
}