@charset "utf-8";
/*
  Theme Name: diver_child
  Template: diver
  Description: 女性のこっそりお仕事手帳
  Version: 3.0.0
*/

/* ============================================================
   1. トークン
   参照サイトの実測に合わせる。丸ゴシック / 本文14〜15px /
   数字は巨大 / 角丸は小さめ / 色帯で区切る
   ============================================================ */
:root{
  --pink:#FF2F7D;
  --cta:#5B2AC7;          /* CTA専用。ピンクと色相を真逆にして埋もれさせない */
  --cta-dark:#47209E;
  --pink-2:#FF949D;
  --pink-3:#FFC2D2;
  --pale:#FFF1F5;
  --pale-2:#FFE6EE;
  --ink:#2E2E2E;
  --ink-2:#6B6B6B;
  --ink-3:#9A9A9A;
  --line:#F0DCE3;
  --dark:#3A3A3A;
  --white:#fff;
  --r:6px;
  --wrap:1080px;
  --narrow:720px;
  /* 本文は端末標準。webフォントを本文に使うと日本語のサブセットが大量に落ちてくる */
  --font:"Hiragino Maru Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic Medium",Meiryo,sans-serif;
  /* 見出しとボタンだけ丸ゴシック。使う文字数が少ないので読み込みが軽い */
  --font-d:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
}

/* ============================================================
   2. ベース
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.85;
  letter-spacing:.01em; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pink); text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
b{ font-weight:700; }
.em{ color:var(--pink); font-weight:700; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.lw-skip{ position:absolute; left:-9999px; }

/* ============================================================
   3. ヘッダー
   ============================================================ */
.lw-header{
  position:sticky; top:0; z-index:50;
  background:var(--white); border-bottom:2px solid var(--pink);
}
.lw-header__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 16px;
  height:58px; display:flex; align-items:center; justify-content:space-between; gap:1em;
}
.lw-logo{ display:flex; align-items:center; gap:.5em; color:var(--pink); }
.lw-logo__mark{ color:var(--pink); flex:0 0 auto; }
.lw-logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.lw-logo__sub{ font-size:10px; letter-spacing:.1em; color:var(--ink-2); }
.lw-logo__main{ font-size:18px; font-weight:700; letter-spacing:.02em; color:var(--pink); }
.lw-nav__list{ display:flex; gap:.1em; }
.lw-nav__list a{ display:block; padding:.5em .8em; font-size:13px; font-weight:700; color:var(--ink); }
.lw-nav__list a:hover{ color:var(--pink); }
.lw-burger{ display:none; width:40px; height:40px; background:none; border:0; padding:9px; }
.lw-burger span{ display:block; height:2px; background:var(--pink); border-radius:2px; margin:5px 0; transition:.25s; }
@media (max-width:860px){
  .lw-burger{ display:block; }
  .lw-nav{ position:fixed; inset:58px 0 auto 0; background:var(--white);
    border-bottom:2px solid var(--pink); padding:.4em 16px 1em;
    transform:translateY(-140%); transition:transform .28s; z-index:40; }
  .lw-nav-open .lw-nav{ transform:translateY(0); }
  .lw-nav__list{ flex-direction:column; }
  .lw-nav__list a{ padding:.85em .2em; border-bottom:1px solid var(--line); }
}

/* ============================================================
   4. ヒーロー
   ============================================================ */
.hero{
  /* 背景に配信中の部屋の写真を敷き、その上からピンクのグラデを重ねる。
     写真は薄く透けるだけ。文字のコントラストを落とさないのが最優先。 */
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#FFDCE7 0%, #FFF1F5 100%);
  padding:22px 0 26px; text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url(https://www.lady-work.com/wp-content/uploads/2026/09/hero-bg.webp) center 38% / cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,220,231,.84) 0%, rgba(255,238,244,.90) 55%, rgba(255,241,245,.95) 100%);
}
.hero__in{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.hero__eyebrow{
  display:inline-block; font-size:12px; font-weight:700; color:var(--white);
  background:var(--pink); border-radius:999px; padding:.35em 1.2em; margin-bottom:.9em;
}
.hero__catch{
  font-size:clamp(27px,8vw,46px); font-weight:700; line-height:1.35;
  color:var(--ink); margin-bottom:.6em; letter-spacing:-.01em;
}
.hero__num{
  background:var(--white); border:3px solid var(--pink);
  border-radius:var(--r); padding:14px 16px 12px; margin:0 auto 16px; max-width:560px;
}
.hero__num-label{ font-size:13px; font-weight:700; color:var(--ink); }
.hero__num-label b{ color:var(--pink); }
.hero__num-main{
  font-size:clamp(62px,19vw,104px); font-weight:700; color:var(--pink);
  line-height:1.02; letter-spacing:-.03em; margin:.02em 0;
}
.hero__yen{ font-size:.34em; font-weight:700; }
.hero__num-note{ font-size:10.5px; color:var(--ink-3); line-height:1.55; }
.hero__cta{ display:flex; flex-direction:column; gap:8px; max-width:420px; margin:0 auto; }
.hero__free{ font-size:12px; color:var(--ink-2); margin-top:.7em; }
.hero__free b{ color:var(--pink); font-size:14px; }
@media (min-width:861px){
  .hero{ padding:36px 0 40px; }
  .hero__cta{ flex-direction:row; justify-content:center; max-width:none; }
  .hero__cta .btn{ min-width:260px; }
}

/* ボタン */
.btn{
  display:block; text-align:center; font-weight:700; font-size:16px;
  padding:.95em 1.2em; border-radius:var(--r); line-height:1.4;
}
.btn--main{ background:var(--cta); color:var(--white); box-shadow:0 3px 0 var(--cta-dark); }
.btn--main:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cta-dark); }
.btn--sub{ background:var(--white); color:var(--pink); box-shadow:0 3px 0 var(--pink-3); }
.btn--sub:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--pink-3); }

/* ============================================================
   5. 色帯
   ============================================================ */
.bar{
  display:flex; align-items:center; justify-content:center; gap:.8em;
  padding:.85em 16px; font-size:13px; font-weight:700;
}
.bar--dark{ background:var(--dark); color:var(--white); }
.bar i{ font-style:normal; opacity:.7; }

/* ============================================================
   6. セクション
   ============================================================ */
.sec{ padding:30px 0; }
.sec--pale{ background:var(--pale); }
.sec--num{ background:var(--pink); color:var(--white); }
.ttl{
  font-size:clamp(19px,5.2vw,26px); font-weight:700; line-height:1.4;
  text-align:center; margin-bottom:18px;
}
.ttl b{ color:var(--pink); font-size:1.24em; }
.ttl--white{ color:var(--white); }
.ttl--white b{ color:#FFE45C; }
.lead{ text-align:center; font-size:13.5px; color:var(--ink-2); margin-bottom:18px; }

.two{ display:grid; gap:14px; }
.two p{ font-size:14.5px; margin-bottom:.9em; }
.two img{ border-radius:var(--r); }
@media (min-width:861px){ .two{ grid-template-columns:1fr 1fr; align-items:center; gap:26px; } }

/* 3つの理由 */
.reason{ display:grid; gap:18px; }
.reason li{ text-align:center; }
.reason__img{ display:block; width:132px; height:132px; margin:0 auto 10px; }
.reason__img img{ width:132px; height:132px; border-radius:50%; object-fit:cover; }
.reason__t{ font-size:16px; font-weight:700; line-height:1.45; margin-bottom:.4em; }
.reason__t b{ color:var(--pink); }
.reason__d{ font-size:13px; color:var(--ink-2); line-height:1.75; }
@media (min-width:700px){ .reason{ grid-template-columns:repeat(3,1fr); gap:20px; } }

/* 数字比較 */
.cmp{ display:grid; gap:12px; }
.cmp li{ background:rgba(255,255,255,.15); border-radius:var(--r); padding:14px; text-align:center; }
.cmp--hi{ background:var(--white) !important; color:var(--ink); }
.cmp__label{ font-size:12.5px; font-weight:700; }
.cmp__val{ font-size:clamp(38px,11vw,58px); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.cmp--hi .cmp__val{ color:var(--pink); }
.cmp__val span{ font-size:.4em; }
.cmp__val small{ font-size:.3em; font-weight:700; margin-left:.2em; }
.cmp__note{ font-size:11px; opacity:.85; line-height:1.6; }
.cmp__warn{
  background:rgba(0,0,0,.16); border-radius:var(--r);
  padding:12px 14px; margin-top:14px; font-size:13px; line-height:1.8;
}
.cmp__warn b{ color:#FFE45C; }
@media (min-width:700px){ .cmp{ grid-template-columns:1fr 1fr; gap:16px; } }

/* 比較表 */
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.diff{ width:100%; min-width:480px; border-collapse:separate; border-spacing:0;
  border-radius:var(--r); overflow:hidden; font-size:14px; }
.diff th,.diff td{ padding:.8em .9em; text-align:left; border-bottom:1px solid var(--line); background:var(--white); }
.diff thead th{ background:var(--pink); color:var(--white); font-size:13px; font-weight:700; border-bottom:0; }
.diff thead th:first-child{ background:#E01F6B; }
.diff tbody th{ background:var(--pale); font-weight:700; width:8.5em; }
.diff td.ok{ color:var(--pink); font-weight:700; }
.diff tr:last-child th,.diff tr:last-child td{ border-bottom:0; }

/* 流れ */
.flow{ display:grid; gap:16px; counter-reset:f; }
.flow li{ counter-increment:f; background:var(--white); border-radius:var(--r); padding:14px; text-align:center; position:relative; }
.flow li::before{
  content:"STEP " counter(f); position:absolute; left:10px; top:10px;
  font-size:10.5px; font-weight:700; color:var(--white);
  background:var(--pink); border-radius:999px; padding:.25em .8em;
}
.flow__img{ display:block; width:104px; height:104px; margin:16px auto 10px; }
.flow__img img{ width:104px; height:104px; border-radius:50%; object-fit:cover; }
.flow__t{ font-size:16px; font-weight:700; margin-bottom:.3em; }
.flow__d{ font-size:13px; color:var(--ink-2); line-height:1.75; }
@media (min-width:700px){ .flow{ grid-template-columns:repeat(3,1fr); } }

.cta{ margin-top:20px; max-width:440px; margin-left:auto; margin-right:auto; }
.cta__note{ font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:.6em; }

/* ランキング */
.rank{ display:grid; gap:16px; }
.rank li{ background:var(--white); border:2px solid var(--line); border-radius:var(--r); padding:16px 14px; position:relative; }
.rank li.is-top{ border-color:var(--pink); }
.rank__no{
  position:absolute; left:-2px; top:-2px; width:34px; height:34px;
  background:var(--ink-3); color:var(--white); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r) 0 var(--r) 0;
}
.rank li.is-top .rank__no{ background:var(--pink); }
.rank__name{ font-size:19px; font-weight:700; margin:6px 0 .2em 38px; }
.rank__lead{ font-size:12.5px; color:var(--ink-2); margin:0 0 .8em 38px; }
.rank__for{ background:var(--pale); border-radius:var(--r); padding:.6em .8em; font-size:13px; margin-bottom:.8em; }
.rank__for b{ color:var(--pink); }
.rank__pt li{ border:0; background:none; padding:0 0 0 1.2em; position:relative; font-size:13px; line-height:1.75; margin-bottom:.25em; }
.rank__pt li::before{ content:""; position:absolute; left:.2em; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--pink-2); }
.rank .lw-cta{ margin:.9em 0 0; }
@media (min-width:900px){ .rank{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   7. 記事カード
   ============================================================ */
.cards,.lw-cards{ display:grid; gap:14px; }
@media (min-width:640px){ .cards,.lw-cards--grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards,.lw-cards--grid{ grid-template-columns:repeat(3,1fr); } }
.lw-card{ display:block; background:var(--white); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.lw-card:hover{ border-color:var(--pink-2); }
.lw-card__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.lw-card__body{ display:block; padding:12px 13px 14px; }
.lw-chip{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--white);
  background:var(--pink-2); border-radius:3px; padding:.25em .8em; margin-bottom:.5em; }
.lw-card__title{ display:block; font-size:15px; font-weight:700; line-height:1.55; color:var(--ink); margin-bottom:.4em; }
.lw-card__excerpt{ display:block; font-size:12.5px; color:var(--ink-2); line-height:1.7; }

/* ============================================================
   8. 記事ページ
   ============================================================ */
.lw-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.lw-wrap--narrow,.lw-wrap--hero{ max-width:var(--wrap); }
.lw-cols{ display:block; }
@media (min-width:1000px){
  /* align-items:start を外す。項目を縦に伸ばさないと sticky が動く余地を持たない */
  .lw-cols{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; }
}
.lw-article__head{ padding:20px 0 10px; }
.lw-article__title{ font-size:clamp(21px,5.4vw,30px); font-weight:700; line-height:1.5; margin:.4em 0 .35em; }
.lw-article__meta{ font-size:11.5px; color:var(--ink-3); }
.lw-article__hero{ margin:0 0 18px; border-radius:var(--r); overflow:hidden; }
.lw-disclosure{ font-size:11px; color:var(--ink-3); background:var(--pale); padding:.5em .8em; border-radius:4px; margin-bottom:18px; }

.lw-toc{ background:var(--pale); border-radius:var(--r); padding:14px 16px; margin:0 0 22px; }
.lw-toc__title{ font-size:15px; font-weight:700; color:var(--pink); margin-bottom:.5em; }
.lw-toc ol{ counter-reset:t; }
.lw-toc li{ counter-increment:t; position:relative; padding-left:1.9em; margin-bottom:.35em; }
.lw-toc li::before{ content:counter(t); position:absolute; left:0; top:0; font-size:11px; font-weight:700;
  color:var(--white); background:var(--pink-2); border-radius:3px; padding:.1em .45em; }
.lw-toc a{ font-size:13.5px; color:var(--ink); }

.lw-body{ padding-bottom:26px; font-size:15px; }
.lw-body p{ margin:0 0 1.4em; }
.lw-body h2{
  font-size:clamp(18px,4.8vw,22px); font-weight:700; line-height:1.5;
  color:var(--white); background:var(--pink); border-radius:var(--r);
  padding:.6em .8em; margin:2.4em 0 1em; scroll-margin-top:70px;
}
.lw-body h3{ font-size:17px; font-weight:700; margin:2em 0 .7em; padding:0 0 .35em; border-bottom:2px solid var(--pink-3); }
.lw-body h4{ font-size:15.5px; font-weight:700; color:var(--pink); margin:1.6em 0 .5em; }
.lw-body strong,.lw-body .lw-em{ font-weight:700; color:var(--pink); }
.lw-body ul,.lw-body ol{ margin:1.3em 0; }
.lw-body li{ position:relative; padding-left:1.4em; margin-bottom:.5em; line-height:1.8; }
.lw-body ul li::before{ content:""; position:absolute; left:.25em; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--pink-2); }
.lw-body ol{ counter-reset:n; }
.lw-body ol li{ counter-increment:n; }
.lw-body ol li::before{ content:counter(n) "."; position:absolute; left:0; top:0; font-weight:700; color:var(--pink); }
.lw-body table{ width:100%; min-width:0; border-collapse:separate; border-spacing:0; margin:1.5em 0;
  font-size:13.5px; border-radius:var(--r); overflow:hidden; }
.lw-body th,.lw-body td{ padding:.75em .85em; text-align:left; border-bottom:1px solid var(--line); background:var(--white); }
.lw-body thead th{
  /* h2の帯と同じピンクだと、見出しと表の頭が同じ色で見分けがつかない。
     表の頭は淡い面＋濃い文字にして、面の主張を落とす */
  background:var(--pale-2); color:var(--ink); font-weight:700;
  border-bottom:2px solid var(--pink-3);
}
.lw-body tbody th{ background:var(--pale); font-weight:700; }
.lw-scroll{ overflow-x:auto; margin:1.5em 0; }
.lw-scroll table{ min-width:460px; margin:0; }
.lw-box{ background:var(--pale); border-radius:var(--r); padding:14px 16px; margin:1.7em 0; }
.lw-box > *:first-child{ margin-top:0; } .lw-box > *:last-child{ margin-bottom:0; }
.lw-box-title{ font-size:15px; font-weight:700; color:var(--pink); margin:0 0 .5em; }
.lw-box--point{ background:var(--pale-2); }
.lw-box--warn{ background:#FFF6DA; }
.lw-box--warn .lw-box-title{ color:#C77A00; }
.lw-toc-box{ background:var(--pale-2); border-radius:var(--r); padding:14px 16px; margin:0 0 20px; }

.lw-bubble{ display:flex; align-items:flex-start; gap:.7em; margin:1.8em 0; }
.lw-bubble-face{ flex:0 0 52px; display:flex; flex-direction:column; align-items:center; line-height:1; }
.lw-bubble-face img{ width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; margin:0; }
.lw-bubble-face br{ display:none; }
.lw-bubble-name{ display:block; margin:.3em 0 0 !important; font-size:10.5px; color:var(--ink-3); white-space:nowrap; }
.lw-bubble-body{ position:relative; flex:1 1 auto; background:var(--pale); border-radius:10px; padding:.85em 1em; }
.lw-bubble-body::before{ content:""; position:absolute; top:17px; left:-6px;
  border:6px solid transparent; border-right-color:var(--pale); border-left:0; }
.lw-bubble-body p{ margin:0; font-size:13.5px; line-height:1.8; }

.lw-cta{ margin:2em 0; text-align:center; }
.lw-cta a{ display:inline-block; width:100%; max-width:420px; background:var(--cta); color:var(--white) !important;
  font-weight:700; font-size:16px; padding:1em 1.2em; border-radius:var(--r); box-shadow:0 3px 0 var(--cta-dark); }
.lw-cta a:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cta-dark); }
.lw-cta-note{ font-size:11.5px; color:var(--ink-3); margin:.6em 0 0; line-height:1.6; }
.lw-related{ background:var(--pale); border-radius:var(--r); padding:.85em 1em; margin:1.6em 0; }
.lw-related a{ font-weight:700; font-size:13.5px; }
.lw-related a::after{ content:" →"; }
.lw-body img{ border-radius:var(--r); margin:1.5em 0; }
.lw-endcta{ background:var(--pale-2); border-radius:var(--r); padding:16px; margin:0 0 26px; }
.lw-endcta__title{ font-size:16px; font-weight:700; margin-bottom:.5em; }
.lw-endcta__text{ font-size:13.5px; color:var(--ink-2); line-height:1.8; margin-bottom:1em; }
.lw-endcta .lw-cta{ margin:0; }

/* ============================================================
   9. サイドバー
   ============================================================ */
.lw-side{ margin-top:26px; }
@media (min-width:1000px){
  .lw-side{ margin-top:0; height:100%; }
  .lw-side__inner{ position:sticky; top:70px; }
}
.lw-side__block{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; margin-bottom:12px; }
.lw-side__title{ font-size:14px; font-weight:700; margin-bottom:.7em; padding-bottom:.4em; border-bottom:2px solid var(--pink-3); }
.lw-side__pickup{ background:var(--pale); border-color:var(--pink); }
.lw-side__label{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--white);
  background:var(--pink); border-radius:3px; padding:.2em .7em; margin-bottom:.5em; }
.lw-side__name{ font-size:17px; font-weight:700; margin-bottom:.25em; }
.lw-side__lead{ font-size:12px; color:var(--ink-2); line-height:1.7; margin-bottom:.7em; }
.lw-side__pickup .lw-cta{ margin:.6em 0 0; }
.lw-side__pickup .lw-cta a{ font-size:13.5px; padding:.75em 1em; }
.lw-side__pickup .lw-cta-note{ font-size:10.5px; margin-top:.4em; }
.lw-side__list a{ display:flex; justify-content:space-between; padding:.55em 0; font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--line); }
.lw-side__list li:last-child a{ border-bottom:0; }
.lw-side__list span{ font-size:11px; color:var(--ink-3); }
.lw-side__thumb{ flex:0 0 64px; }
.lw-side__thumb img{ width:64px; height:42px; object-fit:cover; border-radius:4px; }
.lw-side__ptitle{ font-size:12px; line-height:1.6; color:var(--ink); }

/* ============================================================
   10. フッター / ページャー
   ============================================================ */
.lw-pager{ display:flex; justify-content:center; gap:.35em; margin-top:24px; }
.lw-pager .page-numbers{ display:block; padding:.45em .9em; border-radius:4px; background:var(--pale); font-size:13.5px; color:var(--ink); }
.lw-pager .current{ background:var(--pink); color:var(--white); }
.lw-footer{
  /* 本文・サイドバーとの間に余白がないと、くっついて見える。
     サイドバーは sticky で下端がここに接するので、必ず間を空ける */
  background:var(--pale); padding:26px 0 20px; margin-top:56px;
  border-top:1px solid var(--line);
}
.lw-footer__inner{ max-width:var(--narrow); margin:0 auto; padding:0 16px; text-align:center; }
.lw-footer__name{ font-size:16px; font-weight:700; color:var(--pink); margin-bottom:.6em; }
.lw-footer__text{ font-size:12.5px; color:var(--ink-2); line-height:1.8; margin-bottom:1.2em; }
.lw-footer__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:.2em 1.2em; margin-bottom:1.2em; }
.lw-footer__list a{ color:var(--ink); font-size:12.5px; }
.lw-footer__note,.lw-footer__copy{ font-size:11px; color:var(--ink-3); }
.lw-footer__note{ margin-bottom:.6em; }

/* ============================================================
   11. 親テーマのインラインCSSの打ち消し
   ============================================================ */
html, body{ background:var(--white) !important; color:var(--ink) !important; }
.lw-body h2{ color:var(--white) !important; background:var(--pink) !important; border:0 !important; }
.lw-body h3{ color:var(--ink) !important; border:0 !important; border-bottom:2px solid var(--pink-3) !important; background:none !important; }
.lw-body h4{ color:var(--pink) !important; border:0 !important; background:none !important; padding-left:0 !important; }
.lw-body h4::after{ content:none !important; }
.ttl,.hero__catch,.lw-article__title,.lw-card__title,.rank__name,
.reason__t,.flow__t,.lw-side__title,.lw-endcta__title,.lw-toc__title,
.lw-box-title,.lw-footer__name,.hero__num-label,.cmp__label{
  background:none !important;
}
/* 親テーマの h2{color:#fff} を打ち消すため、見出しの色は全部明示する */
.ttl{ color:var(--ink) !important; }
.ttl--white{ color:var(--white) !important; }
.ttl b{ color:var(--pink) !important; }
.ttl--white b{ color:#FFE45C !important; }
.hero__catch{ color:var(--ink) !important; }
.lw-article__title,.lw-card__title,.rank__name,.reason__t,.flow__t{ color:var(--ink) !important; }
.reason__t b{ color:var(--pink) !important; }
.lw-toc__title,.lw-box-title,.lw-footer__name{ color:var(--pink) !important; }
.lw-side__title,.lw-endcta__title{ color:var(--ink) !important; }
.newlabel,#page-top{ display:none !important; }

/* ============================================================
   表をスマホ幅に収める
   横スクロールをやめ、文字と余白を詰めて画面内に入れる
   ============================================================ */
@media (max-width:700px){
  .scroll,.lw-scroll{ overflow-x:visible; }

  .diff,
  .scroll table,
  .lw-scroll table,
  .lw-body table{
    min-width:0;
    width:100%;
    table-layout:fixed;
    font-size:12px;
  }
  .diff th,.diff td,
  .lw-scroll table th,.lw-scroll table td,
  .lw-body table th,.lw-body table td{
    padding:.6em .45em;
    line-height:1.55;
    word-break:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  /* 見出し列は狭く固定し、値の列に幅を回す */
  .diff tbody th,
  .lw-body table tbody th{ width:5.6em; font-size:11.5px; }
  .diff thead th,
  .lw-body table thead th{ font-size:11.5px; padding:.6em .45em; }

  /* 列が多い表は文字をさらに詰める */
  .lw-body table.is-wide{ font-size:10.5px; }
  .lw-body table.is-wide th,
  .lw-body table.is-wide td{ padding:.5em .3em; }
  .lw-body table.is-wide tbody th{ width:4.6em; font-size:10px; }
}

/* DXLIVEの訴求ブロック */
.pick{
  background:var(--pale); border:3px solid var(--pink);
  border-radius:var(--r); padding:18px 16px 16px; max-width:620px; margin:0 auto;
}
.pick__badge{
  display:inline-block; font-size:12px; font-weight:700; color:var(--white);
  background:var(--pink); border-radius:999px; padding:.3em 1.1em; margin-bottom:.6em;
}
.pick__name{ font-size:clamp(24px,6.4vw,32px); font-weight:700; margin-bottom:.6em; }
.pick__pt{ margin-bottom:1.1em; }
.pick__pt li{ position:relative; padding-left:1.5em; font-size:14px; line-height:1.8; margin-bottom:.4em; }
.pick__pt li::before{
  content:""; position:absolute; left:.2em; top:.66em;
  width:7px; height:7px; border-radius:50%; background:var(--pink);
}
.pick__pt b{ color:var(--pink); }
.pick .lw-cta{ margin:0; }
.pick__more{ text-align:center; margin-top:.9em; }
.pick__more a{ font-size:12.5px; font-weight:700; }
.pick__more a::after{ content:" →"; }
.pick__name{ color:var(--ink) !important; background:none !important; }

/* 夜職との対比画像 */
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-bottom:16px; }
.vs__item{ margin:0; }
.vs__item img{ width:100%; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; }
.vs__item figcaption{ font-size:11.5px; line-height:1.6; text-align:center; margin-top:.5em; color:var(--ink-2); }
.vs__item figcaption b{ display:block; font-size:12.5px; color:var(--ink); margin-top:.2em; }
.vs__item--hi figcaption b{ color:var(--pink); }
.vs__mark{ font-size:13px; font-weight:700; color:var(--pink); }
.note{ font-size:11px; color:var(--ink-3); line-height:1.65; margin-top:.7em; margin-bottom:20px; }

/* 注意セクション */
.care{ display:grid; gap:12px; }
.care li{ background:var(--white); border-radius:var(--r); padding:14px 15px; }
.care__t{ font-size:16px; font-weight:700; color:var(--ink); margin-bottom:.4em; padding-left:1.5em; position:relative; }
.care__t::before{
  content:"!"; position:absolute; left:0; top:.12em;
  width:1.15em; height:1.15em; border-radius:50%;
  background:var(--pink); color:var(--white); font-size:.8em;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.care__d{ font-size:13.5px; line-height:1.8; color:var(--ink-2); margin-bottom:.7em; }
.care__link{ font-size:13px; font-weight:700; }
.care__link::after{ content:" →"; }
@media (min-width:900px){ .care{ grid-template-columns:repeat(3,1fr); } }

/* 公式バナー */
.pick__banner{ display:block; margin:0 0 1em; }
.pick__banner img{ width:100%; border-radius:4px; }
.care__t{ background:none !important; color:var(--ink) !important; }

/* 三拍子は画像を大きめの角丸で見せる */
.sec .reason__img img{ border-radius:var(--r); }
.reason__img{ width:100%; height:auto; }
.reason__img img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.reason__t{ font-size:17px; margin-top:.6em; }
.reason__t b{ color:var(--pink) !important; }

/* ヒーローの補足行。何のサイトかを最初に伝える */
.hero__sub{
  font-size:14px; font-weight:700; line-height:1.75;
  color:var(--ink); margin:-.2em 0 1em;
}

/* 表のあとの結論 */
.after-table{
  background:var(--pale); border-radius:var(--r);
  padding:12px 14px; margin-top:12px;
  font-size:13.5px; line-height:1.8;
}


/* サイドバーの人気記事ランキング */
.lw-side__rank{ counter-reset:sr; }
.lw-side__rank li{ counter-increment:sr; border-bottom:1px solid var(--line); }
.lw-side__rank li:last-child{ border-bottom:0; }
.lw-side__rank a{
  display:grid; grid-template-columns:22px 58px 1fr; gap:.5em;
  align-items:center; padding:.6em 0;
}
.lw-side__no{
  width:20px; height:20px; border-radius:3px;
  background:var(--ink-3); color:var(--white);
  font-size:11px; font-weight:700; line-height:20px; text-align:center;
}
.lw-side__rank li:nth-child(1) .lw-side__no{ background:var(--pink); }
.lw-side__rank li:nth-child(2) .lw-side__no{ background:var(--pink-2); }
.lw-side__rank li:nth-child(3) .lw-side__no{ background:var(--pink-3); color:var(--ink); }
.lw-side__thumb img{ width:58px; height:38px; object-fit:cover; border-radius:4px; display:block; }
.lw-side__ptitle{ font-size:12px; line-height:1.55; color:var(--ink); }
.lw-side__rank a:hover .lw-side__ptitle{ color:var(--pink); }


/* 記事ヘッダーを本文カラム内に入れたことによる調整 */
.lw-article__head{ padding:16px 0 4px; }
.lw-article__hero{ margin:0 0 16px; }

/* サイドバーを画面内に収める。はみ出すと下端が追従しない */
.lw-side__list{ display:flex; flex-wrap:wrap; gap:.35em; }
.lw-side__list li{ flex:0 0 auto; }
.lw-side__list a{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.35em .8em; border:0; border-radius:999px;
  background:var(--pale); font-size:12px; color:var(--ink);
}
.lw-side__list li:last-child a{ border-bottom:0; }
.lw-side__list a:hover{ background:var(--pink-pale); color:var(--pink); }
.lw-side__list span{ font-size:10.5px; color:var(--ink-3); }
@media (min-width:1000px){
  /* 画面より高いと下端が固定されないので上限を設ける */
  .lw-side__inner{ max-height:calc(100vh - 80px); overflow-y:auto; }
  .lw-side__inner::-webkit-scrollbar{ width:0; }
}


/* ============================================================
   サイドバー（簡素化後）
   ============================================================ */
.lw-side__cta{
  /* 中身は公式バナー1枚だけ。枠を足すと縦が伸びてサイドバーが収まらない */
  margin-bottom:12px; text-align:center;
}
.lw-side__cta-eyebrow{
  display:inline-block; background:var(--pink); color:var(--white);
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  border-radius:999px; padding:.25em 1em; margin-bottom:8px;
}
.lw-side__cta-name{ font-family:var(--font-d); font-size:17px; font-weight:700; line-height:1.2; }
.lw-side__cta-num{ font-family:var(--font-d); line-height:1; margin:2px 0 0; }
.lw-side__cta-num b{ font-size:40px; font-weight:700; color:var(--pink); letter-spacing:-.02em; }
.lw-side__cta-num span{ font-size:16px; font-weight:700; color:var(--pink); margin-left:.1em; }
.lw-side__cta-lead{ font-size:11px; color:var(--ink-3); margin:2px 0 10px; }
.lw-side__cta .lw-cta{ margin:0; }
.lw-side__cta .lw-cta a{ font-size:14.5px; padding:.95em 1em; }
.lw-side__cta .lw-cta-note{ display:none; }
.lw-side__cta-note{ font-size:11px; color:var(--ink-3); margin-top:7px; }

/* ============================================================
   トップページ：DXLIVEを推す理由
   ============================================================ */
.reason-no{
  font-size:15px; font-weight:700; color:var(--ink);
  background:var(--pale); border-radius:var(--r);
  padding:.7em .9em; margin:22px 0 12px;
}
.reason-tx{ font-size:14px; line-height:1.9; color:var(--ink); margin-bottom:8px; }

/* ============================================================
   トップページ：人気記事
   ============================================================ */
.pop{ counter-reset:pp; display:grid; gap:10px; max-width:760px; margin:0 auto; }
.pop li{ counter-increment:pp; }
.pop a{
  display:grid; grid-template-columns:30px 96px 1fr; gap:.8em;
  align-items:center; background:var(--white);
  border-radius:var(--r); padding:12px; transition:.2s;
}
.pop a:hover{ background:var(--surface-2, #FFF1F6); }
.pop__no{
  width:28px; height:28px; border-radius:50%;
  background:var(--ink-3); color:var(--white);
  font-size:14px; font-weight:700; line-height:28px; text-align:center;
}
.pop li:nth-child(1) .pop__no{ background:var(--pink); }
.pop li:nth-child(2) .pop__no{ background:var(--pink-2); }
.pop li:nth-child(3) .pop__no{ background:var(--pink-3); color:var(--ink); }
.pop__img img{ width:96px; height:64px; object-fit:cover; border-radius:5px; display:block; }
.pop__title{ display:block; font-size:14.5px; font-weight:700; line-height:1.55; color:var(--ink); }
.pop__desc{ display:block; font-size:12px; line-height:1.65; color:var(--ink-2); margin-top:.25em; }
@media (max-width:600px){
  .pop a{ grid-template-columns:26px 1fr; }
  .pop__img{ display:none; }
}

/* ============================================================
   トップページ：カテゴリ別
   ============================================================ */
.catblock{ margin-bottom:30px; }
.catblock__head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:2px solid var(--pink-3); padding-bottom:.5em; margin-bottom:14px;
}
.catblock__name{ font-size:17px; font-weight:700; color:var(--ink); }
.catblock__name span{ font-size:11.5px; color:var(--ink-3); margin-left:.5em; font-weight:400; }
.catblock__all{ font-size:12.5px; font-weight:700; color:var(--pink); white-space:nowrap; }
.catblock__all::after{ content:" →"; }
.catblock__name{ background:none !important; }


/* 表示用フォントの適用範囲。ここ以外は端末標準を使う */
.lw-logo__main,
.hero__catch, .hero__num-main, .hero__eyebrow,
.ttl, .catblock__name, .lw-sec-title,
.lw-article__title, .lw-card__title,
.pop__no, .pop__title, .lw-side__no, .lw-side__title,
.reason__t, .flow__t, .rank__name, .pick__name, .cmp__val,
.btn, .lw-cta a, .lw-box-title, .lw-toc__title,
.lw-body h2, .lw-body h3, .lw-body h4,
.lw-footer__name, .lw-side__name{
  font-family:var(--font-d);
}

/* パンくず */
.crumb{ font-size:12px; color:var(--ink-3); padding:14px 0 2px; }
.crumb a{ color:var(--ink-2); }
.crumb a:hover{ color:var(--pink); }
.crumb span{ margin:0 .4em; }

/* 関連記事の下のカテゴリ導線 */
.rel__all{ text-align:center; margin-top:18px; }
.rel__all a{ font-size:13.5px; font-weight:700; }
.rel__all a::after{ content:" →"; }

/* 本文中の自動内部リンク。読みの邪魔をしない程度に色を付ける */
.lw-body a.lw-ilink{
  color:var(--pink); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(255,47,125,.35);
}
.lw-body a.lw-ilink:hover{ border-bottom-color:var(--pink); }

/* トップ：DXLIVEの仕組み */
.mech-lead{ font-size:14px; line-height:1.9; margin:22px 0 10px; }
.diff--mech th{ font-size:12.5px; }
.mech-more{ text-align:center; margin-top:14px; }
.mech-more a{ font-size:13.5px; font-weight:700; }
.mech-more a::after{ content:" →"; }

/* DTIcash公式バナー */
.lw-bnr{ text-align:center; margin:0; }
.lw-bnr a{ display:inline-block; line-height:0; }
.lw-bnr img{ max-width:100%; height:auto; border:0; border-radius:var(--r); }
.lw-bnr--inline{ margin:2.2em 0; }
.lw-side__cta .lw-bnr{ margin:0; }
.lw-side__cta .lw-bnr img{ border-radius:4px; }

/* 記事検索 */
.lw-search{ display:flex; align-items:center; gap:0; position:relative; }
.lw-search__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lw-search__input{
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--white); border:2px solid var(--pink-3); border-right:0;
  border-radius:999px 0 0 999px; padding:.62em 0 .62em 1em; outline:none;
}
.lw-search__input::placeholder{ color:var(--ink-3); }
.lw-search__input:focus{ border-color:var(--pink); }
.lw-search__btn{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; align-self:stretch; color:var(--white); background:var(--pink);
  border:2px solid var(--pink); border-radius:0 999px 999px 0; cursor:pointer;
}
.lw-search__btn:active{ transform:translateY(1px); }
.lw-side__search{ margin-bottom:12px; }
.lw-nav__search{ display:none; }
.lw-search-wrap{ max-width:420px; margin:0 0 22px; }
.lw-noresult{ font-size:14.5px; line-height:1.9; margin-bottom:18px; }
.lw-catlinks{ display:flex; flex-wrap:wrap; gap:8px; }
.lw-catlinks a{
  display:inline-flex; align-items:center; gap:.4em; font-size:13px; font-weight:700;
  background:var(--pale); border:1px solid var(--pink-3); border-radius:999px; padding:.45em 1em;
}
.lw-catlinks a span{ font-size:11px; color:var(--ink-3); }
@media (max-width:999px){
  /* スマホはメニューを開いたときに検索も出す */
  .lw-nav__search{ display:block; padding:12px 16px 4px; }
}

/* トップの検索 */
.top-search{ max-width:420px; margin:0 auto 26px; }

/* クーポン枠。コードを大きく見せる */
.lw-coupon{
  background:var(--white); border:2px dashed var(--pink);
  border-radius:var(--r); padding:16px 14px 14px; margin:2em 0; text-align:center;
}
.lw-coupon__label{ font-size:12px; font-weight:700; color:var(--pink); margin-bottom:.5em; }
.lw-coupon__code{
  font-family:var(--font-d); font-size:clamp(24px,7vw,32px); font-weight:700;
  letter-spacing:.12em; color:var(--ink); line-height:1.2;
  background:var(--pale); border-radius:4px; padding:.35em .2em; margin-bottom:.6em;
  user-select:all;
}
.lw-coupon__desc{ font-size:13.5px; line-height:1.8; color:var(--ink); margin-bottom:.9em; text-align:left; }
.lw-coupon__btn{ margin-bottom:.6em; }
.lw-coupon__btn a{
  display:block; font-family:var(--font-d); font-size:15px; font-weight:700;
  color:var(--white); background:var(--cta); border-radius:999px;
  padding:.95em 1em; box-shadow:0 3px 0 var(--cta-dark);
}
.lw-coupon__btn a:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cta-dark); }
.lw-coupon__note{ font-size:11px; color:var(--ink-3); }

/* 始めるまでの5ステップ */
.step5{ display:grid; gap:10px; counter-reset:s5; margin-top:18px; }
.step5 li{ counter-increment:s5; }
.step5 li a{
  display:flex; align-items:center; gap:12px; position:relative;
  background:var(--white); border-radius:var(--r); padding:12px 14px 12px 12px;
}
.step5 li a::before{
  content:counter(s5); position:absolute; left:-6px; top:-6px;
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; font-family:var(--font-d); font-size:14px; font-weight:700;
  color:var(--white); background:var(--pink); border-radius:50%;
}
.step5__img{ flex:0 0 auto; width:68px; height:68px; }
.step5__img img{ width:68px; height:68px; border-radius:var(--r); object-fit:cover; }
.step5__body{ flex:1 1 auto; min-width:0; }
.step5__t{ display:block; font-family:var(--font-d); font-size:15.5px; font-weight:700; margin-bottom:.25em; }
.step5__d{ display:block; font-size:12.5px; color:var(--ink-2); line-height:1.7; }
.step5__more{
  display:inline-block; font-size:11px; font-weight:700; color:var(--pink); margin-top:.4em;
}
.step5__more::after{ content:" →"; }
@media (min-width:800px){
  /* 6項目なので2列×3行で割り切れる。1番だけ全幅にすると最後が半端に余る */
  .step5{ grid-template-columns:repeat(2,1fr); }
}