/* =====================================================================
   デザイン案：hrn.or.jp/monthly_supporter/ の見た目を当てはめたもの（2026-10-20）
   ブランチ design/hrn-style だけで読み込む。文言・並び・動きは変えず、見た目だけを上書きする
   参考サイトの特徴
   - 地はうすい青みのグレー。中身は中央の柱にまとめ、左右に地が見える
   - 大きく丸い形（下が丸いアーチ、角の大きな白い箱、円で区切る）
   - 青のグラデーション（濃い青 → 水色）と、差し色の黄色（丸いバッジ、蛍光ペンの下線）
   - ボタンは青い丸ボタンに、黄色い丸の矢印
   - 文字はグレーがかった紺。見出しは太いゴシック
   ===================================================================== */

:root {
  --hrn-bg: #e2edef;
  --hrn-blue: #0252e5;
  --hrn-grad-a: #015eea;   /* グラデーションの上の色 */
  --hrn-grad-b: #00c0fa;   /* グラデーションの下の色 */
  --hrn-grad: linear-gradient(180deg, var(--hrn-grad-a) 0%, var(--hrn-grad-b) 100%);
  --hrn-yellow: #fdd23c;
  --hrn-text: #4c5d67;
  --hrn-orange: #ff683c;
  --hrn-col-max: 1120px;                                        /* 中央の柱の幅（いちばん広いとき） */
  --hrn-col: min(var(--hrn-col-max), calc(100vw - 2 * var(--gutter)));   /* 中央の柱の幅 */
  --hrn-r: clamp(28px, 4vw, 56px);                              /* 白い箱の角の丸み */
  --hrn-btn-r: 999px;                                           /* ボタンの角の丸み */
  --hrn-head-font: var(--body);                                 /* 見出しの書体 */
  --hrn-head-w: 900;                                            /* 見出しの太さ */
  --hrn-c1: #bc4f4f;   /* 悩みのボタンの色（1〜4） */
  --hrn-c2: #22b5ae;
  --hrn-c3: #8b42b5;
  --hrn-c4: #f9a11c;

  --text: var(--hrn-text);
  --head: var(--hrn-blue);
  --ink: var(--hrn-blue);
  --blue: var(--hrn-blue);
  --blue-deep: var(--hrn-blue);
  --red: var(--hrn-orange);
  --paper: var(--hrn-bg);
}
body { background: var(--hrn-bg); color: var(--hrn-text); }

/* 見出しは太いゴシック（参考サイトの書体は有料なので、いま入っている Zen Kaku Gothic New の 900 で近づける） */
.feel-title, .vend-title, .menu-head-title, .why-title, #flow .ph2, .soudan-title, .qa-title, .fv-c-title, .fv-a .fv-title, .fv-a .fv-quote, .fv-a .fv-quote span {
  font-family: var(--hrn-head-font); font-weight: var(--hrn-head-w); color: var(--hrn-blue);
}
/* 強調は黄色の蛍光ペン（参考サイトと同じ、文字の下 6割〜7割に引く線） */
.hrn-mark, .why-title em, .soudan-title b {
  background: linear-gradient(transparent 62%, var(--hrn-yellow) 62%, var(--hrn-yellow) 84%, transparent 84%);
  color: inherit; font-style: normal;
}

/* ---------- 上のメニュー ---------- */
.hd-nav { background: var(--hrn-blue); border-radius: 999px; padding: 4px; }
.hd-nav a { color: #fff; border-radius: 999px; }
.hd-nav a[aria-current="page"] { background: var(--hrn-yellow); color: var(--hrn-blue); }
.hd-brand-mark { background: var(--hrn-blue); }

/* ---------- 最初の画面 ---------- */
/* 場面1：青いグラデーションの全面。下に、うすい地の大きな円をのぞかせる（参考サイトの最初の画面の下の白い円）。問いの文字は白 */
.fv-q { background: var(--hrn-grad); }
.fv-q::before {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: 0; translate: -50% calc(100% - 22vh);   /* 円の上の端だけを、下から 22vh のぞかせる */
  width: max(220vh, 120vw); aspect-ratio: 1; border-radius: 50%; background: var(--hrn-bg);
}
.fv-marquee span, .fv-marquee .fv-ch { color: #fff; }
.fv-marquee .fv-ch.is-hit { color: var(--hrn-yellow); }
.fv-marquee .fv-ball { background: var(--hrn-yellow); box-shadow: 0 0 0 .02em rgba(2,82,229,.25); }
.fv-scroll { color: #fff; }
.fv-scroll::after { background: #fff; }

/* 場面1 → 2 で画面をおおう丸、場面2 → 3 の面 */
.fv-cover { background: var(--hrn-yellow); }
.fv-a { background: var(--hrn-bg); }
.fv-a > .fv-ball2 { background: var(--hrn-grad); }
.fv-a .fv-quote, .fv-a .fv-l1 { color: var(--hrn-blue); }
.fv-a .fv-l2 { color: var(--hrn-blue); background: linear-gradient(transparent 64%, var(--hrn-yellow) 64%, var(--hrn-yellow) 86%, transparent 86%); }
.fv-l1.is-hit, .fv-l2.is-hit { color: var(--hrn-blue); }

/* 場面3：青いグラデーションのアーチの中に事業名と人物（参考サイトの最初の画面に近い形） */
.fv-c { background: var(--hrn-bg); }
.fv-c::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; translate: -50% 0;
  width: var(--hrn-col); background: var(--hrn-grad); border-radius: 0 0 50% 50% / 0 0 30% 30%;
}
.fv-c .ticket { filter: drop-shadow(0 6px 0 rgba(0,40,120,.35)); }
.fv-c .ticket .ticket-stub, .fv-c .ticket .ticket-main { background: var(--hrn-yellow); color: var(--hrn-blue); }
.fv-c-title { color: #fff; }

/* ---------- 白い箱と青い箱 ---------- */
/* 文章の区画は、中央の白い箱（角を大きく丸める）に入れる */
.feel-inner, .vend-inner, .why, .pflow-inner, .qa-inner {
  max-width: var(--hrn-col); margin-left: auto; margin-right: auto;
  background: #fff; border-radius: var(--hrn-r);
  padding: clamp(36px, 6vw, 90px) clamp(20px, 5vw, 80px);
  position: relative;
}
/* 箱のつなぎ目に、黄色い丸を置く（参考サイトの「since 2006」の丸の位置） */
.feel-inner::before, .vend-inner::before, .why::before, .pflow-inner::before, .qa-inner::before {
  content: ""; position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: clamp(54px, 6vw, 86px); aspect-ratio: 1; border-radius: 50%; background: var(--hrn-yellow);
}
.feel, .vend, .pflow, .qa { padding-top: clamp(60px, 10vh, 120px); }
.feel-body, .why-body { color: var(--hrn-text); border: 0; padding: 0; }
.feel-key { color: var(--hrn-blue); }
.feel-last, .why-last { border-top: 2px dashed rgba(2,82,229,.35); }

/* 「フィットする」は青いグラデーションの区画にして、その中に白い箱 */
.proof { background: var(--hrn-grad); border-radius: 50% 50% 0 0 / clamp(60px, 10vw, 160px) clamp(60px, 10vw, 160px) 0 0; margin-top: clamp(40px, 8vh, 100px); padding-top: clamp(80px, 14vh, 160px); }

/* 悩みのボタン：参考サイトの「人権問題」の丸い形のように、色ちがいの丸い形にする */
.vend-machine { background: none; border: 0; }
.vend-btn { border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%; box-shadow: none; padding: 9% 12%; align-items: center; text-align: center; }
.vend-btn:nth-child(1) { background: var(--hrn-c1); }
.vend-btn:nth-child(2) { background: var(--hrn-c2); border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%; }
.vend-btn:nth-child(3) { background: var(--hrn-c3); border-radius: 52% 48% 60% 40% / 52% 40% 60% 48%; }
.vend-btn:nth-child(4) { background: var(--hrn-c4); border-radius: 40% 60% 48% 52% / 56% 48% 52% 44%; }
.vend-btn .vend-to, .vend-btn.is-blue .vend-to { background: #fff; color: var(--hrn-blue); border-radius: 999px; }
.vend-lead { color: var(--hrn-text); }

/* 「5つのサポート」の見出しと無料相談は、青いグラデーションの丸い区画 */
.menu-head, .soudan { max-width: var(--hrn-col); margin: clamp(60px, 10vh, 120px) auto 0; background: var(--hrn-grad); border-radius: var(--hrn-r); color: #fff; position: relative; }
.menu-head::before, .soudan::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% -50%; width: clamp(54px, 6vw, 86px); aspect-ratio: 1; border-radius: 50%; background: var(--hrn-yellow); }
.menu-head-title, .soudan-title { color: #fff; }
.menu-head-eyebrow { background: var(--hrn-yellow); color: var(--hrn-blue); border-radius: 999px; }
.soudan-title b { color: var(--hrn-blue); background: var(--hrn-yellow); border-radius: .15em; padding: 0 .12em; }
.soudan-label, .soudan-text { color: #fff; }
.menu-head-chara { position: absolute; right: calc(-1 * clamp(70px, 11vw, 200px)); bottom: 0; height: 82%; width: auto; pointer-events: none; }
.soudan-chara { position: absolute; left: calc(-1 * clamp(110px, 16vw, 300px)); bottom: 0; height: 46%; width: auto; pointer-events: none; }

/* サービス5つ：紺の面を青いグラデーションに。英語の見出しは白と黄色 */
.svc-stage { background: var(--hrn-grad); }
.svc-title { color: #fff; }
.svc-title[data-i="1"], .svc-title[data-i="3"] { color: var(--hrn-yellow); }
.svc-bar i { background: var(--hrn-yellow); }

/* ---------- ボタン（青い丸ボタン＋黄色い丸の矢印） ---------- */
.svc-more, .soudan-btn {
  display: inline-flex; align-items: center; gap: .8em;
  background: var(--hrn-blue); color: #fff; border-radius: var(--hrn-btn-r);
  padding: .7em .8em .7em 1.6em; box-shadow: 0 5px 0 rgba(0,30,90,.25);
}
.soudan-btn { background: #fff; color: var(--hrn-blue); }
.svc-more::after, .soudan-btn::after {
  content: "→"; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--hrn-yellow); color: var(--hrn-blue); font-family: var(--num); font-weight: 900;
}
.fix-btn { border-radius: var(--hrn-btn-r); }
.fix-btn.is-red { background: var(--hrn-yellow); color: var(--hrn-blue); }
.fix-btn.is-blue { background: var(--hrn-blue); color: #fff; }

/* ---------- Q&A・フッター ---------- */
.qa-title { color: var(--hrn-blue); }
.qa-nav a { border-radius: 999px; border-color: var(--hrn-blue); color: var(--hrn-blue); }
.qa-item { border-radius: 18px; background: var(--hrn-bg); border: 0; }
.qa-q { color: var(--hrn-blue); }
.ft { background: var(--hrn-blue); color: #fff; border-radius: var(--hrn-r) var(--hrn-r) 0 0; margin-top: clamp(60px, 10vh, 120px); }

@media (max-width: 760px) {
  .menu-head-chara, .soudan-chara { display: none; }
}

/* 悩みの区画の人物：白い箱が細くなったぶん見出しと重なるので、箱の右の外へ少し出す */
.vend-chara { --h: clamp(130px, 18vw, 280px); right: calc(-1 * clamp(20px, 4vw, 80px)); }

/* 青い区画の上の見出しは白。ボールが当たったら黄色 */
.soudan .soudan-title, .soudan .soudan-title b { color: #fff; }
.soudan .soudan-title.is-hit { color: var(--hrn-yellow); }
.soudan .soudan-title b, .soudan .soudan-title.is-hit b { color: var(--hrn-blue); }
.soudan-label { background: rgba(255,255,255,.18); border-radius: 999px; }
/* 見出しに当たるボールも黄色 */
.feel-ball { background: var(--hrn-yellow); }
/* 進め方の人物は、白い箱の右上の外へ少し出して、見出しと重ねない */
#flow .pflow-chara { right: calc(-1 * clamp(40px, 7vw, 140px)); height: clamp(100px, 15vw, 230px); }

/* 事業名の場面の人物：青いアーチの中に収まるよう小さくし、下の丸いふちに沿わせて、外側の人ほど少し上に置く（2026-10-20 本人指示） */
@media (min-width: 761px) {
  .fv-c { --mh: min(clamp(130px, min(36vh, 27vw), 520px), calc(var(--hrn-col) * .29)); }
  .fv-c-chara { bottom: 2vh; }
  .fv-c-group { bottom: calc(2vh + var(--mh) * .16); }
  .fv-c-group-r { bottom: calc(2vh + var(--mh) * .05); }
  .fv-c-group-rr { bottom: calc(2vh + var(--mh) * .2); }
}