/* ============================================================
   PRISM 共通デザイントークン・共通コンポーネント
   全PRISM製品ページが読み込む。製品ページ側で色・フォント・行間を再定義しない。
   製品ごとのテーマカラーは、製品ページの :root で --bs-primary・--prism-cta 系・--prism-hero-* を読み替える。
   ============================================================ */

:root{
  /* --- Bootstrap 既定値の上書き（必須） --- */
  --bs-body-font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --bs-body-color:#333333;
  --bs-body-line-height:1.8;
  --bs-primary:#1972B5;
  --bs-link-color:#1972B5;
  --bs-border-radius:.25rem;

  /* --- カラー（比率70:25:5） --- */
  --prism-base:#FFFFFF;          /* ベース70% その1 */
  --prism-base-alt:#F7F8F9;      /* ベース70% その2：セクション背景の交互用 */
  --prism-ink:#333333;           /* メイン25%：本文・見出し・構造の軸 */
  --prism-ink-sub:#666666;       /* メインの低強調（注記・補助テキスト／白地4.5:1以上） */
  --prism-rule:#E0E0E0;          /* 構造上必要な区切り線・表の罫線のみ */
  --prism-cta:#1972B5;           /* テーマカラー（販売-PRISM＝リーフレットの濃い青）：CTA面塗り・アイコン線・見出し脇罫兼用（白文字約5.1:1でAA適合） */
  --prism-cta-hover:#155D93;     /* CTAホバー：--prism-ctaを約15%暗くした値 */
  --prism-accent:#57C9E4;        /* 差し色（リーフレットの明るい水色）：白地での非テキストコントラストが約1.9:1と低いため、アイコン線等の「くっきり見える必要がある」用途には使わず、大きめの装飾・背景アクセントのみに使う */
  --prism-accent-bg:#E8F7FB;     /* 比較表の自社列ヘッダ淡色地（--prism-accentをベースにした淡いブルー系） */

  /* --- タイポグラフィスケール（この7段から外れる値を使わない） --- */
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --fs-32:32px; --fs-40:40px; --fs-48:48px;

  /* --- 余白 --- */
  --sp-sec:80px;                 /* セクション上下の余白（PC） */
  --sp-sec-sm:56px;              /* セクション上下の余白（モバイル） */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--prism-base);
  color:var(--prism-ink);
  font-family:var(--bs-body-font-family);
  font-size:var(--fs-16);
  font-weight:400;                       /* 300（Light）は使用禁止 */
  line-height:var(--bs-body-line-height); /* 1.8（Bootstrap既定1.5は日本語に詰まりすぎる） */
  font-feature-settings:"palt" 1;        /* 約物のアキを詰める */
  -webkit-font-smoothing:antialiased;
}

/* --- 見出し（見出しは700／line-height 1.4） --- */
h1,h2,h3{ font-weight:700; line-height:1.4; margin:0; }
h1{ font-size:var(--fs-40); }
h2{ font-size:var(--fs-32); }
h3{ font-size:var(--fs-20); }
p{ margin:0; }

/* --- 1行の文字数（全角40〜45文字相当）--- */
.prism-measure{ max-width:43em; }

/* --- セクション：背景の2枚交互が唯一の区切り手段 --- */
.prism-section{ padding:var(--sp-sec) 0; background:var(--prism-base); }
.prism-section--alt{ background:var(--prism-base-alt); }
.prism-container{ width:100%; max-width:880px; margin:0 auto; padding:0 40px; }

/* --- セクション見出しの上に置く小ラベル --- */
.prism-eyebrow{
  font-size:var(--fs-16); font-weight:700; color:var(--prism-ink);
  margin-bottom:16px; padding-left:12px; border-left:3px solid var(--prism-accent);
  line-height:1.4;
}

/* --- CTAボタン（面塗りは製品テーマカラー（--prism-cta）のみ／タップ44px以上） --- */
.prism-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 32px;
  font-size:var(--fs-16); font-weight:700; line-height:1.4;
  border-radius:var(--bs-border-radius); text-decoration:none;
  border:2px solid transparent; cursor:pointer;
}
.prism-btn--primary{ background:var(--prism-cta); color:#FFFFFF; }
.prism-btn--primary:hover{ background:var(--prism-cta-hover); color:#FFFFFF; }
.prism-btn--outline{ background:transparent; color:var(--prism-cta); border-color:var(--prism-cta); }
.prism-btn--outline:hover{ background:var(--prism-accent-bg); }

/* --- リンク（文字色は製品テーマカラー（--bs-link-color）。白文字コントラスト不足の色を避ける） --- */
a{ color:var(--bs-link-color); text-decoration:underline; text-underline-offset:2px; }

/* --- フォーカスリング（消してはならない） --- */
a:focus-visible, button:focus-visible, .prism-btn:focus-visible{
  outline:3px solid var(--prism-accent); outline-offset:2px;
}

/* --- 表（比較表は<table>必須。自社列ヘッダは淡色地） --- */
.prism-table{ width:100%; border-collapse:collapse; font-size:var(--fs-16); }
.prism-table th, .prism-table td{
  border:1px solid var(--prism-rule); padding:16px; text-align:left; line-height:1.8;
  vertical-align:top;
}
.prism-table thead th{ font-weight:700; background:var(--prism-base-alt); }
.prism-table thead th.is-own{ background:var(--prism-accent-bg); }
.prism-table caption{
  caption-side:top; text-align:left; font-size:var(--fs-16); color:var(--prism-ink-sub);
  padding-bottom:12px;
}

/* --- 画像プレースホルダ（実素材が無い場合は空白＋ラベル） --- */
.prism-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--prism-base-alt); border:1px solid var(--prism-rule);
  color:var(--prism-ink-sub); font-size:var(--fs-16); line-height:1.8; padding:24px;
}

/* --- 未確定箇所のプレースホルダ表記 --- */
.prism-todo{ color:var(--prism-ink-sub); }

/* ============================================================
   Hero（ファーストビュー）：全製品共通の固定デザイン
   テーマカラーの帯＋光線＋製品画面＋丸いバッジ2つ＋注記。
   製品ごとに変えるのは色だけ（下の --prism-hero-* を製品ページの :root で指定）。
   ============================================================ */
:root{
  --prism-accent2:#B5540B;                      /* 第2アクセント（販売-PRISM） */
  --prism-hero-bg:var(--prism-cta);             /* 帯の色（白文字で4.5:1以上） */
  --prism-hero-shade:#0B2A44;                   /* 影の色（帯の色をさらに暗くした色） */
  --prism-hero-ray-1:#CFE3F5;                   /* 光線の色・根元側（テーマカラー寄りの白） */
  --prism-hero-ray-2:#FFFFFF;                   /* 光線の色・先端側 */
  --prism-hero-label:var(--prism-accent-bg);    /* 製品名ラベルの文字色 */
  --prism-hero-badge-a-bg:var(--prism-accent-bg);
  --prism-hero-badge-a-fg:var(--prism-hero-bg);
  --prism-hero-badge-b-bg:var(--prism-accent2);
  --prism-hero-badge-b-fg:#FFFFFF;
}

/* 色帯の上のボタン（白塗り／白枠） */
.prism-btn--on-color{ background:#FFFFFF; color:var(--prism-hero-bg); }
.prism-btn--on-color:hover{ background:#F7F8F9; color:var(--prism-hero-bg); }
.prism-btn--outline-on-color{ background:transparent; color:#FFFFFF; border-color:#FFFFFF; }
.prism-btn--outline-on-color:hover{ background:rgba(255,255,255,.15); color:#FFFFFF; }

/* 帯と光線 */
.prism-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:64px 0 72px; color:#FFFFFF; background:var(--prism-hero-bg);
}
.prism-hero::before{
  content:none; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--prism-hero-ray-1) 0%, var(--prism-hero-ray-1) 40%, var(--prism-hero-ray-2) 80%);
  -webkit-mask:url("images/prism-hero-rays.webp") center bottom / cover no-repeat;
          mask:url("images/prism-hero-rays.webp") center bottom / cover no-repeat;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .prism-hero::before{ content:""; }
}
.prism-hero a:focus-visible{ outline-color:#FFFFFF; }
.prism-hero h1, .prism-hero p{ word-break:auto-phrase; overflow-wrap:anywhere; }
.prism-hero .nw{ display:inline-block; }

/* 左：コピー／右：製品画面 */
.prism-hero__grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
.prism-hero__label{ display:block; font-size:var(--fs-16); font-weight:700; line-height:1.8; color:var(--prism-hero-label); margin-bottom:16px; }
.prism-hero h1{ font-size:var(--fs-40); margin-bottom:24px; }
.prism-hero__sub{ font-size:var(--fs-18); margin-bottom:40px; color:rgba(255,255,255,.92); }
.prism-hero__cta{ display:flex; gap:16px; flex-wrap:wrap; }
.prism-hero__cta .prism-btn{ flex:1 1 auto; }   /* 2段になったときも幅をそろえる */
.prism-hero__stats{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.22); }
.prism-hero__stat{ flex:1 1 184px; min-width:0; }
.prism-hero__stat-num{ display:block; white-space:nowrap; font-size:var(--fs-24); font-weight:700; line-height:1.2; color:#FFFFFF; }
.prism-hero__stat-note{ display:block; margin-top:8px; font-size:var(--fs-16); color:rgba(255,255,255,.8); }
.prism-hero__media{ position:relative; padding:40px 0 24px 8px; }
.prism-hero__stage{ position:relative; }

/* 製品画面（角丸＋影のみ。枠・ウィンドウ風のバーは付けない） */
.prism-hero__screen{
  position:relative; z-index:1; border-radius:14px; overflow:hidden; color:var(--prism-ink);
  box-shadow:0 32px 64px color-mix(in srgb, var(--prism-hero-shade) 40%, transparent),
             0 4px 12px color-mix(in srgb, var(--prism-hero-shade) 20%, transparent);
}
.prism-hero__screen img{ display:block; width:100%; height:auto; }
.prism-hero__note{ position:relative; z-index:1; display:inline-block; margin-top:12px; font-size:var(--fs-16); line-height:1.5; color:rgba(255,255,255,.78); }

/* 丸いバッジ2つ（右下。a＝淡い色／b＝第2アクセント） */
.prism-hero__badge{
  position:absolute; z-index:2; width:136px; height:136px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.3;
  box-shadow:0 16px 32px color-mix(in srgb, var(--prism-hero-shade) 35%, transparent);
}
.prism-hero__badge::before{
  content:""; position:absolute; z-index:-1; inset:-9px 9px 9px -9px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);
}
.prism-hero__badge-icon{ font-size:20px; line-height:1; margin-bottom:6px; }
.prism-hero__badge-num{ display:block; font-size:var(--fs-24); font-weight:700; line-height:1.1; }
.prism-hero__badge-title{ display:block; font-size:var(--fs-16); font-weight:700; margin-top:4px; }
.prism-hero__badge--a{ right:132px; bottom:-80px; background:var(--prism-hero-badge-a-bg); color:var(--prism-hero-badge-a-fg); }
.prism-hero__badge--b{ right:-12px; bottom:-100px; background:var(--prism-hero-badge-b-bg); color:var(--prism-hero-badge-b-fg); }
.prism-hero__badge--b::before{ inset:-9px -9px 9px 9px; }

@media (min-width:992px){
  .prism-hero__grid{ grid-template-columns:5fr 8fr; gap:40px; }
}
@media (min-width:992px) and (max-width:1199.98px){ .prism-hero__media{ margin-right:-24px; } }
@media (min-width:1200px){ .prism-hero__media{ margin-right:-64px; } }
@media (min-width:1440px){ .prism-hero__badge--a{ right:76px; } .prism-hero__badge--b{ right:-68px; } }

/* タブレット・スマホ：ラベル・h1 → 画面 → 説明文 → ボタン → 実績数値 */
@media (max-width:991.98px){
  .prism-hero{ padding-top:40px; }
  .prism-hero::before{ -webkit-mask-size:auto 520px; mask-size:auto 520px; -webkit-mask-position:72% 40px; mask-position:72% 40px; }
  .prism-hero__grid{ gap:0; }
  .prism-hero__copy{ display:contents; }
  .prism-hero h1{ font-size:var(--fs-32); order:1; }
  .prism-hero__label{ margin-bottom:12px; }
  .prism-hero__media{ order:3; margin-bottom:32px; padding:32px 0 0 8px; }
  .prism-hero__note{ display:block; margin-top:116px; text-align:right; }
  .prism-hero__sub{ order:4; margin-bottom:32px; }
  .prism-hero__cta{ order:5; }
  .prism-hero__stats{ order:6; margin-top:40px; margin-bottom:0; }
}
@media (max-width:575.98px){
  .prism-hero__badge{ width:116px; height:116px; }
  .prism-hero__badge::before{ inset:-6px 6px 6px -6px; }
  .prism-hero__badge--b::before{ inset:-6px -6px 6px 6px; }
  .prism-hero__badge-icon{ font-size:15px; margin-bottom:2px; }
  .prism-hero__badge-num{ font-size:var(--fs-18); }
  .prism-hero__badge-title{ margin-top:0; }
  .prism-hero__badge--a{ right:110px; bottom:-52px; }
  .prism-hero__badge--b{ right:-12px; bottom:-70px; }
  .prism-hero__note{ margin-top:84px; }
}
/* 画面の下に注記が無いとき、バッジのはみ出し分の余白を確保 */
.prism-hero__media:not(:has(.prism-hero__note)){ padding-bottom:104px; }
@media (max-width:991.98px){ .prism-hero__media:not(:has(.prism-hero__note)){ padding-bottom:104px; } }
@media (max-width:575.98px){ .prism-hero__media:not(:has(.prism-hero__note)){ padding-bottom:76px; } }

/* --- モバイル追従CTAバー（56px以内・1〜2ボタン・装飾なし） --- */
.prism-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  height:56px; display:none; align-items:stretch; justify-content:center;
  background:var(--prism-cta);
}
.prism-sticky-cta a{
  color:#FFFFFF; font-size:var(--fs-16); font-weight:700; text-decoration:none;
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
/* 2ボタン構成：左右均等割り。塗り＋アウトラインの2色のみ（新しい色は追加しない） */
.prism-sticky-cta--split{ background:transparent; }
.prism-sticky-cta--split a{ width:50%; }
.prism-sticky-cta--split a.prism-btn--primary{ background:var(--prism-cta); }
.prism-sticky-cta--split a.prism-btn--outline{ background:#FFFFFF; border:none; border-left:1px solid rgba(255,255,255,.4); }

/* --- パンくずナビゲーション --- */
.prism-breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; font-size:var(--fs-16); color:var(--prism-ink-sub); }
.prism-breadcrumb li::after{ content:"›"; margin-left:8px; color:var(--prism-rule); }
.prism-breadcrumb li:last-child::after{ content:""; margin-left:0; }
.prism-breadcrumb li[aria-current="page"]{ color:var(--prism-ink); font-weight:700; }

/* --- 料金カード（初期費用＋月額費用の2枚組） --- */
.prism-price-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.prism-price-card{
  flex:1 1 240px; background:#FFFFFF; border:1px solid var(--prism-rule);
  padding:24px; text-align:center;
}
.prism-price-card .label{ font-size:var(--fs-16); color:var(--prism-ink-sub); margin-bottom:8px; }
.prism-price-card .amount{ font-size:var(--fs-40); font-weight:700; line-height:1.2; }
.prism-price-card .note{ font-size:var(--fs-16); color:var(--prism-ink-sub); margin-top:8px; }
.prism-price-plus{ font-size:var(--fs-32); font-weight:700; color:var(--prism-ink-sub); flex:0 0 auto; }

/* --- Before/After比較の視覚化（新しい色は追加しない） --- */
.prism-before-after{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.prism-before-after .ba-block{ text-align:center; }
.prism-before-after .ba-num{ font-size:var(--fs-32); font-weight:700; color:var(--prism-ink); }
.prism-before-after .ba-num.is-after{ color:var(--prism-cta); }
.prism-before-after .ba-label{ font-size:var(--fs-16); color:var(--prism-ink-sub); margin-top:4px; }
.prism-before-after .ba-arrow{ font-size:var(--fs-24); color:var(--prism-ink-sub); }
.prism-before-after .ba-bar{ background:var(--prism-rule); height:10px; width:120px; overflow:hidden; }
.prism-before-after .ba-bar span{ display:block; height:100%; background:var(--prism-cta); }

/* --- 改行：文節で改行し、語の途中で切らない --- */
h1,h2,h3,h4,main p,main li,main td,main th,main summary{ word-break:auto-phrase; overflow-wrap:anywhere; }
.nw{ display:inline-block; }

/* --- 見出し直後の文（1〜2文。1行の文字数制限なし。PCのみ文ごとに改行） --- */
.prism-lead{ margin-top:16px; margin-bottom:40px; }
.prism-br-pc{ display:none; }
@media (min-width:992px){ .prism-br-pc{ display:inline; } }

/* --- 横スクロールの表（スマホで表が収まらない場合） --- */
.prism-table-scroll{ overflow-x:auto; }
.prism-table-scroll .prism-table{ min-width:640px; background:#FFFFFF; }

/* --- スクロールの案内（.js-scrollable を共通JSが自動で包む） --- */
.prism-scroll{ position:relative; }
.prism-scroll::before, .prism-scroll::after{
  content:""; position:absolute; top:0; bottom:0; z-index:1; width:24px;
  pointer-events:none; opacity:0; transition:opacity .2s ease-out;
}
.prism-scroll::before{ left:0; background:linear-gradient(to right, rgba(51,51,51,.16), rgba(51,51,51,0)); }
.prism-scroll::after{ right:0; background:linear-gradient(to left, rgba(51,51,51,.16), rgba(51,51,51,0)); }
.prism-scroll.is-left::before, .prism-scroll.is-right::after{ opacity:1; }
.prism-scroll__hint{
  position:absolute; top:50%; left:50%; z-index:2; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 24px; border-radius:12px; background:rgba(51,51,51,.8); color:#FFFFFF;
  font-size:var(--fs-16); font-weight:700; line-height:1.4; white-space:nowrap;
  pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .3s ease-out, visibility 0s linear .3s;
}
.prism-scroll.is-hint .prism-scroll__hint{ opacity:1; visibility:visible; transition:opacity .3s ease-out; }
.prism-scroll__hint svg{ width:36px; height:36px; }
.prism-scroll.is-hint .prism-scroll__hint svg{ animation:prism-swipe 1.2s ease-in-out 2; }
@keyframes prism-swipe{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-10px); } }
@media (prefers-reduced-motion: reduce){
  .prism-scroll::before, .prism-scroll::after, .prism-scroll__hint, .prism-scroll.is-hint .prism-scroll__hint{ transition:none; }
  .prism-scroll.is-hint .prism-scroll__hint svg{ animation:none; }
}

/* --- 追従CTAバー（3ボタン。ファーストビューのボタンを通り過ぎたら表示） --- */
.prism-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; justify-content:center; gap:8px; width:100%; padding-left:16px; padding-right:16px; background:#FFFFFF;
  border-top:1px solid var(--prism-rule); box-shadow:0 -2px 8px rgba(51,51,51,.06);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.js-dock .prism-dock{
  transform:translateY(100%); opacity:0; visibility:hidden;
  transition:transform .4s ease-out, opacity .4s ease-out, visibility 0s linear .4s;
}
.js-dock .prism-dock.is-shown{
  transform:none; opacity:1; visibility:visible;
  transition:transform .4s ease-out, opacity .4s ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce){ .js-dock .prism-dock, .js-dock .prism-dock.is-shown{ transition:none; } }
.prism-dock__item{ flex:0 1 360px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px 12px; }
.prism-dock__label{ display:block; font-size:var(--fs-16); line-height:1.25; color:var(--prism-ink-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-bottom:2px; }
.prism-dock__btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; max-width:320px; height:48px; border-radius:var(--bs-border-radius);
  font-size:var(--fs-16); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 8px; text-decoration:none; margin:0 auto;
}
.prism-dock__btn--fill{ background:var(--prism-cta); color:#FFFFFF; }
.prism-dock__btn--fill:hover{ background:var(--prism-cta-hover); color:#FFFFFF; }
.prism-dock__btn--outline{ background:#FFFFFF; color:var(--prism-cta); border:1.5px solid var(--prism-cta); }
.prism-dock__btn--outline:hover{ background:var(--prism-accent-bg); color:var(--prism-cta); }
.prism-dock__icon{ display:none; font-size:20px; line-height:1; }
.prism-dock__short{ display:none; }
body:has(.prism-dock){ padding-bottom:96px; }
@media (max-width:767.98px){
  .prism-dock{ height:calc(56px + env(safe-area-inset-bottom,0px)); }
  .prism-dock{ gap:0; padding-left:0; padding-right:0; }
  .prism-dock__item{ flex:1 1 0; padding:4px 6px; }
  .prism-dock__label{ display:none; }
  .prism-dock__btn{ flex-direction:column; gap:2px; min-width:44px; padding:0 2px; }
  .prism-dock__icon{ display:block; }
  .prism-dock__full{ display:none; }
  .prism-dock__short{ display:block; }
  body:has(.prism-dock){ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }
}

/* --- フェードイン（下からフワッと。これ以外の動きは禁止。実処理はjs/prism-common.js） --- */
/* JSが動かない環境では常に表示された状態を保つ（html.js-fade が付いたときだけ隠す） */
.js-fade .prism-fade{ opacity:0; transform:translateY(16px); }
.js-fade .prism-fade{ transition:opacity .6s ease-out, transform .6s ease-out; }
.js-fade .prism-fade.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-fade .prism-fade{ opacity:1; transform:none; transition:none; }
}

/* --- レスポンシブ（Bootstrap 5準拠のブレークポイント） --- */
@media (max-width:767.98px){
  .prism-section{ padding:var(--sp-sec-sm) 0; }
  .prism-container{ padding:0 20px; }
  h1{ font-size:var(--fs-32); }
  h2{ font-size:var(--fs-24); }
  .prism-sticky-cta{ display:flex; }
  body{ padding-bottom:56px; }
}