/* ════════════════════════════════════════════
   なみせん（波形区切り）+ 親しみスキン 共通CSS
   全下層ページで読み込む。index.html と同じ世界観。
   ════════════════════════════════════════════ */

/* フォーム要素はフォントを継承しない（ブラウザ既定値 Arial 対策） */
button,input,select,textarea{font-family:inherit}

/* 全体を90%表示に（index.html と統一） */
html{zoom:.9}

/* 遷移カーテン中はスクロールを即時に（smooth だと位置リセットがめくり後まで続く「見える滑り」になる） */
html.pv-on, html.pv-mark, html.pv-lift { scroll-behavior: auto !important; overflow-anchor: none; }

/* これ以下は横スクロールにしてレイアウト破綻を防ぐ（skin-v2.css と統一） */
html{min-width:320px}
body{min-width:320px}

/* 淡緑（--g25）セクションの上端に稜線ギザギザ（ルートページ skin-v2.css の .final-cta::before と同モチーフに統一） */
.sec-alt,.final-cta,.cta-sec,.news-sec{position:relative;border-top:none!important}
:is(section,div,header,main):has(+ .sec-alt,+ .final-cta,+ .cta-sec,+ .news-sec){border-bottom:none!important}
.sec-alt::before,.final-cta::before,.cta-sec::before,.news-sec::before{
  content:'';position:absolute;top:-2px;left:0;right:0;height:48px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,100% 20%,80% 64%,63% 28%,48% 76%,31% 38%,15% 68%,0 32%);
  pointer-events:none;z-index:3;
}

/* ページヒーロー（淡緑）の下端：稜線ギザギザで次セクションへつなぐ（上記の上下反転） */
.page-hero{position:relative;border-bottom:none!important}
.page-hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:48px;
  background:#fff;
  clip-path:polygon(0 100%,100% 100%,100% 80%,80% 36%,63% 72%,48% 24%,31% 62%,15% 32%,0 68%);
  pointer-events:none;z-index:3;
}

/* 強調部分のマーカー（index と同じ描画演出・CSSのみ） */
.sec-h strong,.page-hero h1 strong{
  background-image:linear-gradient(0deg,var(--g100,#D6EBDD),var(--g100,#D6EBDD));
  background-repeat:no-repeat;
  background-size:100% 40%;
  background-position:0 88%;
}
@keyframes mk-draw{from{background-size:0% 40%}to{background-size:100% 40%}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sec-h strong{
      animation:mk-draw 1.9s cubic-bezier(.45,.05,.35,.95) both;
      animation-timeline:view();
      animation-range:entry 60% cover 55%;
    }
  }
}
@media print{.sec-h strong,.page-hero h1 strong{animation:none;background-size:100% 40%}}

/* 緑の強調フレーズ（マーカー部分）は途中で改行しない */
.sec-h strong,.page-hero h1 strong{white-space:nowrap}
/* nowrapでも收まるようモバイルの見出しサイズを補正 */
@media(max-width:640px){
  .page-hero h1{font-size:clamp(24px,6.6vw,30px)}
  .sec-h{font-size:clamp(20px,5.6vw,25px)}
}

/* やわらかい角丸・ホバー（index と統一） */
.faq-item,.line-cell,.dl-card,.post-card,.art-card{border-radius:12px}

/* 右下CTA：呼吸するハロー（全ページ共通のライブ演出） */
.fl-primary{position:relative}
.fl-primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid rgba(0,160,64,.55);opacity:0;pointer-events:none;
  animation:flHalo 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.fl-primary:hover::after{animation-play-state:paused;opacity:0}
@keyframes flHalo{
  0%,58%{opacity:0;transform:scale(1)}
  64%{opacity:.8;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.12,1.3)}
}
@media(prefers-reduced-motion:reduce){.fl-primary::after{animation:none;opacity:0}}


/* ═══ 2026-07 大画面プレゼンス層（全下層共通）… 1559px以下の見え方は変えない ═══ */
/* ブログ記事（article.post）は本文の読みやすい行長（--max:760px）を維持するため除外 */
@media(min-width:1560px){
  :root:not(:has(article.post)){--max:1240px}
}
@media(min-width:1900px){
  :root:not(:has(article.post)){--max:1320px}
}
/* 27インチ級：さらに一段拡大（index.html と同じ値。下層は svh 補正がないのでこれだけでよい） */
@media(min-width:2000px){
  html{zoom:1.15}
}


/* ── ryosen-palette-bridge（2026-07-12）──
   uploads配下（service-*・case-*・contact）の配色をルート20ページの新デザイン
   「稜線」パレットに揃える。旧トークン名の値だけを差し替える（レイアウト・フォント不変）。
   wave-skin.css は service.css の後に読まれるため、この再定義が有効になる。 */
:root{
  --g900:#0B2A1F;--g800:#123F30;--g700:#123F30;--g600:#1C5842;--g500:#2E9E63;
  --g400:#57B07F;--g300:#8FCBA8;--g200:#BFE0CD;--g100:#DCEEE3;--g50:#EDF6F0;--g25:#F6FAF7;
  --ink:#1E2721;--ink2:#37423B;--ink3:#5D6962;--ink4:#68736C;/* 注釈・メタ。skin-v2.css と同値（4.5:1 確保） */
}

/* 日本語の行末処理。uploads配下はskin-v2.cssを読まないため、同じ規則をここにも置く。
   iPhone（WebKit）で句読点だけが次の行に落ちる「泣き別れ」の対策。Chromiumは未対応で無害。 */
h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote, td, th { hanging-punctuation: allow-end; }
/* 本文も文節で折る。ルート系（skin-v2.css）と同じ規則をここにも置く。 */
/* 文節が器より長いときの逃げ道。auto-phrase だけだと折り返せずに溢れる
   （320pxのブログ本文で長い固有名詞が20pxはみ出した）。
   break-word は min-content を変えないので、桁組みには影響しない。 */
p, li, dd, dt, figcaption, blockquote, summary { text-wrap: pretty; word-break: auto-phrase; overflow-wrap: break-word; }
/* 本文中のリンクは文節改行の対象から外す。出典名や制度名は一つの長い文節に
   なりやすく、器より長いと折り返せずに溢れる（320pxのブログ本文で20px実測）。 */
p a, li a, dd a { word-break: normal; }
/* 表のセルは文節改行の対象から外す。列が狭いと文節が丸ごと入りきらず、
   折り返せずにセルからはみ出す（uploads/case-*.html の360px幅で実測23〜62px）。 */
td, th { text-wrap: pretty; }
.sec-h, h3, h4, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, h5 { word-break: auto-phrase; }

/* ── iPhone（Safari）の改行 ───────────────────────────────────────────
   auto-phrase は Chromium にしか無く、Safari/Firefox では normal に解決される。
   そこで scripts/sync-phrase-breaks.mjs が文節の切れ目へ <wbr> を置き、
   ここで「文節以外では折らない」を足して、どのブラウザでも同じ位置で折る。
   逃げ道は overflow-wrap:break-word にする。anywhere は min-content 幅を
   1文字まで下げてしまい、flex/grid の列がその幅まで潰れる
   （ブログのliで、右の説明が2文字ずつの縦書きのようになった実測がある）。

   auto-phrase が使えるブラウザ（Chromium系）では当てない。keep-all は
   逆に min-content 幅を最長の文節まで押し上げるので、列組みが
   数px～15px広がる（support.html の320pxで実測）。
   auto-phrase が効くなら、そちらのほうが副作用が無い。
   印の無い要素は今までどおり auto-phrase のまま。 */
@supports not (word-break: auto-phrase) {
  h1:has(wbr), h2:has(wbr), h3:has(wbr), h4:has(wbr), h5:has(wbr),
  p:has(wbr), li:has(wbr), dd:has(wbr), dt:has(wbr),
  figcaption:has(wbr), blockquote:has(wbr), summary:has(wbr),
  .tp-title:has(wbr), .rp-title:has(wbr), .jk-guide-n:has(wbr) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
.footer-ul a[href^="mailto:"], .footer-ul a[href^="tel:"],
.footer-contact a, address a { word-break: keep-all; overflow-wrap: anywhere; }

/* 専門用語ツールチップ（uploads配下もルートページと同じUIにする） */
.term{color:var(--g800);font-weight:700;border-bottom:1.5px dashed var(--g500);cursor:help;padding-bottom:1px}
/* バッジ背景は skin-v2.css の --moegi-t と同値。白文字で4.5:1を確保し、
   ルート系・blog系と同じ見た目にそろえる（--g500 は装飾用で3.394しかない）。 */
.term::after{content:'?';display:inline-flex;width:13px;height:13px;align-items:center;justify-content:center;margin-left:3px;border-radius:50%;background:#1E7A4B;color:#fff;font-size:8.5px;font-weight:700;line-height:1;vertical-align:2px}
.term:focus-visible{outline:2px solid var(--g500);outline-offset:3px;border-radius:3px}
.term-pop{position:fixed;left:0;top:0;z-index:10020;width:min(288px,calc(100vw - 24px));padding:13px 15px;border-radius:11px;background:var(--g800);color:#fff;box-shadow:0 16px 34px -12px rgba(11,42,31,.5);font-size:12px;font-weight:400;letter-spacing:.01em;line-height:1.85;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .22s var(--ease,cubic-bezier(.22,1,.36,1)),transform .22s var(--ease,cubic-bezier(.22,1,.36,1))}
.term-pop[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.term-pop::after{content:'';position:absolute;left:var(--term-arrow-x,50%);border:7px solid transparent;transform:translateX(-50%)}
.term-pop[data-side="bottom"]::after{bottom:100%;border-bottom-color:var(--g800)}
.term-pop[data-side="top"]::after{top:100%;border-top-color:var(--g800)}
.term-pop b{display:block;margin-bottom:4px;color:var(--g300);font-family:var(--serif,inherit);font-size:13px;font-weight:700;letter-spacing:.03em}
@media(prefers-reduced-motion:reduce){.term-pop{transition:none}}