/* YsWorks 2026 — 共通部品（部品の形を1か所にまとめる表）
   色は palette.css の役割の名前だけを使う。数字の色は書かない。
   ページでは class="…" で呼び、その場だけの違い（余白・寄せ方など）だけを style に残す。 */

/* 文字の大きさと余白の目盛り（ページは数字を書かず、この名前で書く）
   --fs-*：文字の大きさ。--sp-N：余白（N×4px）。目盛りに無い数字は、その場の調整として残してよい。 */
:root{
  --fs-label:13px;   /* 英字の小見出し・バッジ・図の注 */
  --fs-small:14px;   /* 補足・パンくず */
  --fs-note:15px;    /* 表・補足の本文 */
  --fs-body:16px;    /* 本文（スマホでも下げない） */
  --fs-lg:20px;      /* カードの見出し */
  --fs-xl:22px;      /* 番号・小さめの見出し */
  --fs-price-sm:28px;
  --fs-price:32px;   /* 料金の数字 */
  --fs-h1:clamp(28px,4.6vw,44px);
  --fs-h1-sp:24px;   /* 400px 以下の h1 */
  --fs-h2:clamp(24px,3.2vw,32px);
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-14:56px;
  --sp-section:clamp(72px,9vw,120px);  /* セクションの上下 */
  --gutter:40px;     /* ページ左右の余白（PC） */
  --gutter-sp:22px;  /* ページ左右の余白（スマホ） */
}

/* ページの土台 */
.page{min-height:100vh;background:var(--c-bg);color:var(--c-text);font-family:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;font-size: var(--fs-body);line-height:1.95}
.page-head{background:var(--c-surface);padding:40px 0 56px}

/* 見出しまわり */
.eyebrow{margin:0;font-family:'Jost',sans-serif;font-weight:500;font-size: var(--fs-label);letter-spacing:0.2em;color:var(--c-label)}
.heading{margin:0;font-weight:700;line-height:1.5;letter-spacing:0.04em;color:var(--c-main)}
.title{margin:0;font-weight:700;line-height:1.55;letter-spacing:0.04em;color:var(--c-main)}
.card-title{margin:0;font-weight:700;font-size: var(--fs-lg);line-height:1.6;color:var(--c-main)}

/* 補足の文字 */
.note{margin:0;font-size: var(--fs-note);color:var(--c-text-soft)}
.small{margin:0;font-size: var(--fs-small);color:var(--c-text-soft)}

/* ボタン（相談ボタン＝btn-main は1画面に1〜2個まで） */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font-weight:700;text-decoration:none;border-radius:4px}
.btn-sm{min-height:48px;padding:0 24px}
.btn-main{background:var(--c-cta);color:var(--c-on-dark)}
.btn-sub{border:1.5px solid var(--c-main);background:var(--c-bg);color:var(--c-main)}
.btn-main:hover{background:var(--c-cta-hover)}
.btn-sub:hover{background:var(--c-tint)}
/* LINEへ誘導するボタン（LINEの緑。相談ボタンと同じ画面に並べない） */
.btn-chat{background:var(--c-chat);color:var(--c-on-chat)}
.btn-chat:hover{background:var(--c-chat-hover)}

/* タグ・バッジ */
.tag{padding:8px 22px;border-radius:999px;background:var(--c-bg);border:1px solid var(--c-line-strong)}
.tag-strong{background:var(--c-main);color:var(--c-on-dark);font-weight:700;border-color:var(--c-main)}
.badge{font-size: var(--fs-label);background:var(--c-label);color:var(--c-on-dark);border-radius:4px}

/* カード・番号つきの行 */
.card{background:var(--c-bg);border-radius:4px;padding:32px 28px;display:flex;flex-direction:column}
.num-item{display:flex;gap: var(--sp-5);padding:28px 0;border-bottom:1px solid var(--c-line)}
.num-mark{flex:0 0 auto;font-family:'Jost',sans-serif;font-weight:500;font-size: var(--fs-xl);color:var(--c-label);line-height:1.5}

/* 料金の数字 */
.price{margin:0;font-family:'Jost',sans-serif;font-weight:500;font-size:32px;line-height:1.3;letter-spacing:0.02em}
.price-unit{font-family:'Zen Kaku Gothic New',sans-serif;font-size: var(--fs-body);font-weight:700}

/* とても狭い画面（320px前後）では、「言葉のかたまり」の改行止めをゆるめて、横はみ出しを防ぐ */
@media (max-width:340px){.nw{white-space:normal!important}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-main);color:var(--c-on-dark);padding:12px 16px}
.skip:focus{left:8px;top:8px}