@charset "UTF-8";
/* 装飾オブジェクト（inc/nozomi-pop.php が出力するマークアップ用）
   ドドルSVGと訪問イラスト。既存の線画と同じ語彙（黒の均一な輪郭・影なし）で揃える。 */

/* ── ドドル（見出し脇の小さな線画） ───────────────── */
.np-doodle{display:block;width:clamp(54px,5vw,72px);margin:0 0 14px;line-height:0}
.np-doodle svg{width:100%;height:auto;display:block;overflow:visible}
/* イラスト本体の輪郭（4〜5px @1774幅）に合わせた見え方にする */
.np-doodle svg>path,.np-doodle svg>rect{vector-effect:non-scaling-stroke}
.np-spark{opacity:.85}

/* 中央寄せの見出しの中では、ドドルも中央に */
.nh-casual .np-doodle,.nr-talk-head .np-doodle{margin-inline:auto}

/* ── 訪問イラスト（手を振る看護師） ────────────────── */
.np-visit{position:relative;display:block;margin:34px 0 0;
  width:min(300px,72%);isolation:isolate}
.np-visit img{position:relative;z-index:2;width:100%;height:auto;display:block}

/* 背後の淡い円。人物を面として立たせるためのもの。 */
.np-orbit{position:absolute;z-index:1;left:6%;top:8%;width:78%;aspect-ratio:1;
  border-radius:50%;background:var(--nh-blush);opacity:.75}


/* 紺地のセクションに置かれたとき（トップ下部のCTA帯など） */
.nh-contact .np-visit .np-orbit{background:#31465e;opacity:1}

@media(max-width:1080px){
  .np-visit{width:min(260px,64%)}
}
@media(max-width:700px){
  .np-doodle{width:52px;margin-bottom:12px}
  .np-visit{width:min(220px,62%);margin:26px auto 0}
}
@media(prefers-reduced-motion:reduce){
  .np-doodle,.np-visit{animation:none!important}
}

/* ══ ポップの語彙 ═══════════════════════════════════
   採用ページ（Broken Grid）にしか無かった「黄色＋傾いたカード＋ベタ影」を
   トップにも持ってくる。黄色は --nh-accent、影は --nh-pop-shadow に集約済み。
   料金表・重要事項説明書のページには当てない（行政が数字を確認する場所なので装飾しない）。 */

/* ── 数字カード（トップの採用帯） ───────────────── */
.nh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  margin:46px auto 0;padding:0;list-style:none}
.nh-stats li{background:var(--nh-surface);border:1.5px solid var(--nh-navy);
  border-radius:var(--nh-radius-md);padding:26px 22px;
  transform:rotate(var(--nh-rot,0deg));box-shadow:var(--nh-pop-shadow)}
/* 1枚ずつ傾きと高さをずらす。揃えるとカタログに見えるので、あえて崩す。 */
.nh-stats li:nth-child(1){--nh-rot:-1deg}
.nh-stats li:nth-child(2){--nh-rot:.8deg;margin-top:16px}
.nh-stats li:nth-child(3){--nh-rot:-.6deg}
.nh-stats li:nth-child(4){--nh-rot:1.1deg;margin-top:16px}
.nh-stats b{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(36px,3.6vw,52px);line-height:1;letter-spacing:-.02em;color:var(--nh-navy)}
.nh-stats small{font-size:.32em;font-weight:600;margin-left:.2em;letter-spacing:.02em}
.nh-stats span{display:block;margin-top:12px;font-size:13px;font-weight:700;line-height:1.7}

/* ── お知らせ：罫線の行 → カード ───────────────── */
.nh-news-list{display:grid;gap:12px}
.nh-news-list>a,.nh-news-list>a:first-child{
  border:1px solid var(--nh-line);border-radius:var(--nh-radius-sm);
  background:var(--nh-surface);padding:20px 24px;
  transition:transform var(--nh-fast),box-shadow var(--nh-fast),border-color var(--nh-fast)}
.nh-news-list>a:hover{border-color:var(--nh-navy);transform:translateY(-2px);box-shadow:var(--nh-pop-shadow)}
/* 日付は薄い黄色のピルに。紙の上で日付だけが拾いやすくなる。 */
.nh-news-list time{background:var(--nh-accent-soft);color:var(--nh-navy);
  padding:4px 11px;border-radius:999px;justify-self:start}

/* ── FAQ：罫線の行 → カード、Q. は黄色の丸 ──────── */
.nh-faq-list{display:grid;gap:12px}
.nh-faq-list>details{border:1px solid var(--nh-line)!important;
  border-radius:var(--nh-radius-sm)!important;background:var(--nh-surface)!important;
  transition:border-color var(--nh-fast)}
.nh-faq-list>details:hover{border-color:var(--nh-navy)!important}
.nh-faq-list summary{padding:19px 52px 19px 22px!important}
.nh-faq-list summary::before{content:"Q";display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--nh-accent);color:var(--nh-navy);
  font-size:13px;font-weight:700;margin-right:14px;vertical-align:-6px}
.nh-faq-list summary::after{right:22px;font-size:20px;color:var(--nh-rose)}
.nh-faq-list .nz-faqMini2__answer{padding:0 22px 22px 62px!important}

/* ── 主役のボタンにベタ影 ──────────────────────── */
.nozomi-design .nh-button--navy{box-shadow:var(--nh-pop-shadow)}
.nozomi-design .nh-button--navy:hover{transform:translateY(-2px);box-shadow:7px 8px 0 var(--nh-accent)}

/* ── 見出し脇のタグも面を持たせる ───────────────── */
.nh-tags span{border-color:var(--nh-navy);background:var(--nh-surface);font-weight:700}

@media(max-width:1080px){
  .nh-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .nh-stats li:nth-child(3){margin-top:16px}
  .nh-stats li:nth-child(2),.nh-stats li:nth-child(4){margin-top:0}
}
@media(max-width:700px){
  .nh-stats{gap:11px;margin-top:34px}
  .nh-stats li{padding:18px 15px}
  .nh-stats b{font-size:33px}
  .nh-stats span{font-size:12px;margin-top:9px}
  .nh-news-list>a,.nh-news-list>a:first-child{padding:17px 18px}
  .nh-faq-list summary{padding:16px 44px 16px 17px!important}
  .nh-faq-list .nz-faqMini2__answer{padding:0 17px 18px 17px!important}
  .nh-faq-list summary::before{width:23px;height:23px;font-size:12px;margin-right:11px;vertical-align:-5px}
}
@media(prefers-reduced-motion:reduce){
  .nh-stats li{transform:none}
  .nh-news-list>a:hover,.nozomi-design .nh-button--navy:hover{transform:none}
}