/* ------------------------------------------------------------------
   意匠部「A4横 事業計画・提案書テンプレート」の意匠体系を Web へ移植。
   骨格・字組み・部品は意匠部準拠（明朝基調／角丸ゼロ／上辺4px罫／
   eyebrow + 主張見出し + 章名の3段構え／装飾数字）。
   shienmine.fhrit.com（sites/fhrit-shienmine）の style.css を写し、写真の背景を外した。
   色は写し元のまま（写し元が fhr.or.jp の実測値に合わせたもの）。
   キーカラーは #4F369E（濃紫）。同サイトでは見出し・リンク・ボタン背景に用いられ、
   出現回数が最多。Astraテーマ既定の #0170B9 はほぼ使われていないため採用しない。
   ボタンが角丸ゼロである点も意匠部の作法と一致するため踏襲する。
   ロゴ由来の多色はブランドストライプとタグのアクセントに限って使う。
   外部フォント・CDN・解析タグは読み込まない（外部リクエスト0件を維持）。
   ------------------------------------------------------------------ */
:root {
  /* 親サイト fhr.or.jp の実測配色 */
  --accent: #4f369e;        /* キーカラー（見出し・リンク・ボタン） */
  --accent-deep: #3d2a7c;
  --accent-tint: #f2eefb;
  --ink: #2f2f2f;
  --ink-strong: #111111;
  --ink-soft: #4b4f58;
  --muted: #7b7f8a;
  --line: #e5e5e5;
  --paper: #ffffff;
  --paper-deep: #efefef;    /* 同サイトのセクション背景 */
  --card: #ffffff;

  /* ロゴ由来のアクセント */
  --pink: #d25a88;
  --cyan: #4faae3;
  --orange: #d2552a;
  --violet: #564c89;
  --gold: #c9a26a;

  /* ── グラデーション体系 ──────────────────────────
     ロゴの4色を「水→藍→紫→桃」の順に並べた多段グラデ。
     全ての装飾はこの1本から派生させ、色数を増やさない。 */
  --g1: #35b6e8;   /* 水 */
  --g2: #6a5ae0;   /* 藍 */
  --g3: #7b3fd4;   /* 紫 */
  --g4: #e0568f;   /* 桃 */
  --grad: linear-gradient(100deg, var(--g1) 0%, var(--g2) 34%, var(--g3) 62%, var(--g4) 100%);
  --grad-soft: linear-gradient(100deg, rgba(53,182,232,.13) 0%, rgba(106,90,224,.13) 34%, rgba(123,63,212,.13) 62%, rgba(224,86,143,.13) 100%);
  --ink-deep: #140f2b;

  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --max: 1040px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mincho);
  font-weight: 500;
  line-height: 1.95;
  font-size: 16.5px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.inner { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }

/* ロゴ4色のブランドストライプ */
.brand-stripe {
  height: 4px;
  background: var(--grad);
  background-size: 260% 100%;
  animation: slide 14s linear infinite;
}
@keyframes slide { to { background-position: 260% 0; } }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand img { display: block; height: 36px; width: auto; }
.brand-divider { width: 1px; height: 28px; background: var(--line); }
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-name { font-family: var(--mincho); font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.brand-sub { font-family: var(--gothic); font-size: .68rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.header-nav { display: flex; gap: 22px; font-family: var(--gothic); font-size: .82rem; font-weight: 500; }
.header-nav a { color: var(--ink-soft); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.header-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 表紙相当（hero） ---------- */
/* 表紙相当。背景写真を敷き、可読性のためのスクリムを重ねる。
   画像が未配置でも下地のグラデーションだけで成立する（意図した見えになる）。 */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 84px;
  border-bottom: 1px solid var(--line);
  background-color: #1b1636;
  background-image:
    linear-gradient(100deg, rgba(20,16,44,.94) 0%, rgba(20,16,44,.72) 42%, rgba(32,24,72,.34) 72%, rgba(40,30,86,.20) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {
  /* 表紙の4文字漢字（意匠部 .cover-kanji の web 版）。暗い背景では白を薄く乗せる */
  content: "販売在庫";
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  display: block; width: 2.1em;
  font-family: var(--mincho); font-size: clamp(72px, 11vw, 148px); font-weight: 300;
  line-height: 1.02; letter-spacing: .04em; color: rgba(255, 255, 255, .10);
  pointer-events: none; word-break: break-all;
}
.hero .inner { position: relative; z-index: 1; }
.hero .eyebrow { color: #c6b6f2; }
.hero .eyebrow::before { background: #c6b6f2; }
.hero h1 { margin: 0 0 18px; font-family: var(--mincho); font-size: clamp(1.5rem, 3.1vw, 2.15rem); font-weight: 600; line-height: 1.62; letter-spacing: .02em; max-width: 26em; text-align: left; color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,.45); }
.hero .subhead { margin: 0; font-family: var(--gothic); font-size: .96rem; font-weight: 500; color: rgba(255,255,255,.86); text-align: left; }
.hero .tag { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); color: #fff; }
.hero .tag.t2 { border-color: rgba(210,90,136,.85); color: #ffd6e6; }
.hero .tag.t3 { border-color: rgba(79,170,227,.85); color: #cfe9fb; }
.tags { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* 意匠部 .eyebrow：英字章ラベル＋前置きの罫 */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
  font-family: var(--gothic); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}
.eyebrow::before { content: ""; width: 46px; height: 2px; background: var(--grad); flex: none; border-radius: 2px; }

/* 意匠部 .tag：角丸ゼロ・1px罫 */
.tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  color: var(--accent-deep);
  font-family: var(--gothic); font-size: .74rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .02em;
}
.tag.t2 { border-color: var(--pink); color: #a83a66; }
.tag.t3 { border-color: var(--cyan); color: #2a7fae; }

/* ---------- 本文セクション ---------- */
main { padding: 0; }
section { padding: 60px 0; border-bottom: 1px solid var(--line); }
section.alt { background: #f7f6fa; }
section:last-of-type { border-bottom: none; }

/* 意匠部の3段見出し：eyebrow → h2（主張の一文）→ subhead（章名） */
section h2 { position: relative; margin: 0; font-family: var(--mincho); font-size: clamp(1.2rem, 2.1vw, 1.5rem); font-weight: 600; line-height: 1.6; letter-spacing: .015em; color: var(--ink); max-width: 30em; text-align: left; }
section .subhead { margin: 10px 0 26px; font-family: var(--gothic); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); text-align: left; }
.num {
  display: block; margin: 0 0 6px;
  font-family: var(--gothic); font-size: 1.9rem; font-weight: 800; letter-spacing: .06em;
  color: var(--g3);
  background: linear-gradient(100deg, var(--g2) 0%, var(--g3) 45%, var(--g4) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slide 10s linear infinite;
}
@supports not (background-clip: text) { .num { -webkit-text-fill-color: currentColor; } }
h3 { font-family: var(--gothic); font-size: .95rem; font-weight: 700; margin: 34px 0 12px; color: var(--ink); letter-spacing: .03em; }
p { margin: 0 0 15px; }

/* 意匠部のカード：角丸ゼロ・上辺4px・影なし */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.grid > article {
  position: relative; isolation: isolate;
  padding: 27px 25px 25px;
  counter-increment: featnum;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  /* 二重背景で「グラデの縁取り」を作る（内側は白、外周だけグラデ） */
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 220% 100%;
  transition: transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s, background-size .8s;
}
/* 上辺だけ濃いグラデ帯を重ね、hoverで全幅へ */
.grid > article::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 52px;
  background: var(--grad); background-size: 300% 100%;
  border-radius: 3px 0 0 0;
  transition: width .55s cubic-bezier(.22,.8,.3,1);
}
/* 背面の大きな連番 */
.grid > article::after {
  content: counter(featnum, decimal-leading-zero);
  position: absolute; right: 15px; bottom: 4px; z-index: -1;
  font-family: var(--gothic); font-size: 3.4rem; font-weight: 800; line-height: 1;
  letter-spacing: .02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: .12;
  transition: opacity .45s, transform .45s;
}
.grid > article:hover {
  transform: translateY(-5px);
  background-size: 100% 100%, 320% 100%;
  box-shadow: 0 18px 42px -20px rgba(106,90,224,.55);
}
.grid > article:hover::before { width: 100%; }
.grid > article:hover::after { opacity: .22; transform: translateY(-2px); }
.grid > article h3 { margin: 0 0 9px; font-size: .95rem; letter-spacing: .04em; }
.grid > article p { margin: 0; font-family: var(--gothic); font-size: .85rem; font-weight: 500; line-height: 1.9; color: var(--ink-soft); }
#features .grid { counter-reset: featnum; }

/* 業務プロセス */
.process { list-style: none; margin: 0; padding: 0; }
.process li {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-left: none; padding: 14px 18px 14px 24px; margin-bottom: 9px; border-radius: 2px;
  font-family: var(--gothic); font-size: .88rem; font-weight: 500;
  transition: transform .38s cubic-bezier(.22,.8,.3,1), border-left-width .38s, background .38s;
}
.process li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad); background-size: 100% 300%;
  transition: width .38s cubic-bezier(.22,.8,.3,1);
}
.process li:hover { transform: translateX(6px); background: var(--grad-soft); }
.process li:hover::before { width: 7px; }
.process li:nth-child(2) { border-left-color: var(--pink); }
.process li:nth-child(3) { border-left-color: var(--cyan); }
.process li b { font-weight: 700; color: var(--ink); }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); font-family: var(--gothic); font-size: .86rem; font-weight: 500; }
caption { text-align: left; font-family: var(--gothic); font-size: .76rem; font-weight: 500; color: var(--muted); padding-bottom: 10px; letter-spacing: .04em; }
th, td { border: 1px solid var(--line); padding: 12px 15px; text-align: left; vertical-align: top; line-height: 1.8; }
thead th, table tr:first-child th { border-top: 3px solid var(--ink); }
th { background: var(--accent-tint); width: 34%; font-weight: 700; color: var(--ink); }
.price { font-family: var(--mincho); font-size: 1.32rem; font-weight: 400; color: var(--accent); letter-spacing: .02em; }

.note { margin-top: 18px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); font-family: var(--gothic); font-size: .82rem; font-weight: 500; color: var(--ink-soft); }
.note a { color: var(--accent); }

/* ---------- お問い合わせ ---------- */
.contact { border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--card); padding: 26px; }
.contact dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 26px; font-family: var(--gothic); font-size: .89rem; }
.contact dt { font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.contact dd { margin: 0; color: var(--ink-soft); }
.contact a { color: var(--accent); }

/* ---------- フッター ---------- */
.site-footer { background: #241b40; color: #c9c2dd; padding: 38px 0; font-family: var(--gothic); font-size: .8rem; font-weight: 400; }
.site-footer img { height: 30px; width: auto; margin-bottom: 16px; }
.site-footer a { color: #bda9ee; }
.site-footer p { margin: 0 0 7px; text-align: left; }

@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.9; }
  .hero { padding: 60px 0 52px; background-position: center, center; }
  .hero::after { display: none; }
  .header-nav { display: none; }
  .brand-divider, .brand-sub { display: none; }
  .grid { border-left: none; }
  .grid > article { border-left: 1px solid var(--line); }
  th { width: 42%; }
  .contact dl { grid-template-columns: 1fr; gap: 2px 0; }
  .contact dd { margin-bottom: 14px; }
}

/* ------------------------------------------------------------------
   スクロールに応じた出現。JS は IntersectionObserver のみ（外部依存なし）。
   JS 無効時・reduced-motion 時は最初から可視。
   ------------------------------------------------------------------ */
html.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal { transition: opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }
.reveal.in, html:not(.js) .reveal { opacity: 1; transform: none; }

/* eyebrow の前置き罫を出現時に伸ばす */
.eyebrow::before { transition: width .9s cubic-bezier(.22,.8,.3,1); }
.reveal .eyebrow::before, .eyebrow.reveal::before { width: 0; }
.reveal.in .eyebrow::before, .eyebrow.reveal.in::before { width: 46px; }

/* hero は読み込み直後に立ち上げる */
.hero .inner > * { opacity: 0; transform: translateY(16px); animation: heroUp .95s cubic-bezier(.22,.8,.3,1) forwards; }
.hero .inner > *:nth-child(1) { animation-delay: .10s; }
.hero .inner > *:nth-child(2) { animation-delay: .20s; }
.hero .inner > *:nth-child(3) { animation-delay: .30s; }
.hero .inner > *:nth-child(4) { animation-delay: .40s; }
.hero .inner > *:nth-child(5) { animation-delay: .50s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* 背景の光跡をゆっくり流す（hero の擬似要素とは別レイヤ） */
.hero .glow {
  position: absolute; inset: -20% -10% auto -10%; height: 140%;
  background: radial-gradient(closest-side, rgba(140,110,235,.30), transparent 70%);
  filter: blur(30px); pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-6%, 2%, 0) scale(1); }
  to   { transform: translate3d(8%, -3%, 0) scale(1.12); }
}

/* リンク下線のスライド */
.header-nav a { position: relative; border-bottom: none; }
.header-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: var(--accent); transition: width .35s cubic-bezier(.22,.8,.3,1);
}
.header-nav a:hover::after { width: 100%; }

/* 表の行ハイライト */
tbody tr { transition: background .3s; }
tbody tr:hover { background: var(--accent-tint); }

/* お問い合わせ枠の淡い発光 */
.contact { transition: box-shadow .5s, transform .5s cubic-bezier(.22,.8,.3,1); }
.contact:hover { box-shadow: 0 18px 40px -22px rgba(36,27,64,.5); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-nav a::after { transition: none !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .inner > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero .glow { animation: none !important; }
  .grid > article, .process li, .contact, tbody tr, .eyebrow::before { transition: none !important; }
  .grid > article:hover, .process li:hover, .contact:hover { transform: none !important; }
}

/* ==================================================================
   グラデーション意匠レイヤー（Meta 期のグラデ系を意識）
   すべて --grad 1本から派生させ、色数を増やさない。
   ================================================================== */

/* hero：写真の上にブランドグラデのスクリムを重ね、発光体を2つ漂わせる */
.hero { background-color: var(--ink-deep); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(20,15,43,.90) 0%, rgba(53,182,232,.16) 38%, rgba(123,63,212,.24) 66%, rgba(224,86,143,.22) 100%);
  mix-blend-mode: normal;
}
.hero .glow {
  inset: auto auto -30% -12%; width: 58%; height: 130%;
  background: radial-gradient(closest-side, rgba(123,63,212,.55), transparent 72%);
  filter: blur(46px);
}
.hero .glow2 {
  position: absolute; right: -10%; top: -35%; width: 52%; height: 125%;
  background: radial-gradient(closest-side, rgba(53,182,232,.42), transparent 72%);
  filter: blur(52px); pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
.hero h1 .em {
  background: var(--grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: slide 12s linear infinite;
}

/* セクション見出しの左に細いグラデ縦罫 */
section h2::before {
  content: ""; position: absolute; left: -18px; top: .28em; bottom: .28em; width: 3px;
  background: var(--grad); background-size: 100% 260%; border-radius: 3px;
}
@media (max-width: 700px) { section h2::before { display: none; } }

/* alt セクションに極薄のグラデ地を敷く */
section.alt {
  background:
    radial-gradient(760px 300px at 8% 0%, rgba(53,182,232,.10), transparent 62%),
    radial-gradient(700px 320px at 92% 100%, rgba(224,86,143,.10), transparent 62%),
    #fbfaff;
}

/* 表：ヘッダ列を淡グラデ、上辺をグラデ帯に */
th { background: var(--grad-soft); }
table { border-radius: 3px; overflow: hidden; }
thead th, table tr:first-child th { border-top: none; }
.table-wrap { position: relative; padding-top: 4px; }
.table-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad); border-radius: 3px 3px 0 0;
}

/* 価格をグラデ文字に */
.price {
  font-family: var(--gothic); font-weight: 800; font-size: 1.42rem; letter-spacing: .01em;
  background: var(--grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: slide 10s linear infinite;
}

/* note・contact をグラデ縁取りへ */
.note {
  border: 1px solid transparent; border-radius: 3px;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.contact {
  border: 1px solid transparent; border-radius: 4px;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  background-size: 100% 100%, 220% 100%;
  transition: background-size .8s, box-shadow .5s, transform .5s cubic-bezier(.22,.8,.3,1);
}
.contact:hover { background-size: 100% 100%, 320% 100%; box-shadow: 0 20px 44px -22px rgba(106,90,224,.55); }

/* フッター：上端にグラデ帯、地はディープネイビー */
.site-footer { position: relative; background: var(--ink-deep); color: #c6c0e0; font-weight: 500; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); background-size: 260% 100%; animation: slide 14s linear infinite;
}
.site-footer a { color: #a8c8f5; }

/* ヘッダーを半透明ガラスに */
.site-header { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(10px); }

/* ナビ下線をグラデに */
.header-nav a::after { background: var(--grad); height: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .brand-stripe, .num, .price, .site-footer::before, .hero h1 .em,
  .hero .glow, .hero .glow2 { animation: none !important; }
}

/* ==================================================================
   写真を敷いた濃色バンド（白文字）
   ================================================================== */
.band {
  position: relative; overflow: hidden;
  border-bottom: none;
  padding: 84px 0;
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(104deg, rgba(20,15,43,.96) 0%, rgba(20,15,43,.90) 38%, rgba(46,25,92,.86) 72%, rgba(74,30,86,.82) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); background-size: 260% 100%; animation: slide 14s linear infinite;
}
.band-glow {
  position: absolute; left: -8%; bottom: -40%; width: 55%; height: 130%;
  background: radial-gradient(closest-side, rgba(53,182,232,.40), transparent 72%);
  filter: blur(48px); pointer-events: none;
  animation: drift 20s ease-in-out infinite alternate;
}
.band .inner { position: relative; z-index: 1; }
.band .eyebrow { color: #cfc2f7; }
.band .eyebrow::before { background: var(--grad); }
.band h2 { color: #fff; text-shadow: 0 1px 22px rgba(0,0,0,.4); }
.band h2::before { display: none; }
.band .subhead { color: rgba(255,255,255,.68); }

/* 3ステップ */
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: st; }
.steps li {
  position: relative; padding: 24px 22px 22px;
  border: 1px solid rgba(255,255,255,.20); border-radius: 4px;
  background: rgba(14,10,32,.34);
  backdrop-filter: blur(8px) saturate(140%);
  transition: transform .45s cubic-bezier(.22,.8,.3,1), background .45s, border-color .45s;
}
.steps li:hover { transform: translateY(-5px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.38); }
.steps li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--grad); background-size: 300% 100%; border-radius: 4px 4px 0 0;
}
.step-n {
  display: block; font-family: var(--gothic); font-size: 1.75rem; font-weight: 800; line-height: 1;
  letter-spacing: .05em; margin-bottom: 10px;
  background: var(--grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: slide 11s linear infinite;
}
.step-d {
  display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  font-family: var(--gothic); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}
.steps li b { display: block; color: #fff; font-family: var(--gothic); font-size: 1rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
.steps li p { margin: 0; color: rgba(255,255,255,.88); font-family: var(--gothic); font-size: .84rem; font-weight: 500; line-height: 1.9; }

@media (max-width: 700px) {
  .band { padding: 56px 0; background-position: center, center; }
}
@media (prefers-reduced-motion: reduce) {
  .band::before, .band-glow, .step-n { animation: none !important; }
  .steps li { transition: none !important; }
  .steps li:hover { transform: none !important; }
}

/* ==================================================================
   アイコン / プライスカード / 斜め区切り / カラフルヘッダー
   ================================================================== */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- 機能アイコン --- */
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 14px; border-radius: 11px;
  background: var(--grad-soft);
  border: 1px solid rgba(123,63,212,.16);
  transition: transform .45s cubic-bezier(.22,.8,.3,1), background .45s, border-color .45s;
}
.ic svg { width: 23px; height: 23px; display: block; }
.grid > article:hover .ic {
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
  background: linear-gradient(100deg, rgba(53,182,232,.24), rgba(224,86,143,.24));
  border-color: rgba(123,63,212,.34);
}

/* --- プライスカード --- */
.pricecard {
  position: relative; padding: 3px; border-radius: 8px;
  background: var(--grad); background-size: 220% 100%;
  animation: slide 16s linear infinite;
  box-shadow: 0 22px 50px -26px rgba(106,90,224,.6);
}
.pricecard-in {
  border-radius: 6px; padding: 34px 32px 30px;
  background:
    radial-gradient(620px 240px at 10% 0%, rgba(53,182,232,.10), transparent 62%),
    radial-gradient(560px 240px at 92% 100%, rgba(224,86,143,.10), transparent 62%),
    #fff;
}
.pc-label { margin: 0 0 6px; font-family: var(--gothic); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.pc-amount {
  margin: 0 0 22px; font-family: var(--gothic); font-weight: 800; line-height: 1;
  font-size: clamp(2.2rem, 5.4vw, 3.3rem); letter-spacing: -.01em;
  color: var(--accent-deep);  /* 価格は可読性を優先しベタ色 */
}
.pc-cur { font-size: .52em; vertical-align: .32em; margin-right: .06em; }
.pc-unit { font-size: .28em; vertical-align: .58em; margin-left: .5em; letter-spacing: .04em; }
.pc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pc-list li {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--gothic); font-size: .87rem;
}
.pc-list li span { flex: 0 0 8.5em; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.pc-list li b { color: var(--ink); font-weight: 600; }

/* --- 斜めの区切り --- */
.band { clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%); margin-top: -1.6vw; margin-bottom: -1.6vw; padding: calc(84px + 2.2vw) 0; }
.band::before { top: 2.2vw; }
@media (max-width: 700px) { .band { clip-path: none; margin: 0; padding: 56px 0; } .band::before { top: 0; } }

/* セクション境界に極細のグラデ線 */
section + section { position: relative; }
section.alt { border-bottom: none; }
section:not(.band)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,63,212,.28) 22%, rgba(224,86,143,.28) 72%, transparent);
}
section:last-of-type::after { display: none; }

/* --- カラフルヘッダー --- */
.site-header {
  background:
    linear-gradient(100deg, rgba(53,182,232,.10) 0%, rgba(106,90,224,.10) 34%, rgba(123,63,212,.10) 62%, rgba(224,86,143,.10) 100%),
    rgba(255,255,255,.88);
  backdrop-filter: saturate(190%) blur(12px);
  border-bottom: 1px solid transparent;
  border-image: var(--grad) 1;
}
.brand-name { color: var(--accent-deep); }  /* 白地 11.5:1。グラデ文字は 2.33:1 で不合格のため使わない */
.brand-divider { width: 2px; background: var(--grad); border-radius: 2px; }
.brand-sub { color: var(--accent-deep); }
.brand img { transition: transform .5s cubic-bezier(.22,.8,.3,1); }
.brand:hover img { transform: scale(1.05) rotate(-2deg); }
.header-nav a { color: var(--ink); font-weight: 600; }
.header-nav a:hover { color: var(--g3); }

@media (prefers-reduced-motion: reduce) {
  .pricecard, .pc-amount, .brand-name { animation: none !important; }
  .ic, .brand img { transition: none !important; }
  .grid > article:hover .ic, .brand:hover img { transform: none !important; }
}

/* プライスカード：LP 準拠の注記と含まれる機能 */
.pc-note { margin: 14px 0 0; font-family: var(--gothic); font-size: .76rem; font-weight: 500; line-height: 1.9; color: var(--muted); }
.pc-feat { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.pc-feat-h { margin: 0 0 12px; font-family: var(--gothic); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.pc-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-feat-list li {
  font-family: var(--gothic); font-size: .82rem; font-weight: 600; color: var(--accent-deep);
  padding: 5px 13px; border-radius: 999px; border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
}

/* ==================================================================
   製品サイトと LP の追加部品（ボタン・課題・導入の流れ・よくある質問・LP）
   既存の配色と --grad の体系だけを使う。
   ================================================================== */

/* ボタン（角丸ゼロ） */
.actions { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-block; padding: 13px 26px; font-family: var(--gothic); font-size: .9rem; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; border: 1px solid var(--accent); transition: background .3s, color .3s;
}
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-deep); }
.button.secondary { background: transparent; color: var(--accent); }
.button.secondary:hover { background: var(--accent-tint); }
.hero .button.secondary { color: #fff; border-color: rgba(255,255,255,.6); }
.hero .button.secondary:hover { background: rgba(255,255,255,.10); }
.header-cta { padding: 9px 18px; font-size: .8rem; }

/* 課題 */
.pains { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pains li {
  padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  font-family: var(--gothic); font-size: .88rem; font-weight: 500; line-height: 1.8;
}
.pains li b { display: block; margin-bottom: 6px; font-size: .95rem; color: var(--ink); }


/* 導入の流れ */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.flow li {
  counter-increment: step; position: relative; padding: 16px 20px 16px 72px; background: var(--card);
  border: 1px solid var(--line); font-family: var(--gothic); font-size: .88rem; font-weight: 500; line-height: 1.8;
}
.flow li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 20px; top: 14px;
  font-family: var(--gothic); font-size: 1.3rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.flow li b { display: block; color: var(--ink); font-size: .95rem; }

/* よくある質問 */
.faq { margin: 0; font-family: var(--gothic); }
.faq dt { margin: 22px 0 6px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.faq dt::before { content: "Q. "; color: var(--accent); }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; padding: 0 0 18px 1.6em; border-bottom: 1px solid var(--line); font-size: .88rem; font-weight: 500; line-height: 1.85; color: var(--ink-soft); }

/* LP */
.lp-hero .lead { font-family: var(--gothic); font-size: .95rem; font-weight: 500; line-height: 1.9; color: rgba(255,255,255,.88); }
.hero.lp-hero::after { display: none; }
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.lp-points h3 { margin: 0 0 10px; font-size: 1.02rem; }
.lp-points p { font-family: var(--gothic); font-size: .9rem; font-weight: 500; line-height: 1.85; }
.lp-price { margin: 0 0 14px; font-family: var(--gothic); color: var(--ink); }
.lp-price strong { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: .01em; margin: 0 6px; }
.lp-price small { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.lp-cta { text-align: center; }
.lp-cta .actions { justify-content: center; }

@media (max-width: 700px) {
  .flow li { padding-left: 60px; }
  .header-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none !important; }
}