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

/* ============================================================
   1. トークン
   ============================================================ */
:root{
  /* 夜にこっそり読むサイト。明るい公的な見た目にしない */
  --bg:#15101A;           /* 地。深い紫黒 */
  --bg-2:#1E1722;         /* 一段明るい面 */
  --surface:#251C2C;      /* カード */
  --surface-2:#2E2337;
  --ink:#EDE4EC;          /* 本文 */
  --ink-2:#B3A3B6;        /* 補助 */
  --ink-3:#8A7A8E;
  --pink:#F0568F;         /* 主色 */
  --pink-2:#FF7BAB;
  --pink-deep:#C43A6E;
  --pink-pale:#3A2030;    /* ピンク寄りの暗い面 */
  --em:#FF8FB4;           /* 強調文字。これ1色のみ */
  --line:#3A2E42;
  --radius:10px;
  --radius-s:6px;
  --wrap:1080px;
  --wrap-narrow:720px;
  --serif:"Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans:"Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* ============================================================
   2. リセット
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.95;
  letter-spacing:.012em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pink); text-decoration:none; }
a:hover{ color:var(--pink-2); }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; }

.lw-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.lw-wrap--narrow{ max-width:var(--wrap-narrow); }

.lw-skip{
  position:absolute; left:-9999px;
}
.lw-skip:focus{
  left:8px; top:8px; z-index:100; background:var(--pink); color:#fff;
  padding:.6em 1em; border-radius:6px;
}

/* ============================================================
   3. ヘッダー
   ============================================================ */
.lw-header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,16,26,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.lw-header__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 20px;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:1em;
}
.lw-logo{ display:flex; align-items:center; gap:.55em; color:var(--pink); }
.lw-logo__mark{ display:block; color:var(--pink); flex:0 0 auto; }
.lw-logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.lw-logo__sub{ font-size:11px; letter-spacing:.14em; color:var(--ink-2); }
.lw-logo__main{
  font-family:var(--serif); font-weight:700; font-size:19px;
  letter-spacing:.06em; color:var(--pink);
}

.lw-nav__list{ display:flex; gap:.2em; list-style:none; }
.lw-nav__list a{
  display:block; padding:.55em .85em; font-size:14.5px; font-weight:500;
  color:var(--ink); border-radius:999px;
}
.lw-nav__list a:hover{ background:var(--pink-pale); color:var(--pink); }

.lw-burger{ display:none; width:42px; height:42px; background:none; border:0; padding:9px; cursor:pointer; }
.lw-burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.25s; }

@media (max-width:860px){
  .lw-burger{ display:block; }
  .lw-nav{
    position:fixed; inset:64px 0 auto 0; background:var(--bg);
    border-bottom:1px solid var(--line); padding:.6em 20px 1.2em;
    transform:translateY(-130%); transition:transform .28s ease; z-index:40;
  }
  .lw-nav-open .lw-nav{ transform:translateY(0); }
  .lw-nav__list{ flex-direction:column; gap:0; }
  .lw-nav__list a{ padding:.85em .4em; border-radius:0; border-bottom:1px solid var(--line); }
  .lw-nav-open .lw-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .lw-nav-open .lw-burger span:nth-child(2){ opacity:0; }
  .lw-nav-open .lw-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   4. ヒーロー
   ============================================================ */
.lw-hero{
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(240,86,143,.30) 0%, transparent 60%),
    radial-gradient(90% 80% at 10% 110%, rgba(196,58,110,.18) 0%, transparent 62%),
    var(--bg-2);
  padding:clamp(2.8rem,7vw,5rem) 0 clamp(2.6rem,7vw,4.2rem);
  border-bottom:1px solid var(--line);
}
.lw-hero__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;
}
.lw-hero__eyebrow{
  font-size:13px; letter-spacing:.16em; color:var(--pink);
  font-weight:700; margin-bottom:1em;
}
.lw-hero__eyebrow::before{
  content:""; display:inline-block; width:24px; height:1px;
  background:var(--pink); vertical-align:middle; margin-right:.7em;
}
.lw-hero__title{
  color:var(--ink);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.72rem,5.4vw,2.7rem); line-height:1.5;
  letter-spacing:.02em; color:var(--ink); margin-bottom:.7em;
}
.lw-hero__lead{
  font-size:15.5px; line-height:2.05; color:var(--ink); max-width:34em;
}
.lw-hero__cta{ display:flex; flex-wrap:wrap; gap:.7em; margin-top:1.8em; }

.lw-btn{
  display:inline-block; padding:.85em 1.6em; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:.02em; transition:.2s;
}
.lw-btn--primary{ background:var(--pink); color:#1A1119; }
.lw-btn--primary:hover{ background:var(--pink-2); color:#1A1119; }
.lw-btn--ghost{ background:transparent; color:var(--pink); box-shadow:inset 0 0 0 1.5px var(--pink); }
.lw-btn--ghost:hover{ background:var(--pink); color:#1A1119; }

.lw-hero__figure{ display:flex; align-items:center; gap:1em; }
.lw-hero__figure img{ width:88px; height:88px; border-radius:50%; flex:0 0 auto; background:var(--surface); }
.lw-hero__balloon{
  position:relative; background:var(--surface); border-radius:12px;
  padding:.9em 1.1em; font-size:14px; line-height:1.8; color:var(--ink-2);
}
.lw-hero__balloon::before{
  content:""; position:absolute; left:-7px; top:26px;
  border:7px solid transparent; border-right-color:var(--surface); border-left:0;
}

@media (min-width:861px){
  .lw-hero__inner{ grid-template-columns:1.35fr .8fr; gap:3rem; }
  .lw-hero__figure{ flex-direction:column; text-align:center; }
  .lw-hero__figure img{ width:132px; height:132px; }
  .lw-hero__balloon::before{ left:50%; top:-7px; margin-left:-7px;
    border:7px solid transparent; border-bottom-color:var(--surface); border-top:0; }
}

/* ============================================================
   5. セクション
   ============================================================ */
.lw-section{ padding:clamp(2.4rem,6vw,4rem) 0; }
.lw-section--cats{ padding-top:clamp(1.8rem,4vw,2.6rem); padding-bottom:0; }
.lw-section--about{ background:var(--bg-2); }
.lw-section--rel{ background:var(--bg-2); }

/* 親テーマがインラインで h2{color:#fff} を出しているため、
   見出しの色は全て明示する */
.lw-sec-title{
  color:var(--ink);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.2rem,3.4vw,1.55rem); letter-spacing:.04em;
  margin-bottom:1.6em; text-align:center; position:relative;
}
.lw-sec-title span{ background:var(--bg); padding:0 1.2em; position:relative; z-index:1; }
.lw-sec-title::after{ background:var(--line); }
.lw-sec-title::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line);
}
.lw-section--rel .lw-sec-title span,
.lw-section--about .lw-sec-title span{ background:var(--bg-2); }
.lw-sec-title--page{ text-align:left; }
.lw-sec-title--page span{ padding-left:0; }

/* カテゴリ。カードにせず、番号付きの見出しリストとして並べる */
.lw-cats{ list-style:none; display:grid; gap:0; grid-template-columns:1fr; counter-reset:c; }
.lw-cats li{ counter-increment:c; border-bottom:1px solid var(--line); }
.lw-cats li:first-child{ border-top:1px solid var(--line); }
.lw-cats a{
  display:flex; align-items:baseline; gap:1em;
  padding:1.15em .2em; background:none; border-radius:0; box-shadow:none;
  transition:color .2s;
}
.lw-cats a::before{
  content:counter(c,decimal-leading-zero);
  font-family:var(--serif); font-size:12px; letter-spacing:.1em;
  color:var(--pink); flex:0 0 auto; padding-top:.35em;
}
.lw-cats a:hover{ transform:none; box-shadow:none; }
.lw-cats a:hover .lw-cats__name{ color:var(--pink-2); }
.lw-cats__body{ flex:1 1 auto; }
.lw-cats__name{
  display:block; font-family:var(--serif); font-weight:700; font-size:1.12rem;
  color:var(--ink); margin-bottom:.25em; transition:color .2s;
}
.lw-cats__desc{ display:block; font-size:13.5px; line-height:1.75; color:var(--ink-2); }
.lw-cats__count{ flex:0 0 auto; font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; }
@media (min-width:861px){ .lw-cats{ grid-template-columns:1fr; } }

/* ============================================================
   6. 記事カード
   ============================================================ */
.lw-cards{ display:grid; gap:1.2rem; }
.lw-cards--grid{ grid-template-columns:1fr; }
@media (min-width:640px){ .lw-cards--grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .lw-cards--grid{ grid-template-columns:repeat(3,1fr); } }
.lw-cards--lead{ margin-bottom:1.4rem; }

.lw-card{
  display:block; background:var(--surface); border-radius:var(--radius);
  overflow:hidden; transition:.22s; box-shadow:none;
}
.lw-card:hover{ background:var(--surface-2); }
.lw-card__img{ display:block; background:var(--bg-2); position:relative; }
.lw-card__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,16,26,0) 55%, rgba(21,16,26,.55) 100%);
}
.lw-card__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.lw-card__body{ display:block; padding:1.1em 1.25em 1.35em; }
.lw-chip{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--pink); background:var(--pink-pale); border-radius:999px;
  padding:.3em 1em; margin-bottom:.7em;
}
.lw-card__title{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:1.02rem; line-height:1.65; color:var(--ink); margin-bottom:.5em;
}
.lw-card__excerpt{ display:block; font-size:13.5px; line-height:1.85; color:var(--ink-2); }

/* 先頭の1枚は横並びで大きく */
@media (min-width:861px){
  .lw-card--lead{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
  .lw-card--lead .lw-card__img img{ height:100%; aspect-ratio:auto; }
  .lw-card--lead .lw-card__body{ padding:2em 2.2em; align-self:center; }
  .lw-card--lead .lw-card__title{ font-size:1.42rem; line-height:1.55; }
  .lw-card--lead .lw-card__excerpt{ font-size:14.5px; }
}

/* ============================================================
   7. このサイトについて
   ============================================================ */
.lw-about{
  background:var(--surface); border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.4rem); max-width:var(--wrap-narrow); margin:0 auto;
}
.lw-about__title{
  font-family:var(--serif); font-size:1.15rem; font-weight:700;
  color:var(--pink); margin-bottom:.8em;
}
.lw-about p{ font-size:14.5px; line-height:1.95; }
.lw-about__list{ list-style:none; margin:1.2em 0; }
.lw-about__list li{
  position:relative; padding-left:1.5em; margin-bottom:.55em;
  font-size:14.5px; line-height:1.85;
}
.lw-about__list li::before{
  content:""; position:absolute; left:.25em; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--pink);
}
.lw-about__more a{ font-weight:700; font-size:14.5px; }
.lw-about__more a::after{ content:" →"; }

/* ============================================================
   8. 記事ページ
   ============================================================ */
.lw-article__head{ padding:clamp(1.8rem,5vw,3rem) 0 1.2rem; }
.lw-article__title{
  color:var(--ink);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.5rem,4.6vw,2.15rem); line-height:1.55;
  letter-spacing:.015em; margin:.5em 0 .5em;
}
.lw-article__meta{ font-size:12.5px; color:var(--ink-3); letter-spacing:.04em; }
.lw-article__hero{ margin:0 0 1.8rem; border-radius:var(--radius); overflow:hidden; }
.lw-article--page .lw-article__title{ font-size:clamp(1.4rem,4vw,1.85rem); }

.lw-disclosure{
  font-size:12px; color:var(--ink-3); background:var(--bg-2);
  padding:.55em .9em; border-radius:6px; margin-bottom:1.8rem;
}

/* 目次 */
.lw-toc{
  background:var(--surface); border-radius:var(--radius);
  padding:1.3em 1.5em; margin:0 0 2.4rem;
  box-shadow:none;
}
.lw-toc__title{
  font-family:var(--serif); font-weight:700; font-size:1rem;
  color:var(--pink); margin-bottom:.6em;
}
.lw-toc ol{ list-style:none; counter-reset:toc; }
.lw-toc li{ counter-increment:toc; position:relative; padding-left:2em; margin-bottom:.45em; }
.lw-toc li::before{
  content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:0;
  font-size:11.5px; font-weight:700; color:var(--pink); letter-spacing:.04em;
}
.lw-toc a{ font-size:14.5px; line-height:1.7; color:var(--ink); }
.lw-toc a:hover{ color:var(--pink-2); }

/* ============================================================
   9. 本文
   ============================================================ */
.lw-body{ padding-bottom:3rem; }
.lw-body p{ margin:0 0 1.6em; }

.lw-body h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.2rem,3.6vw,1.5rem); line-height:1.55;
  color:var(--ink); margin:3.2em 0 1.2em; padding:0 0 .55em;
  border-bottom:2px solid var(--pink); scroll-margin-top:80px;
}
.lw-body h2::first-letter{ color:var(--pink); }
.lw-body h3{
  font-family:var(--serif); font-weight:700; font-size:1.12rem; line-height:1.6;
  margin:2.6em 0 .9em; padding-left:.7em; border-left:4px solid var(--pink);
}
.lw-body h4{ font-weight:700; font-size:1.02rem; color:var(--pink); margin:2em 0 .7em; }
.lw-body h3{ color:var(--ink); }
.lw-toc__title, .lw-box-title{ color:var(--pink); }

/* 強調は太字＋1色のみ。網掛けなし */
.lw-body strong,
.lw-body .lw-em{ font-weight:700; color:var(--em); background:none; }

.lw-body ul,.lw-body ol{ margin:1.5em 0; padding-left:0; list-style:none; }
.lw-body li{ position:relative; padding-left:1.6em; margin-bottom:.65em; line-height:1.9; }
.lw-body ul li::before{
  content:""; position:absolute; left:.35em; top:.78em;
  width:6px; height:6px; border-radius:50%; background:var(--pink);
}
.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); font-size:.95em;
}

/* テーブル。縞模様は付けない */
.lw-body table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:1.9em 0; font-size:14.5px; background:var(--surface);
  border-radius:var(--radius-s); overflow:hidden;
  box-shadow:none;
}
.lw-body th,.lw-body td{
  padding:.9em 1.05em; text-align:left; vertical-align:top; line-height:1.75;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.lw-body thead th{
  background:var(--pink-deep); color:#fff; font-weight:700; font-size:13.5px;
  letter-spacing:.03em; border-bottom:0;
}
.lw-body tbody th{ background:var(--pink-pale); color:var(--pink-2); font-weight:700; }
.lw-body tr:last-child th,.lw-body tr:last-child td{ border-bottom:0; }
.lw-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.9em 0; }
.lw-scroll table{ margin:0; min-width:540px; }

/* 枠。枠線と影は使わず背景色のみ */
.lw-box{
  background:var(--bg-2); border-radius:var(--radius);
  padding:1.4em 1.5em; margin:2em 0;
}
.lw-box > *:first-child{ margin-top:0; }
.lw-box > *:last-child{ margin-bottom:0; }
.lw-box-title{
  font-family:var(--serif); font-weight:700; font-size:1rem;
  color:var(--pink); margin:0 0 .7em;
}
.lw-box--point{ background:var(--pink-pale); }
.lw-box--warn{ background:var(--pink-pale); }
.lw-box--warn .lw-box-title{ color:var(--pink-2); }
.lw-toc-box{
  background:var(--pink-pale); border-radius:var(--radius);
  padding:1.4em 1.5em; margin:0 0 2.4em;
}
.lw-toc-box .lw-box-title{ margin-bottom:.6em; }
.lw-toc-box ul{ margin:0; }

/* キャラクターの吹き出し */
.lw-bubble{ display:flex; align-items:flex-start; gap:.85em; margin:2.2em 0; }
.lw-bubble-face{ flex:0 0 56px; text-align:center; }
.lw-bubble-face img{
  width:56px; height:56px; border-radius:50%; background:var(--bg-2);
}
.lw-bubble-name{ display:block; font-size:11px; color:var(--ink-3); margin-top:.3em; }
.lw-bubble-body{
  position:relative; flex:1 1 auto; background:var(--surface);
  border-radius:14px; padding:1em 1.2em; margin-top:.15em;
  box-shadow:none;
}
.lw-bubble-body::before{
  content:""; position:absolute; top:19px; left:-7px;
  border:7px solid transparent; border-right-color:var(--surface); border-left:0;
}
.lw-bubble-body p{ margin:0; font-size:14.5px; line-height:1.85; color:var(--ink); }

/* CTA */
.lw-cta{ margin:2.8em 0; text-align:center; }
.lw-cta a{
  display:inline-block; width:100%; max-width:440px;
  background:var(--pink); color:#1A1119 !important;
  font-weight:700; font-size:15.5px; line-height:1.5;
  padding:1.1em 1.5em; border-radius:999px;
  box-shadow:0 6px 20px rgba(240,86,143,.28); transition:.2s;
}
.lw-cta a:hover{ background:var(--pink-2); transform:translateY(-2px); }
.lw-cta-note{ font-size:12.5px; color:var(--ink-3); margin:.9em 0 0; line-height:1.7; }

/* 関連リンク */
.lw-related{
  background:var(--surface); border-radius:var(--radius-s);
  padding:1em 1.2em; margin:1.9em 0;
  box-shadow:none;
}
.lw-related a{ font-weight:700; font-size:14.5px; }
.lw-related a::before{ content:"▶ "; color:var(--pink); font-size:.8em; }

.lw-body img{ border-radius:var(--radius-s); margin:1.8em 0; }
.lw-body figcaption{ font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:.5em; }

/* ============================================================
   10. ページャー / フッター
   ============================================================ */
.lw-pager{ display:flex; justify-content:center; gap:.4em; margin-top:2.5rem; }
.lw-pager .page-numbers{
  display:block; padding:.5em .95em; border-radius:8px;
  background:var(--surface); font-size:14px; color:var(--ink);
}
.lw-pager .current{ background:var(--pink); color:#1A1119; }

.lw-footer{ background:var(--bg-2); color:var(--ink); padding:3rem 0 2rem; border-top:1px solid var(--line); }
.lw-footer__inner{ max-width:var(--wrap-narrow); margin:0 auto; padding:0 20px; text-align:center; }
.lw-footer__name{ color:var(--pink); font-family:var(--serif); font-weight:700; font-size:1.1rem; letter-spacing:.06em; margin-bottom:.8em; }
.lw-footer__text{ font-size:13px; line-height:1.9; color:var(--ink-2); margin-bottom:1.6em; }
.lw-footer__list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.3em 1.4em; margin-bottom:1.6em; }
.lw-footer__list a{ color:var(--ink); font-size:13.5px; }
.lw-footer__list a:hover{ color:var(--pink-2); }
.lw-footer__note{ font-size:11.5px; color:var(--ink-3); margin-bottom:.9em; }
.lw-footer__copy{ font-size:11.5px; color:var(--ink-3); }

/* キャラクター画像の枠。支給待ちのプレースホルダー用 */
.lw-avatar{
  background:var(--surface);
  border-radius:50%;
  object-fit:cover;
}
.lw-hero__figure img{ background:var(--surface); }
.lw-hero__balloon{ background:var(--surface); color:var(--ink-2); }
.lw-bubble-face img{ background:var(--surface); object-fit:cover; }

/* ============================================================
   親テーマがwp_headにインラインで出すスタイルの打ち消し
   body{background:#efefef;color:#333} / h2{color:#fff} などが
   外部CSSより後ろに出るため、ここだけ !important で勝たせる
   ============================================================ */
html, body{
  background:var(--bg) !important;
  color:var(--ink) !important;
}
.lw-sec-title, .lw-hero__title, .lw-article__title,
.lw-body h2, .lw-body h3, .lw-body h4,
.lw-cats__name, .lw-card__title, .lw-toc__title, .lw-box-title,
.lw-footer__name, .lw-about__title{
  background:none !important;
  border-radius:0 !important;
}
.lw-body h2{ color:var(--ink) !important; border-bottom:2px solid var(--pink) !important; }
.lw-body h3{ color:var(--ink) !important; border:0 !important; border-left:4px solid var(--pink) !important; }
.lw-body h4{ color:var(--pink-2) !important; border:0 !important; padding-left:0 !important; }
.lw-body h4::after{ content:none !important; }
.lw-sec-title{ color:var(--ink) !important; }
.lw-hero__title, .lw-article__title{ color:var(--ink) !important; }
.lw-cats__name, .lw-card__title{ color:var(--ink) !important; }
.lw-toc__title, .lw-box-title{ color:var(--pink-2) !important; }
.lw-footer__name{ color:var(--pink) !important; }
.lw-sec-title span{ background:var(--bg) !important; }
.lw-section--rel .lw-sec-title span{ background:var(--bg-2) !important; }

/* 親テーマのNEWリボン等が混ざらないように */
.newlabel, #page-top{ display:none !important; }