/* ひとつくりえいしょん ホームページ（ピンクグラデーション版）
   2026-10-09 ユーザーが採用したデザイン（デザイン見本の「見本1 ピンク」）。
   今のホームページ（資料デザイン版）の style.css の上に、このファイルを重ねて見た目を変える。文言は同じ。
   考え方：枠の線をなくし、淡い色がゆっくり移り変わる背景と、白くて薄い影の面で見せる。角は大きく丸く、ボタンは丸い形。
   色は今のパターンと同じ（既存向け＝ピンク、立ち上げ向け＝ミント、人材育成＝ペリウィンクル、無料＝黄色、サービスごとの色もそのまま）。 */

/* ===== 色（ページごとの基調。--g1〜--g3 は色の移り変わりに使う3色、--ga は小さな飾りの相手の色、--sh は影の色） ===== */
body.grad {
  --c: #F58CA6; --c-ink: #E35B80; --c-soft: #FFEAF0; --c-tint: #FFD9E3;
  --pink: #F58CA6; --pink-ink: #E35B80; --pink-soft: #FFEAF0; --pink-tint: #FFD9E3;
  --mint: #4CC7B3; --mint-ink: #1FA08C; --mint-soft: #E2F8F3; --mint-tint: #C6F0E7;
  --line: #F6E6EB; --line-strong: #EED6DE; --paper: transparent;
  --g1: #FFD3DF; --g2: #FFE6EC; --g3: #FFEFC8; --ga: #FFA35C; --sh: 200,90,120;
  background:
    radial-gradient(900px 620px at 88% 0%, #FFE1EA 0%, rgba(255,225,234,0) 62%),
    radial-gradient(820px 640px at -8% 22%, #DDF6F0 0%, rgba(221,246,240,0) 62%),
    radial-gradient(900px 700px at 104% 46%, #FFF1D2 0%, rgba(255,241,210,0) 60%),
    radial-gradient(900px 700px at -6% 70%, #FFE1EA 0%, rgba(255,225,234,0) 60%),
    radial-gradient(900px 700px at 100% 96%, #DDF6F0 0%, rgba(221,246,240,0) 60%),
    #FFFDFD;
  background-repeat: no-repeat;
}
/* 立ち上げる方へ：ミントが主役 */
body.grad.t-start {
  --c: #4CC7B3; --c-ink: #1FA08C; --c-soft: #E2F8F3; --c-tint: #C6F0E7;
  --line: #E2F4EE; --line-strong: #CBEADF;
  --g1: #C6F0E7; --g2: #E2F8F3; --g3: #FFF3CF; --ga: #FFD43B; --sh: 40,140,120;
  background:
    radial-gradient(900px 620px at 88% 0%, #D4F4EC 0%, rgba(212,244,236,0) 62%),
    radial-gradient(820px 640px at -8% 22%, #FFF1D2 0%, rgba(255,241,210,0) 62%),
    radial-gradient(900px 700px at 104% 46%, #FFE6EE 0%, rgba(255,230,238,0) 60%),
    radial-gradient(900px 700px at -6% 70%, #D4F4EC 0%, rgba(212,244,236,0) 60%),
    radial-gradient(900px 700px at 100% 96%, #FFF1D2 0%, rgba(255,241,210,0) 60%),
    #FCFEFD;
  background-repeat: no-repeat;
}
/* 人を育てたい方へ：ペリウィンクルが主役 */
body.grad.t-sp {
  --c: #7F96F2; --c-ink: #4A66D8; --c-soft: #E9EEFF; --c-tint: #D3DCFC;
  --line: #E6EAFB; --line-strong: #D3DCFC;
  --g1: #D3DCFC; --g2: #E9EEFF; --g3: #FFE6EE; --ga: #E590E8; --sh: 74,102,216;
  background:
    radial-gradient(900px 620px at 88% 0%, #DEE5FF 0%, rgba(222,229,255,0) 62%),
    radial-gradient(820px 640px at -8% 22%, #FFE6EE 0%, rgba(255,230,238,0) 62%),
    radial-gradient(900px 700px at 104% 46%, #FFF1D2 0%, rgba(255,241,210,0) 60%),
    radial-gradient(900px 700px at -6% 70%, #DEE5FF 0%, rgba(222,229,255,0) 60%),
    radial-gradient(900px 700px at 100% 96%, #FFE6EE 0%, rgba(255,230,238,0) 60%),
    #FDFDFF;
  background-repeat: no-repeat;
}
body.grad h1, body.grad h2, body.grad h3 { font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", "Yu Gothic", sans-serif; letter-spacing: .05em; }

/* ===== ヘッダー ===== */
body.grad .site-header { background: rgba(255,255,255,.72); border-bottom: 0; box-shadow: 0 6px 24px rgba(var(--sh),.06); }
body.grad .global-nav a { border-radius: 999px; }
body.grad .global-nav a.nav-cta { background: linear-gradient(120deg, var(--c-tint), var(--g3)); color: var(--c-ink); border: 0; padding: 8px 20px; }
@media (max-width: 1100px) { body.grad .global-nav { background: rgba(255,255,255,.97); border-bottom: 0; box-shadow: 0 16px 30px rgba(var(--sh),.10); border-radius: 0 0 24px 24px; } }

/* ===== ボタン：丸い形・白い面・やわらかい影 ===== */
body.grad .btn { border-radius: 999px !important; border: 0 !important; padding: 15px 30px; background: #fff !important; color: var(--c-ink) !important; box-shadow: 0 10px 26px rgba(var(--sh),.18); transition: transform .15s, box-shadow .15s; }
body.grad .btn.pink { color: #E35B80 !important; box-shadow: 0 10px 26px rgba(227,91,128,.20); }
body.grad .btn.mint { color: #1FA08C !important; box-shadow: 0 10px 26px rgba(31,160,140,.20); }
body.grad .btn.peri { color: #4A66D8 !important; box-shadow: 0 10px 26px rgba(74,102,216,.18); }
body.grad .btn:hover { transform: translateY(-2px); filter: none !important; opacity: 1; }

/* ===== ホームのメイン ===== */
body.grad .hero { background: none; padding: 88px 0 96px; }
body.grad .hero .eyebrow { color: #E35B80; }
body.grad .hero h1 em, body.grad .ab-big em { background: linear-gradient(90deg, #E35B80 0%, #F07A8F 55%, #FF9A62 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.grad .hero-visual::before { background: linear-gradient(140deg, #FFC9D7 0%, #FFE6EC 60%, #FFEFC8 100%); }
body.grad .hero-visual::after { border-color: #FFC9D7; }
body.grad .hero-visual .circle { box-shadow: 0 24px 60px rgba(227,91,128,.16); }

/* ===== ページ見出し（下の角を大きく丸めた、色の移り変わる面） ===== */
body.grad .page-head { background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); border-radius: 0 0 48px 48px; padding: 64px 0 56px; }
body.grad .page-head::after { border-color: rgba(255,255,255,.9); }
body.grad .breadcrumb { border-bottom: 0; padding-top: 14px; }

/* ===== セクション：色の面で区切らず、背景をそのまま見せる ===== */
body.grad .section.soft, body.grad .cta { background: none; }
body.grad .sec-head .en { display: inline-flex; align-items: center; gap: 10px; }
body.grad .sec-head .en::before { content: ""; width: 28px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c), var(--ga)); }
body.grad .sec-head.center .en { justify-content: center; }

/* ===== お悩み ===== */
body.grad .worry { border: 0; border-radius: 22px; box-shadow: 0 8px 26px rgba(var(--sh),.08); }

/* ===== ホーム：2つの入口・人材育成の帯 ===== */
body.grad .door { border: 0; border-radius: 32px; box-shadow: 0 14px 40px rgba(200,90,120,.10); }
body.grad .door.exist .hd { background: linear-gradient(135deg, #FFD3DF 0%, #FFEDF2 100%); }
body.grad .door.start .hd { background: linear-gradient(135deg, #C6F0E7 0%, #E6F9F3 100%); }
body.grad .door .first { border-radius: 18px; }
body.grad .door .first .free, body.grad .cta-card .free { border-radius: 999px; padding: 2px 14px; }
body.grad .door-sp { border: 0; border-radius: 32px; box-shadow: 0 14px 40px rgba(74,102,216,.10); background: linear-gradient(120deg, #fff 55%, #EEF1FF 100%); }

/* ===== ホーム：大切にしていること ===== */
body.grad .stance .st { border: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -8px 30px rgba(200,90,120,.08); }
body.grad .stance .col.s1 .base { border-radius: 0 0 0 28px; background: linear-gradient(180deg, #FFD9E3, #FFEDF2); }
body.grad .stance .col.s8 .base { background: linear-gradient(180deg, #C6F0E7, #E2F8F3); }
body.grad .stance .col.s0 .base { border-radius: 0 28px 0 0; background: linear-gradient(180deg, #FFE9A8, #FFF4CF); }

/* ===== 帯：角の大きく丸い、色の移り変わる面 ===== */
body.grad .band { width: min(var(--w), 100% - 40px); margin: 40px auto 0; border-radius: 48px; background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); padding: 72px 24px; }

/* ===== 無料の入口（健康診断・立ち上げ相談） ===== */
body.grad .entry { border: 0; border-radius: 36px; box-shadow: 0 16px 44px rgba(255,192,77,.20); }
body.grad .entry-flow li { border-radius: 24px; }
body.grad .entry-goal { border-radius: 24px; background: linear-gradient(120deg, var(--c-soft), #FFF8E6); }
body.grad .entry-goal::before { border-bottom-color: var(--c-soft); }

/* ===== 選べるサポートの表 ===== */
body.grad .pick-row { border: 0; border-left: 6px solid var(--sc); border-radius: 22px; box-shadow: 0 8px 26px rgba(var(--sh),.07); }
body.grad .pick-row .svc { border-radius: 16px; }
body.grad .pick-row .pz { border-left-color: var(--line-strong); }
body.grad .addon { border-radius: 20px; }

/* ===== 料金の帯 ===== */
body.grad .same-band { border-radius: 28px; background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 60%, var(--g3) 100%); }
body.grad .same-band .sub { border-radius: 999px; }

/* ===== サービスの枠 ===== */
body.grad .panel { border: 0; border-radius: 28px; box-shadow: 0 14px 40px rgba(var(--sh),.09); }
body.grad .panel .ph { background: linear-gradient(135deg, var(--sc-tint) 0%, var(--sc-soft) 100%); }
body.grad .box { border-radius: 18px; }
body.grad .chips span { border-radius: 999px; padding: 4px 14px; }
body.grad .note-line { border-radius: 18px; }
body.grad .themes7 > div { border-radius: 14px; }
body.grad .out { border-top-color: var(--line-strong); }
body.grad .out .k { border-radius: 999px; padding: 2px 12px; }
body.grad .journey span { border-radius: 16px; }
body.grad .goal-list li { border-radius: 16px; }
body.grad .eight > div { border-bottom-color: var(--line-strong); }

/* ===== 人を育てたい方へ ===== */
body.grad .roles4 a { border-radius: 20px; }
body.grad .steps6 li { border-radius: 18px; }
body.grad .vs2 > div { border-radius: 16px; }
body.grad .next-card { border-radius: 18px; }

/* ===== 私たちについて ===== */
body.grad .grow3 .g { border: 0; border-radius: 28px; box-shadow: 0 12px 34px rgba(200,90,120,.09); }
body.grad .vlist details { border-radius: 18px; }
body.grad .name-list li { border-radius: 16px; box-shadow: 0 6px 18px rgba(200,90,120,.06); }
body.grad .quote-big { border-radius: 40px; background: linear-gradient(120deg, #FFD3DF 0%, #FFE6EC 55%, #FFEFC8 100%); }
body.grad .msg-steps > div { border: 0; border-radius: 24px; box-shadow: 0 10px 30px rgba(200,90,120,.08); }

/* ===== 会社概要・フォーム・プライバシーポリシー ===== */
body.grad .table { border: 0; border-radius: 24px; box-shadow: 0 12px 34px rgba(200,90,120,.08); }
body.grad .form { border: 0; border-radius: 28px; box-shadow: 0 14px 40px rgba(200,90,120,.10); }
body.grad .form input, body.grad .form select, body.grad .form textarea { border-radius: 14px; background: #FFFBFC; }
body.grad .form .consent input { border-radius: 4px; }
body.grad .prose .pp-foreign { border-radius: 20px; }

/* ===== 無料相談の案内・フッター ===== */
body.grad .cta-card { border: 0; border-radius: 28px; box-shadow: 0 14px 40px rgba(217,138,10,.12); }
body.grad .site-footer { background: rgba(255,255,255,.66); border-top: 0; }

@media (max-width: 760px) {
  body.grad .page-head { border-radius: 0 0 32px 32px; padding: 48px 0 40px; }
  body.grad .band { border-radius: 32px; padding: 52px 20px; }
  body.grad .stance .col .base { background: var(--sc-tint); }
  body.grad .entry { border-radius: 28px; }
}

/* ===== 大切にしていること（2026-10-12）：白くて薄い影の面に、上から淡い色がにじむ ===== */
body.grad .creed-card { background: linear-gradient(180deg, var(--sc-soft) 0, #fff 62%); border-radius: 26px; box-shadow: 0 10px 30px rgba(var(--sh),.09); }
body.grad .creed-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: var(--sc-tint); opacity: .55; }
body.grad .creed-card > * { position: relative; z-index: 1; }
body.grad .creed-end { border-radius: 26px; background: linear-gradient(120deg, #FFE3EA, #FFF1D2 55%, #FFE9BF); box-shadow: 0 10px 30px rgba(var(--sh),.08); }

/* トップページの最初の2つのボタンを目立たせる（2026-10-12 ユーザー指示）：色で塗り、白い文字、大きめに */
body.grad .hero .btns { gap: 16px; margin-top: 30px; }
body.grad .hero .btns .btn { padding: 20px 36px; font-size: 18px; font-weight: 700; color: #fff !important; letter-spacing: .04em; }
body.grad .hero .btns .btn.mint { background: linear-gradient(135deg, #4CC7B3 0%, #1FA08C 100%) !important; box-shadow: 0 14px 30px rgba(31,160,140,.34); }
body.grad .hero .btns .btn.pink { background: linear-gradient(135deg, #F58CA6 0%, #E35B80 100%) !important; box-shadow: 0 14px 30px rgba(227,91,128,.34); }
body.grad .hero .btns .btn:hover { transform: translateY(-3px); }
@media (max-width: 640px) { body.grad .hero .btns .btn { width: 100%; justify-content: center; text-align: center; padding: 18px 20px; } }
/* 広い画面では、2つのボタンを横に並べたままにする（立ち上げが左） */
@media (min-width: 1101px) { body.grad .hero .btns { flex-wrap: nowrap; gap: 14px; } body.grad .hero .btns .btn { padding: 20px 24px; font-size: 18.5px; white-space: nowrap; letter-spacing: .02em; } }

/* ほかのページのボタンも、色で塗って白い文字に（2026-10-12 ユーザー指示。大きさは今までどおり） */
body.grad .btn { color: #fff !important; font-weight: 700; background: linear-gradient(135deg, var(--c) 0%, var(--c-ink) 100%) !important; box-shadow: 0 12px 26px rgba(var(--sh),.30); }
body.grad .btn.mint { color: #fff !important; background: linear-gradient(135deg, #4CC7B3 0%, #1FA08C 100%) !important; box-shadow: 0 12px 26px rgba(31,160,140,.32); }
body.grad .btn.pink { color: #fff !important; background: linear-gradient(135deg, #F58CA6 0%, #E35B80 100%) !important; box-shadow: 0 12px 26px rgba(227,91,128,.32); }
body.grad .btn.peri { color: #fff !important; background: linear-gradient(135deg, #7F96F2 0%, #4A66D8 100%) !important; box-shadow: 0 12px 26px rgba(74,102,216,.30); }
/* 上のメニューの「無料相談」も、色で塗って白い文字に（2026-10-12 ユーザー指示。色はそのページの基調色） */
body.grad .global-nav a.nav-cta, body.grad .global-nav a.nav-cta:hover { background: linear-gradient(135deg, var(--c) 0%, var(--c-ink) 100%); color: #fff; font-weight: 700; border: 0; box-shadow: 0 8px 18px rgba(var(--sh),.28); filter: none; }
/* 人を育てたい方へ「4つの育成」：育てる内容の札を少し詰めて、パソコンの幅では1行に収める（左右の枠をそろえるため。2026-10-12） */
body.grad.t-sp .panel[id^="r"] .chips { gap: 6px; }
body.grad.t-sp .panel[id^="r"] .chips span { padding: 4px 11px; }

/* ===== 2026-10-15 請求サポートのページ（リーフが主役）・請求サポートの帯のボタン ===== */
body.grad.t-bl {
  --c: #9CD04A; --c-ink: #6BA516; --c-soft: #EDF8D8; --c-tint: #DDF0B8;
  --line: #E4F1D2; --line-strong: #DDF0B8;
  --g1: #DDF0B8; --g2: #EDF8D8; --g3: #E3F2FD; --ga: #6DB6EA; --sh: 107,165,22;
  background:
    radial-gradient(900px 620px at 88% 0%, #E6F5CF 0%, rgba(230,245,207,0) 62%),
    radial-gradient(820px 640px at -8% 22%, #E3F2FD 0%, rgba(227,242,253,0) 62%),
    #FBFDF7;
}
body.grad .btn.leaf { color: #fff !important; background: linear-gradient(135deg, #9CD04A 0%, #6BA516 100%) !important; border: 0 !important; box-shadow: 0 12px 26px rgba(107,165,22,.28); }
body.grad .door-bl { background: linear-gradient(135deg, #FFFFFF 0%, #F4FAEA 100%); box-shadow: 0 14px 40px rgba(107,165,22,.10); }
body.grad .bl-notes > div { border: 1.5px solid #FFC04D; }

/* 金額の見せ方（2026-10-20）：「強気で」→ 同日「チープな感じがするのでリッチで信頼感のある表記に」。
   明るい色の太い数字（セールの値札のように見える）をやめ、数字は落ち着いた濃い色・大きめ・字間に少しゆとり。
   「円」「〜」はサービスの色で小さく添える。線を足して太く見せる処理（text-stroke）はやめた。 */
body.grad .panel .ph .price,
body.grad .pick-row .pz strong,
body.grad .same-band strong,
body.grad .addon em,
body.grad .courses .cg em,
body.grad .door li em,
body.grad .door-sp .pr strong, body.grad .door-bl .pr strong,
body.grad .next-card .top em,
body.grad .vs2 em {
  font-weight: 700; letter-spacing: .03em;
  font-feature-settings: "palt" 0; font-variant-numeric: tabular-nums lining-nums;
}
body.grad .panel .ph .price { font-size: clamp(30px, 3vw, 36px); line-height: 1.15; }
body.grad .pick-row .pz strong { font-size: clamp(25px, 2.4vw, 30px); line-height: 1.2; white-space: nowrap; }
body.grad .same-band strong { font-size: clamp(32px, 3.3vw, 40px); line-height: 1.15; }
body.grad .addon em { font-size: 21px; }
body.grad .courses .cg em { font-size: 20px; }
body.grad .door li em { font-size: 18px; }
body.grad .door-sp .pr strong, body.grad .door-bl .pr strong { font-size: clamp(27px, 2.6vw, 32px); }
body.grad .next-card .top em { font-size: 18px; }
body.grad .vs2 em { font-size: 18px; }
body.grad .panel .ph .price small, body.grad .pick-row .pz strong small, body.grad .same-band strong small,
body.grad .door-sp .pr strong small, body.grad .door-bl .pr strong small {
  font-size: .46em; font-weight: 700; color: var(--sc-ink, var(--c-ink)); letter-spacing: .04em; margin-left: 3px;
}
body.grad .door-sp .pr strong small { color: #4A66D8; } body.grad .door-bl .pr strong small { color: #6BA516; }
body.grad .pick-row .svc span { line-height: 1.6; display: block; }
/* 依頼して解決できること（2026-10-21）：ほかの面と同じ、やわらかい影 */
body.grad .solve-card { border-radius: 26px; box-shadow: 0 10px 30px rgba(var(--sh),.08); }
body.grad .solve-core { border-radius: 26px; background: linear-gradient(120deg, #FFF1D2, #FFE9BF); }

/* 金額の色と「円」のそろえ（2026-10-21 ユーザー「金額の色を黒からそれぞれの色に戻して」「円の文字を起点にそろえて。〜でそろえているのでちぐはぐ」）
   数字の色はサービスの色に戻した（上の「金額の見せ方」から濃い色の指定を外した）。
   「〜」は幅0の箱に入れて右の余白にぶら下げる（build_grad.js が「円〜」→「円<span class="tl">〜</span>」に書きかえる）。
   金額の箱の右に「〜」1つ分の余白を取るので、「〜」があってもなくても「円」の位置がそろう。 */
body.grad .tl { display: inline-block; width: 0; white-space: nowrap; }
body.grad .panel .ph .price, body.grad .door li em, body.grad .addon em, body.grad .same-band strong,
body.grad .pick-row .pz strong, body.grad .next-card .top em { padding-right: .95em; }
body.grad .pick-row .pz { text-align: right; padding-right: 8px; }
body.grad .pick-row .pz strong small { margin-left: 2px; }
/* 「〜」の箱は、置かれた場所の文字の見た目をそのまま受けつぐ（トップの一覧では「span」の黒い文字の決まりが当たっていた） */
body.grad .tl { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; }

/* 見た目の整え（2026-10-21 ユーザー「WEBデザイナーとして、枠の高さ・線の高さ・改行・文字の始まりに違和感のないように」） */
/* 大切にしていること：横に並ぶ札で、見出し・色文字・説明の線の高さをそろえる（見出しが2行と3行の札がまざっていた） */
@media (min-width: 641px) {
  body.grad .creed-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; justify-items: center; align-content: start; }
  body.grad .creed-card h3, body.grad .creed-card strong { align-self: start; }
  body.grad .creed-card p { margin-top: 0; align-self: start; }
}
/* 運営中の方へ「単発・追加メニュー」：箱を中身の高さに（となりの枠に合わせてのびて、箱の中に空きができていた） */
body.grad #option .pb > .box { flex: 0 0 auto; }
/* 選べるサポートの表：「こんなとき」の文を、行の長さをそろえて折り返す（「一緒に」だけが2行目に落ちていた） */
body.grad .pick-row .when { text-wrap: balance; }
/* 請求サポート「毎月の進め方」：5つの札を同じ1行に（5つ目だけ2行に折れていた） */
@media (min-width: 1001px) { body.grad .bl-flow li { padding: 10px 12px; gap: 7px; font-size: 15.5px; white-space: nowrap; letter-spacing: 0; } }
body.grad .pick-row .svc span { text-wrap: balance; }

/* 金額は黒、立ち上げパックをおすすめとして囲む（2026-10-21 ユーザー「金額は黒で、立ち上げパックをおすすめとして枠で囲ったりしてメリハリを」） */
body.grad .panel .ph .price, body.grad .pick-row .pz strong, body.grad .same-band strong, body.grad .addon em,
body.grad .courses .cg em, body.grad .door li em, body.grad .door-sp .pr strong, body.grad .door-bl .pr strong,
body.grad .next-card .top em, body.grad .vs2 em { color: #2E2A2C; }
body.grad .panel .ph .price small, body.grad .pick-row .pz strong small, body.grad .same-band strong small,
body.grad .door-sp .pr strong small, body.grad .door-bl .pr strong small { color: #2E2A2C; }
/* おすすめの札と枠（色は立ち上げパックのラベンダー） */
body.grad .rec-badge { font-style: normal; display: inline-block; background: #7B63D6; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; border-radius: 999px; padding: 3px 12px; line-height: 1.4; vertical-align: middle; }
body.grad .door li.rec { background: #F3EFFF; border: 2px solid #A593EC; border-radius: 12px; padding: 8px 12px; margin: 2px -14px; }
body.grad .door li.rec .rec-badge { margin-left: 8px; font-size: 12px; padding: 1px 9px; }
body.grad .pick-row.rec { position: relative; border: 2.5px solid #A593EC; border-left-width: 6px; box-shadow: 0 14px 34px rgba(123,99,214,.20); margin-top: 18px; }
body.grad .pick-row.rec > .rec-badge { position: absolute; top: -13px; left: 22px; }
body.grad .panel.rec { position: relative; outline: 3px solid #A593EC; outline-offset: 0; box-shadow: 0 18px 46px rgba(123,99,214,.24); overflow: visible; margin-top: 18px; }
body.grad .panel.rec > .rec-badge { position: absolute; top: -15px; left: 28px; z-index: 2; font-size: 15.5px; padding: 4px 16px; }
body.grad .panel.rec > .ph { border-radius: 28px 28px 0 0; }
/* 運営中の方へ：⑤運営仕組み化プロジェクトを「おすすめ」に（2026-10-21 ユーザー「案Aで。おすすめは運営仕組み化プロジェクト」）。色は⑤のスカイ */
body.grad .s6 .rec-badge, body.grad .rec.s6 > .rec-badge { background: #2F8FD0; }
body.grad .door li.rec.s6 { background: #EAF4FD; border-color: #6DB6EA; }
body.grad .pick-row.rec.s6 { border-color: #6DB6EA; box-shadow: 0 14px 34px rgba(47,143,208,.20); }
body.grad .panel.rec.s6 { outline-color: #6DB6EA; box-shadow: 0 18px 46px rgba(47,143,208,.24); }

/* 金額のバランス（2026-10-21 ユーザー「請求サポートの月額の金額表記のバランスが変」）
   「月額」は数字の半分ほどの大きさで、数字の前に小さく添える（前は数字と同じ大きさで、数字より目立っていた）。
   一覧の中の金額（料金の一覧・3つのコース・追加メニューなど）も「円」を小さくして、大きな金額と同じ形に。 */
body.grad .pm { font-size: .5em; font-weight: 700; letter-spacing: .06em; margin-right: .2em; vertical-align: baseline; }
body.grad .door li em .pm, body.grad .addon em .pm, body.grad .courses .cg em .pm, body.grad .next-card .top em .pm, body.grad .vs2 em .pm { font-size: .7em; }
body.grad small.u { font-size: .72em; font-weight: 700; margin-left: 1px; letter-spacing: .02em; }
body.grad .panel .ph .price small.u, body.grad .pick-row .pz strong small.u, body.grad .same-band strong small.u,
body.grad .door-sp .pr strong small.u, body.grad .door-bl .pr strong small.u { font-size: .46em; margin-left: 3px; }
/* 請求サポートの3つの枠：金額の上下に少し間を取る（名前・金額・説明が詰まって見えた） */
body.grad.t-bl .panel .ph .price { margin: 8px 0 10px; }
/* 「月額」の札は、置かれた場所の span の決まり（1行に分ける・小さい灰色の文字など）を受けない */
body.grad .pm { display: inline !important; margin: 0 .2em 0 0 !important; padding: 0 !important; color: inherit !important; font-weight: 700 !important; line-height: inherit !important; background: none !important; }
body.grad .courses .cg em .pm, body.grad .door-sp .pr strong .pm, body.grad .door-bl .pr strong .pm { font-size: .6em !important; }
body.grad .courses .cg em, body.grad .door-sp .pr strong, body.grad .door-bl .pr strong { white-space: nowrap; }
/* トップの請求・人材育成の帯：「〜」の分の余白を取り、上下の金額の「円」の位置をそろえる */
body.grad .door-sp .pr strong, body.grad .door-bl .pr strong { padding-right: .95em; }

/* 請求サポートの3つの枠（2026-10-21 ユーザー「PCで見たとき、サポートの内容の枠の大きさがそろっていない／フォントのせいか品がない → リッチな印象に」）
   ①3つの枠の「サポートの内容」と「目指す状態」の高さを横でそろえる（枠を下までのばす）
   ②項目は細めの文字・やや小さく・字間にゆとり、点の代わりに細い線の丸にチェック、項目の間は髪の毛ほどの細い線
   ③見出し（サポートの内容・目指す状態）は小さく字間を広く、目指す状態は落ち着いた太字で */
body.grad.t-bl .panels.three .panel { display: flex; flex-direction: column; }
body.grad.t-bl .panels.three .pb { flex: 1; display: flex; flex-direction: column; gap: 0; padding-top: 22px; }
body.grad.t-bl .panels.three .ph .h3, body.grad.t-bl .panels.three .ph h3 { letter-spacing: .06em; }
body.grad.t-bl .panels.three .ph .catch { font-size: 15.5px; line-height: 1.85; font-weight: 500; letter-spacing: .03em; }
body.grad.t-bl .panels.three .box { flex: 1; background: #fff; border: 1px solid var(--sc-tint); border-radius: 18px; padding: 20px 22px 10px; box-shadow: none; }
body.grad.t-bl .panels.three .box .lbl { display: block; font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--sc-ink); padding-bottom: 10px; border-bottom: 1px solid var(--sc-tint); margin-bottom: 2px; }
body.grad.t-bl .panels.three .box .dots { gap: 0; }
body.grad.t-bl .panels.three .box .dots li { font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: .03em; color: #4A4246; padding: 11px 0 11px 28px; border-bottom: 1px solid rgba(0,0,0,.06); text-wrap: pretty; }
body.grad.t-bl .panels.three .box .dots li:last-child { border-bottom: 0; }
body.grad.t-bl .panels.three .box .dots li::before { width: 16px; height: 16px; top: 15px; left: 0; border-radius: 50%; background: none; border: 1.5px solid var(--sc); box-sizing: border-box; }
body.grad.t-bl .panels.three .box .dots li::after { content: ""; position: absolute; left: 5.5px; top: 18.5px; width: 4px; height: 7px; border: solid var(--sc-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
body.grad.t-bl .panels.three .out { margin-top: 16px; padding: 16px 4px 2px; border-top: 1px solid var(--sc-tint); display: block; }
body.grad.t-bl .panels.three .out .k { display: block; background: none; color: var(--sc-ink); padding: 0; font-size: 13px; letter-spacing: .18em; margin-bottom: 6px; }
body.grad.t-bl .panels.three .out span:last-child { display: block; font-family: var(--round); font-size: 17.5px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--brown); }
/* 同じページの「毎月の進め方」と下の3つの枠も、上の枠と同じ落ち着いた調子に */
body.grad.t-bl .bl-flow .lbl { font-size: 14px; letter-spacing: .14em; }
body.grad.t-bl .bl-flow li { font-weight: 500; letter-spacing: .03em; color: #3A3236; }
body.grad.t-bl .bl-notes > div { border: 1px solid #FFD98A; border-radius: 18px; padding: 22px 24px; }
body.grad.t-bl .bl-notes h3 { font-size: 17.5px; letter-spacing: .08em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #FFE6B0; }
body.grad.t-bl .bl-notes p { font-size: 16px; font-weight: 500; line-height: 1.9; letter-spacing: .03em; color: #4A4246; }

/* 全ページの枠を、請求サポートと同じ落ち着いた調子に（2026-10-21 ユーザー「ほかのページもそろえて」）
   本文は細め・字間にゆとり／小見出しは小さく字間を広く／箱は白い面に細い線／項目は細い線の丸にチェックと細い区切り線／お渡しするもの・目指す状態は札をやめて落ち着いた太字 */
body.grad .panel .ph .catch { font-weight: 500; letter-spacing: .03em; }
body.grad .panel .pb > p, body.grad .panel .pb .box p { font-weight: 500; line-height: 1.95; letter-spacing: .03em; color: #4A4246; }
body.grad .panel .lbl { font-size: 13px; font-weight: 700; letter-spacing: .18em; }
body.grad .panel .box { background: #fff; border: 1px solid var(--sc-tint, var(--line-strong)); border-radius: 18px; padding: 18px 22px 10px; box-shadow: none; }
body.grad .panel .box > .lbl { padding-bottom: 10px; border-bottom: 1px solid var(--sc-tint, var(--line-strong)); margin-bottom: 4px; }
body.grad .panel .box > p { padding: 8px 0 8px; }
body.grad .panel .box.cream { background: #fff; border-color: #FFE0A3; }
body.grad .panel .box.cream > .lbl { border-bottom-color: #FFE6B0; }
body.grad .panel .box .dots { gap: 0; }
body.grad .panel .box .dots li { font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: .03em; color: #4A4246; padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(0,0,0,.06); text-wrap: pretty; }
body.grad .panel .box .dots li:last-child { border-bottom: 0; }
body.grad .panel .box .dots.cols2 li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
body.grad .panel .box .dots li::before { width: 16px; height: 16px; top: 14px; left: 0; border-radius: 50%; background: none; border: 1.5px solid var(--sc); box-sizing: border-box; }
body.grad .panel .box .dots li::after { content: ""; position: absolute; left: 5.5px; top: 17.5px; width: 4px; height: 7px; border: solid var(--sc-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
body.grad .panel .box.cream .dots li::before { border-color: #FFC04D; }
body.grad .panel .box.cream .dots li::after { border-color: #D98A0A; }
body.grad .panel .out { display: block; border-top: 1px solid var(--sc-tint, var(--line-strong)); padding: 16px 4px 0; min-height: 0; }
body.grad .panel .out .k { display: block; background: none !important; color: var(--sc-ink) !important; padding: 0; margin: 0 0 6px; border-radius: 0; font-size: 13px; letter-spacing: .18em; }
body.grad .panel .out > span:last-child { display: block; font-family: var(--round); font-size: 17px; font-weight: 700; line-height: 1.7; letter-spacing: .04em; color: var(--brown); }
body.grad .panel .flowv b { letter-spacing: .03em; }
body.grad .panel .flowv span { font-weight: 500; letter-spacing: .02em; }
/* 箱の名前そのものが見出しの箱（立ち上げパックの⑤⑥⑦・単発メニュー）は、見出しを小さくしすぎない */
body.grad .panel .box.k5 > .lbl, body.grad .panel .box.k6 > .lbl, body.grad .panel .box.k7 > .lbl, body.grad #option .box > .lbl { font-size: 16px; letter-spacing: .06em; }

/* ===== 公開前の点検（2026-10-30）：スマホの幅（375前後）で横にはみ出す所を直す ===== */
@media (max-width: 480px) {
  body.grad .door li.rec { margin: 2px -6px; padding: 8px 8px; }          /* 料金一覧の「おすすめ」の行が枠の右に出ていた */
  body.grad .door li.rec > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
  body.grad .door li.rec .rec-badge { margin-left: 0; }
  body.grad .door .bd ul { grid-template-columns: minmax(0, 1fr); }      /* トップの料金一覧の列が画面より広くなり、右端の金額が切れていた */
  body.grad .door .bd li { min-width: 0; }
  body.grad .door .bd li > span { flex: 1 1 0; min-width: 0; }
  body.grad a.addon.in-panel { flex-wrap: wrap; row-gap: 6px; }           /* オプションの金額が枠の外に出ていた → 下の行へ */
  body.grad a.addon.in-panel > em { margin-left: auto; }
}
@media (max-width: 640px) {
  body.grad .table { table-layout: fixed; width: 100%; }                   /* 会社概要・プライバシーポリシーの表が画面より広かった */
  body.grad .table th, body.grad .table td, body.grad table th, body.grad table td { overflow-wrap: anywhere; }
  body.grad table .nb, body.grad .pp-foreign .nb { white-space: normal; }
}
@media (max-width: 400px) {
  body.grad .case-who h3 .nb { white-space: normal; }
  body.grad .case-head { grid-template-columns: minmax(0, 1fr); }
  body.grad .case-head > * { min-width: 0; }                    /* サポートの例の見出しが、幅360で右に2pxはみ出していた */
}
/* タブレットの幅（761〜900）で2列の枠が狭すぎ、中の文字や金額が枠の外に切れていた → 960以下は1列に（2026-10-30） */
@media (max-width: 960px) {
  body.grad .panels.two, body.grad .doors { grid-template-columns: minmax(0, 1fr); }
}